Cách xử lý lỗi trong JavaScript

Lỗi lập trình là không thể tránh khỏi. Không sớm thì muộn, ứng dụng của bạn sẽ gặp phải một số hành vi không mong muốn. Giống như bất kỳ ngôn ngữ lập trình nào khác, JavaScript gây ra lỗi khi có sự cố xảy ra trong mã của bạn.

Lỗi làm gián đoạn quy trình bình thường của ứng dụng. Nhưng chúng cũng giúp bảo vệ ứng dụng của bạn khỏi các hành vi không thể đoán trước. Biết cách xử lý lỗi đúng cách là điều tối quan trọng.

Tại sao Xử lý lỗi lại quan trọng?

Xử lý lỗi góp phần cải thiện trải nghiệm người dùng. Bạn có thể hoán đổi các lỗi mặc định và đôi khi dài dòng của JavaScript bằng các thông báo lỗi mà con người có thể đọc được của riêng bạn. Bạn có thể xử lý một cách khéo léo nguyên nhân của một số lỗi và giữ cho chương trình của bạn tiếp tục chạy hơn là để nó thoát ra.

Xử lý lỗi cũng hữu ích trong quá trình phát triển. Bạn có thể gặp lỗi thời gian chạy và làm điều gì đó hữu ích với nó, chẳng hạn như đăng nhập nó vào bảng điều khiển của trình duyệt. Điều này hay hơn là lỗi gây ra sự cố và không biết lỗi xảy ra ở đâu hoặc tại sao.

Cấu trúc của lỗi cài sẵn JavaScript

Các lỗi của JavaScript là các đối tượng có ba thuộc tính:

• Tên: Đây là tên của lỗi. Ví dụ, một tên biến bị thiếu sẽ tạo ra một lỗi có tên là SyntaxError.
• thông điệp: Đây là phần nội dung của thông báo và giải thích lỗi bằng văn bản.
• gây ra: Bạn có thể sử dụng thuộc tính này với các lỗi tùy chỉnh để theo dõi ngăn xếp cuộc gọi.

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

Dưới đây là một số lỗi phổ biến được tìm thấy trong JavaScript.

Lỗi cú pháp

Lỗi cú pháp có thể xảy ra khi JavaScript cố gắng diễn giải mã của bạn. Nó sẽ phát sinh lỗi nếu mã của bạn không tuân theo cú pháp chính xác. Một số lỗi phổ biến có thể phát sinh lỗi cú pháp là:

• Thiếu tên biến.
• Thiếu “}” sau một hàm.
• Thiếu “)” sau một điều kiện.

ReferenceError

Lỗi tham chiếu xảy ra khi một chương trình cố gắng tham chiếu đến một biến không có sẵn hoặc nằm ngoài phạm vi.

TypeError

JavaScript có thể gặp lỗi kiểu khi nó không thể thực hiện một thao tác vì kiểu mà nó mong đợi khác với kiểu mà nó nhận được.

URIError

Lỗi này xảy ra nếu bạn sử dụng chức năng xử lý URI chung — như decodeURIComponent () – không chính xác. Kết quả là, mã hóa hoặc giải mã không thành công.

AggregateError

Lỗi này được sử dụng để đại diện cho nhiều lỗi được bao bọc trong một. Sử dụng nó khi bạn muốn ném nhiều lỗi cùng một lúc. Ví dụ: Promise.any () có thể ném AggregateError () khi tất cả các lời hứa được chuyển đến nó đều bị từ chối.

Lỗi bên trong

Lỗi InternalError được đưa ra khi lỗi xảy ra bên trong công cụ JavaScript.

RangeError

Một số hàm quy định phạm vi giá trị mà bạn có thể chuyển làm đối số. Lỗi này xảy ra khi bạn cố gắng chuyển một giá trị không có trong phạm vi đó.

Xử lý lỗi với khối Try … Catch

JavaScript cung cấp chức năng xử lý ngoại lệ được tích hợp sẵn với cố gắng… bắt… cuối cùng khối. Nó cũng cho phép bạn sửa lỗi của riêng mình bằng cách sử dụng ném nhà điều hành.

Bạn có thể sử dụng khối try… catch để xử lý các lỗi xảy ra trong thời gian chạy. Bạn viết mã hợp lệ mà bạn mong đợi để thực thi chính xác trong khối thử. Trong khối bắt, bạn có thể viết mã xử lý lỗi.

try {
} catch (error) {
} finally {
}

Khối bắt được bỏ qua nếu mã trong khối thử không phát sinh bất kỳ lỗi nào. Nếu nó phát sinh lỗi, quá trình thực thi sẽ chuyển đến khối bắt. Mã trong khối cuối cùng chạy cho dù có lỗi xảy ra hay không. Khối này không bắt buộc, vì vậy hãy bỏ qua nếu bạn không cần.

Mã bạn đưa vào khối thử phải hợp lệ. Nếu không, JavaScript sẽ gây ra lỗi phân tích cú pháp.

Hãy xem một ví dụ thực tế:

try {
console.log(text)
} catch (error) {
console.log(error.message)
} finally {
console.log("Will be executed regardless")
}

Chương trình này cố gắng ghi lại giá trị của biến văn bản. Vì biến đó không được định nghĩa nên chương trình sẽ báo lỗi. Lỗi này được in trên bảng điều khiển trong khối bắt. Sau đó, khối cuối cùng chạy và in một thông điệp của riêng nó.

ReferenceError: text is not defined
Will be executed regardless

Trong các tình huống mà bạn cần nêu ra lỗi của chính mình, hãy sử dụng ném nhà điều hành.

Hãy xem xét ví dụ này sẽ tạo ra lỗi nếu dữ liệu bị sai:

const data = getData()
try {
if (!data) {
throw "No data"
}
console.log(data)
} catch(error) {
console.log(error) 
}

Trong ví dụ này, chương trình gọi hàm getData () và gán kết quả của nó cho biến dữ liệu. Trong khối thử, khối ném một lỗi tùy chỉnh nếu dữ liệu trống. Khối bắt lỗi đó và ghi vào bảng điều khiển.

Việc ném lỗi rất có lợi trong quá trình phát triển. Bạn có thể sử dụng thông báo lỗi tùy chỉnh để hiểu lý do tại sao ứng dụng của bạn không hoạt động như mong đợi.

Như ví dụ này minh họa, bạn có thể sử dụng một chuỗi cho đối tượng lỗi. Bạn thực sự có thể ném bất kỳ biểu thức JavaScript nào dưới dạng lỗi. Tuy nhiên, vì lợi ích của sự nhất quán với các lỗi tích hợp, hãy sử dụng một đối tượng JavaScript có chứa tên và thông báo.

throw {
name: "Error name", 
message: "Error message"
}

Bạn cũng có thể sử dụng các hàm tạo dựng sẵn của JavaScript khi gặp lỗi. Các hàm tạo này bao gồm Error, SyntaxError và ReferenceError, trong số những hàm khác.

Để tạo ra một lỗi bằng cách sử dụng hàm tạo Lỗi, hãy sử dụng mã này:

throw new Error("No data")

Bây giờ bạn có thể tham khảo tên và tin nhắn.

console.log(error.name) 
console.log(error.message) 

Mở rộng Đối tượng Lỗi JavaScript

Một lớp lỗi tùy chỉnh có ích khi xử lý các lỗi không tương ứng với các đối tượng đã được JavaScript cung cấp. Ví dụ: bạn có thể muốn tách lỗi xác thực dữ liệu thành một loại cụ thể được gọi là ValidationError.

Bạn có thể sử dụng lớp JavaScript ES2015 để tạo lớp lỗi tùy chỉnh.

class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}

Ném lỗi bằng cách sử dụng lớp ValidationError như sau:

throw new ValidationError("Your error message")

Lỗi được ném ra sẽ là một đối tượng có tên và giá trị thông báo.

{
name: "ValidationError",
message: "Your error message"
} 

Có lỗi cần trợ giúp

Xử lý lỗi là một phần cơ bản của lập trình, cho dù bạn đang sử dụng ngôn ngữ nào. JavaScript hỗ trợ rất tốt cho việc nâng cao và bắt lỗi theo kiểu ngoại lệ. Nó cũng có một số loại lỗi tích hợp mà bạn có thể xử lý và sử dụng cho các trường hợp của riêng mình.

Một số lỗi như lỗi cú pháp có thể không bị phát hiện khi bạn viết JavaScript ở “chế độ cẩu thả”. Sử dụng chế độ nghiêm ngặt cho phép JavaScript bắt các lỗi mà nếu không nó sẽ bỏ qua.