Đối tượng Error trong JavaScript

Khi lỗi xảy ra trong JavaScript, trình thông dịch tạo ra một đối tượng Error chứa thông tin về lỗi. Đối tượng này có thể được bắt (catch) trong khối try...catch hoặc ném (throw) chủ động cho lỗi tùy chỉnh.

Hai thuộc tính chuẩn của Error

Lưu ý: Các môi trường (Node.js, trình duyệt) có thể bổ sung thêm thuộc tính như stack (stack trace), fileName, lineNumber.

Các loại lỗibuiltin phổ biến

• EvalError: Lỗi khi dùng eval() (hiếm gặp).
• RangeError: Giá trị không trong phạm vi cho phép.
• ReferenceError: Truy cập biến chưa khai báo.
• SyntaxError: Lỗi cú pháp khi parse code.
• TypeError: Giá trị không phải kiểu mong đợi.
• URIError: Lỗi hàm encodeURI/decodeURI.

Ví dụ: Bắt và hiển thị thông tin lỗi

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Error Object</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
        .result { font-size: 1.1rem; font-weight: 500; color: green; white-space: pre-line; }
        button { padding: 0.5rem 1rem; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
        button:hover { background: #c82333; }
    </style>
</head>
<body>
    <h1>Đối tượng Error trong JavaScript</h1>
    <div class="result" id="resultEl"></div>
    <button id="btn">GÂY RA LỖI</button>
    <p>Nhấn nút để truy cập biến chưa khai báo (gây ReferenceError)</p>

    <script>
        const resultEl = document.getElementById('resultEl');
        
        document.getElementById('btn').addEventListener('click', () => {
            try {
                // Gây lỗi: truy cập biến 'a' chưa định nghĩa
                a; 
            } catch (err) {
                resultEl.textContent = `Error object: ${err}
error.name: ${err.name}
error.message: ${err.message}
error.stack: ${err.stack}`;
            }
        });
    </script>
</body>
</html>

Kết quả

Ban đầu: Trống.

Sau khi nhấn nút:

Error object: ReferenceError: a is not defined
error.name: ReferenceError
error.message: a is not defined
error.stack: ReferenceError: a is not defined
    at HTMLButtonElement.document.getElementById.addEventListener...

Ném lỗi tùy chỉnh (Custom Error)

function validateAge(age) {
    if (age < 0) {
        throw new Error("Tuổi không thể âm"); // Error chung
    }
    if (age > 150) {
        throw new RangeError("Tuổi quá lớn"); // Error cụ thể
    }
    return true;
}

try {
    validateAge(-5);
} catch (err) {
    console.log(err.name);    // "Error"
    console.log(err.message); // "Tuổi không thể âm"
}

Best Practices

Luôn dùng try...catch cho code bất đồng bộ (async/await) hoặc I/O.
• Tạo class Error tùy chỉnh kế thừa Error cho ứng dụng lớn.
• Không dùng throw với chuỗi đơn thuần (throw "lỗi"), hãy ném đối tượng Error.
• Xử lý lỗi cụ thể trước, lỗi chung sau trong nhiều catch (nếu dùng nhiều catch).