7

Tăng sự tự tin cho ứng dụng React với Error Boundaries

Health React ApplicationHealth React Application

Một trong những nhược điểm lớn của React đó là khi quá trình render bị lỗi, hoặc xảy ra lỗi tại một node nào đó trong quá trình hoạt động, thì toàn bộ ứng dụng của bạn sẽ bị crash.

Giả sử mình có nguyên một trang render ra gần 1000 node, tất cả các node đều làm việc mượt mà ngon lành, uỳnh một phát tự nhiên có một node chết vì bạn handle thiếu, api trả về data rỗng. 

Bạn đoán xem điều gì sẽ xảy ra, toàn bộ ứng dụng của bạn sẽ crash và chẳng còn gì ngoài một trang trắng bóc, nếu bạn bật console lên sẽ thấy thêm một đống error được quăng ra.

react application crashingreact application crashing

Giả sử ứng dụng của mình handle tốt đến đâu đi chăng nữa, làm sao mình chắc chắn được 100% là sẽ không bao giờ xảy ra lỗi trong tương lai ?. Mình sẽ không trả lời câu hỏi này của bạn, mà React 16 sẽ trả lời câu hỏi này với khái niệm Error Boundaries.

Giới thiệu Error Boundaries

Error Boundaries là những React component được bọc ở ngoài để hứng lỗi của những component con.

Khi bất kì lỗi xảy ra tại component <Home /> đều được component <ErrorBound/> hứng lại. Vì vậy thay vì render ra trang trắng và quăng ra UnCatch error, thì lúc <ErrorBound/> sẽ catch lại lỗi, báo lỗi tại console và render ra một component thay thế.

<ErrorBound/>  component:

Hàm getDerivedStateFromError() update lại state khi có lỗi, để trigger re-render ra một element | component thay thế.

Hàm componentDidCatch() để catch lại error và log ra console để trace bugs từ error stack.

catch error boundariescatch error boundaries

Tại sao chúng ta không try/catch React component

Thay vì phải viết một component để catch error thì chỉ cần wrap lại với try/catch:

Khi một component được tạo ra, bạn bắt buộc phải return về một element | component | null, điều này là bắt buộc, nếu bạn không return về thì React sẽ quăng lỗi ngay lập tức.  

Mình viết lại chỗ này như sau:

try/catch componenttry/catch component

Lỗi vẫn được catch và vẫn render được component thay thế, tuy nhiên bạn không biết được thông tin chi tiết về lỗi, component xảy ra lỗi. Nhưng với những component được wrap lại với <ErrorBound/> thì khác:

catch react error with ErrorBoundariescatch react error with ErrorBoundaries

Error Boundaries hoạt động tương tự như try/catch nhưng khác là Error Boundaries chỉ sử dụng cho React component.

Nâng cấp Error Boundaries

React đã cung cấp một component xịn xò như vậy rồi, việc còn lại là chúng ta sử dụng sao cho hiệu quả. Thay vì render ra dòng text "something when wrong" nhàm chán, chúng ta có thể chỉnh sửa bằng một tấm ảnh.

error boundaries custom rendererror boundaries custom render

Wrap <ErrorBound/> tại component con cấp nhỏ nhất, ngăn ngừa lỗi xảy ra tại những node này. Hoặc có thể dynamic render component thay thế khi component chính bị lỗi.

dynamic render error propsdynamic render error props

Custom lại hàm componentDidCatch() để có thể quan sát hệ thống tốt hơn, phản ứng nhanh khi server bị lỗi, không phải lúc nào cũng nơm nớp lo sợ bị bugs chết app mà mình không biết.

better monitor react errorbetter monitor react error

Kết luận

Việc quan sát hệ thống có ý nghĩa rất quan trọng với ứng dụng, chúng ta phải quan sát mới biết được lỗi để fix, chỗ nào cần chậm để improve, tính năng nào không xài để remove ra... 

Mặc dù wrap ứng dụng React với Error Boundaries sẽ không giúp ứng dụng của bạn ít bugs đi, nhưng mà việc sử dụng nó để có những hành động render thay thế, thông báo cho người dùng, không để cho ứng dụng crash thường xuyên là việc quan trọng, thể hiện sự tôn trọng của bạn với user khi sử dụng ứng dụng.

#react#web#javascript
7
0
...