Hướng dẫn dùng rrors JavaScript
Khi lập trình, chúng ta thường sợ error. Nhưng bằng cách làm việc với nó, ta học được tại sao không nên làm cái này (và cái kia), cũng như làm thế nào để code ngon hơn. Show Bài viết này chia thành 3 phần, đầu tiên là tổng quan về error. Sau đó chúng ta sẽ tập trung vào backend (Node.js + Express.js) và cuối cùng là cách xử lý error trong React.js. I. JavaScript Errors và generic handling
Error ObjectObject Error có 2 thuộc tính để ta có thể sử dụng. Một là message, tức là đối số bạn truyền vào Error constructor, ví dụ
Thuộc tính thứ hai cực kỳ
quan trọng chính là stack trace của Error. Bạn có thể truy xuất nó thông qua thuộc tính
Throwing và Handling ErrorsVì thể hiện của Error không có bất kỳ hiệu ứng, chẳng hạn new Error('...') không làm bất cứ thứ gì. Khi Error
Nếu chúng ta không đặt ... finally Đôi
lúc ta cần phải thực thi code dù bất cứ điều kiện nào xảy ra, lúc này bạn có thể dùng block thứ 3 là
Xử lý bất đồng bộ — CallbacksBất đồng bộ là chủ đề mà bạn luôn phải lưu ý khi làm việc với JavaScript. Khi bạn có một hàm bất đồng bộ, và một Error xảy ra trong hàm đó, đoạn mã sẽ tiếp tục thực thi, bởi vậy không có lỗi nào được bắn ra ngay. Khi xử lý hàm bất đồng bộ với callback, bạn thường nhận 2 đối số trong callback, thường sẽ như này:
Nếu có Error, tham số Bất đồng bộ - PromisesMột cách tốt hơn để xử lý bất đồng bộ là dùng promises. Bên cạnh việc code dễ độc hơn, chúng ta cũng cải thiện việc xử lý lỗi. Không cần phải quan tâm quá nhiefu đến việc bắt chính xác Error, miễn là có block
Bởi vậy hãy luôn thêm một block
try … catch — againVới việc xuất hiện async / await trong JavaScript, ta trở lại với cách bắt lỗi cổ điển, với
II. Xử lý lỗi trong ServerGiờ chúng ta đã có những công cụ để làm việc với Error, hãy xem trong thực tế thì ta sẽ thực hiện như thế nào. Xử lý lỗi ở backend là một phần trong ứng dụng của bạn. Có nhiều cách tiếp cận với vấn đề này, tôi sẽ chỉ cho bạn cách tiếp cận với việc custom Error constructor và Error codes, mà ta có thể dể dàng truyền đến frontend hoặc API. Ta sẽ dùng Express.js framework làm routing. Thử nghĩ cấu trúc mà ta muốn bắt lỗi một cách hiệu quả nhất. Ta muốn:
Building custom Error constructorChúng ta sẽ sử Error constructor và mở rộng nó. Kế thừa là phương án khá mạo hiểm trong JavaScript, nhưng lần này thì nó rất hữu ích. Tại sao chúng ta cần nó? Bởi vì ta vẫn muốn stack
trace để debug hiệu quả hơn. Chúng ta chỉ cần thêm
Xử lý routingNhư đã nói, chúng ta muốn một Để giải quyết vấn đề này, ta có thể cài đặt một route handler và định nghĩa logic như function thông thường. Bằng cách đó, khi function routing throw error, nó sẽ được trả lại route handler, rồi truyền đến frontend. Mỗi khi có lỗi xảy ra ở backend, chúng ta muốn truyền response đến frontend, giả sử là JSON API theo format sau:
Route handler trông như này:
Hãy thử xem file routing sẽ trông như nào:
Ở đây tôi không xử lý gì với request, tôi chỉ thêm một số kịch bản lỗi. Về cơ bản là bạn sẽ có một lỗi chưa xử lý, frontend sẽ nhận được:
hoặc bạn sẽ throw một
sẽ trở thành
III. Hiển thị lỗi đến người dùngBước cuối cùng là quản lý lỗi ở phía frontend. Bạn muốn xử lý lỗi ở cả frontend cũng như backend. Đầu tiên hãy xem cách chúng ta hiển thị lỗi. Như đã nối thì tôi sẽ dùng React để minh họa. Lưu Errors trong React stateErrors và message có thể thay đổi, bởi vậy bạn cần đặt chúng trong component state. Mặc định thì error sẽ được reset để lần đầu tiên user view sẽ không thấy lỗi. Tiếp theo, ta cần phân biệt ra những kiểu Error khác nhau. Có 3 loại:
Global ErrorsThường thì tôi lưu những lỗi này ở component cha và render static UI.
Như bạn thấy, ta có error ở state. Chúng ta cũng có method để reset và thay đổi giá trị của error. Ta truyền giá trị và reset xuống component
Ở dòng 5, ta không render vì không có error. Giờ bạn có thể sử
dụng global error state bất cứ vị trí nào, chẳng hạn khi một request từ backend trả về với lỗi
Xử lý lỗi cụ thểTương tự global error, chúng ta có local error state trong component.
Error internationalisation với error codeCó thể bạn thắc mắc những error code
như Hy vọng rằng bạn đã có thể một cách nhìn mới về việc xử lý lỗi. Tham khảo: https://levelup.gitconnected.com/the-definite-guide-to-handling-errors-gracefully-in-javascript-58424d9c60e6 |