Trung BìnhReact iconReact

Error boundary trong React. Cách implement, use case?

Error boundary là component đặc biệt dùng để bắt lỗi JavaScript trong cây component con, ngăn không cho toàn bộ ứng dụng bị crash trắng màn hình. Cách implement: tạo class component với method componentDidCatch và static getDerivedStateFromError, khi có lỗi sẽ hiển thị fallback UI thay vì crash.

Lưu ý error boundary không bắt được lỗi trong: event handler, code bất đồng bộ (setTimeout, Promise), server-side rendering, và lỗi của chính error boundary.

Use case phổ biến: bọc quanh từng section quan trọng của trang để khi một phần lỗi thì các phần khác vẫn hoạt động bình thường, kèm nút retry để người dùng thử lại.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React