Khoanh vùng lỗi với React Error Boundary & Next.js error.tsx

Ngăn ngừa White Screen of Death (WSOD), bắt Unhandled Render Errors và khôi phục giao diện mượt mà với reset().

Core Mental Model

Error Boundary đóng vai trò như cầu chì bảo vệ điện: khi 1 bóng đèn (component con) bị chập cháy, cầu chì ngắt điện khoanh vùng tại chỗ mà KHÔNG làm sập điện toàn bộ tòa nhà.

Key Takeaways & Principles

Tại sao cần Error Boundary: Nếu không có Error Boundary, 1 lỗi JavaScript nhỏ khi render ở component con sẽ khiến React gỡ toàn bộ cây DOM, biến toàn bộ trang web thành màn hình trắng (White Screen of Death).

React Class Component Error Boundary: Bắt buộc dùng Class Component với static getDerivedStateFromError(error) và componentDidCatch(error, info) (hoặc thư viện react-error-boundary).

Next.js App Router `error.tsx`: tạo error boundary cho route segment. Component nhận `{ error, reset }`; `reset()` thử render lại segment và không bảo đảm lỗi nguồn đã được xử lý.

Phạm vi BẮT ĐƯỢC lỗi: Lỗi xảy ra trong khi Render, Lỗi trong Lifecycle methods, Lỗi trong Constructors của cây component con.

Phạm vi KHÔNG BẮT ĐƯỢC lỗi: Lỗi trong Event Handlers (onClick - dùng try/catch), Lỗi trong mã Asynchronous (setTimeout, requestAnimationFrame), Lỗi phía Server (Server Actions).

React Component Architecture & Forms

advanced

18 phút

#React Error Boundary

#Next.js

#error.tsx