Code Tu Tam

Cách kiểm soát lỗi trong Javascript

Nguyễn Quang Anh
Rate this post

Việc gặp lỗi trong quá trình viết code là điều thường xuyên mà chúng ta gặp phải, thường là do trong quá trình làm chúng ta thiếu biến hay dữ liệu … Thường thì một đoạn code script sẽ dừng hoạt động nếu gặp lỗi và sẽ in thông báo ra phần cosole. Việc kiểm soát lỗi rất quan trọng nếu không chúng ta sẽ mất nhiều thời gian hơn để xác định nguyên nhân dẫn đến xảy ra lỗi.

Trong javascript có một cấu trúc giúp chúng ta xác định lỗi, và đoạn code sẽ không bị dừng khi xảy ra lỗi.

Cú pháp như sau :

try {
  // code...
} catch (e) {
  // Trả về lỗi
  // Vị trí này chỉ chạy khi ở try có lỗi 
}

Cách hoạt động

  1. Mã trong try {…} được thực thi.
  2. Nếu không có lỗi, thì catch (e) sẽ bị bỏ qua và đoạn code của bạn vẫn chạy bình thường.
  3. Nếu một lỗi xảy ra, thì quá trình thực thi try thì sẽ đẩy lỗi vào catch

Để bạn có thể hiểu rõ hơn thì tôi có những ví dụ sau:

try {
    function example(){a.b;}
    example();
} catch(e) {
    console.log("error", e);
}
// Trả về
error ReferenceError: a is not defined

Nếu không sử dụng try…catch thì chương trình sẽ bị dừng khi gặp lỗi, nhưng vì ta có sử dụng nên chương trình vẫn sẽ hoạt động bình thường.

* Lưu ý: try…catch chỉ hoạt động khi code của bạn đúng cú pháp, nó sẽ không hoạt động nếu sai cú pháp, chẳng hạn như:

try {
  {
} catch (e) {
  console.log("Lỗi nên không chạy được vào catch");
}
// Trả về
Uncaught SyntaxError: Unexpected token 'catch'.

Không chỉ riêng try…catch, mà còn nhiều cấu trúc khác trong javascript cũng sẽ không hoạt động nếu sai cú pháp, bạn nên chú ý trong quá trình sử dụng.

Và cũng có vài trường hợp đặc biệt mà try…catch cũng sẽ không hoạt động, ví dụ như khi bạn sử dụng setTimeout thì try…catch cũng sẽ không bắt được nó:

try {
  setTimeout(() => {
    console.log("Some thing");
  }, 1000);
} catch (err) {
  console.log("error", e);
}
// Trả về
Some thing

Ở ví dụ này try…catch không hoạt động vì khi try…catch xử lý xong thì setTimeout mới bắt đầu thực thi.

Các đối tượng lỗi (error object)

Ở các ví dụ trên khi có lỗi xảy ra thì Javascript tạo một đối tượng có chứa các thông tin về lỗi đó, và nó được chuyển như một dối số cho catch, đối tượng gồm 2 thuộc tính chính:

Các lỗi thường gặp:

Ví dụ:

try {
  example; // error, variable is not defined!
} catch (e) {
  console.log(e.name); // ReferenceError
  console.log(e.message); // example is not defined
  console.log(e.stack); // ReferenceError: example is not defined at (...call stack)
  console.log(e); // ReferenceError: example is not defined
}

Trong trường hợp bạn không cần xem chi tiết lỗi trả về, bạn có thể bỏ qua đối số ở catch

try {
  // code
} catch { <-- bỏ (e)
  // code
}

Try…catch…finally

Ngoài ra cấu trúc try..catch còn có một mệnh đề là finally, và nó sẽ chạy trong mọi trường hợp nếu có.

Nó thường được sử dụng khi bạn bắt đầu thực hiện một công việc và muốn nó hoàn thành dù bất cứ trường hợp nào xảy ra.

Cấu trúc như sau:

try {
   ... thực thi code ...
} catch (err) {
   ... kiểm soát lỗi ...
} finally {
   ... luôn luôn chạy ...
}

Để hiểu rõ hơn thì tôi có ví dụ sau:

const num = 100, deno= 'a';
try {
   console.log(num / deno);
   console.log(a);
} catch (e) {
   console.log('Phát hiện lỗi'); 
   console.log('error: ', e); 
} finally {
   console.log(' Finally vẫn chạy');
}
// Trả về
NaN
Phát hiện lỗi
ReferenceError: a is not defined
Finally vẫn chạy

Như bạn thấy dù có lỗi xảy ra và được bắt bởi catch nhưng mệnh đề finally vẫn thực hiện dù như thế nào.

Trên đây là các kiến thức cơ bản về try…catch, trong quá trình viết code, làm việc bạn hãy áp dụng một cách linh hoạt để dự án của mình hoạt động mượt mà, tốt hơn.

Nếu có bất kì thắc mắc và cần trợ giúp hãy để lại comment để Code Tu Tam hỗ trợ bạn nhé!

 

 

Exit mobile version