Error Boundary và thư viện react-error-boundary giải quyết gì? Vì sao hook (try/catch trong component) không bắt được lỗi render?

Error Boundary là class component bắt lỗi trong lúc render của cây con, hiển thị fallback UI thay vì sập cả app (React unmount toàn bộ tree nếu lỗi không được bắt). Nó bắt qua static getDerivedStateFromError (cập nhật state để render fallback) và componentDidCatch (log).

Vì sao hook không bắt được lỗi render: try/catch chỉ bắt code chạy đồng bộ trong phạm vi của nó. Quá trình render do React điều phối, không nằm trong try/catch của bạn; React phải tự phát hiện lỗi rồi bubble lên boundary gần nhất. Hiện chưa có hook API tương đương — cơ chế này chỉ tồn tại ở class lifecycle, nên Error Boundary phải là class.

react-error-boundary (bvaughn) bọc lại bằng API tiện cho hooks-era:
- <ErrorBoundary FallbackComponent={...} onReset={...}> với nút "thử lại".
- useErrorBoundary() để ném thủ công lỗi async (event handler, promise) vào boundary — vì những lỗi này boundary không tự bắt.

Error Boundary KHÔNG bắt: lỗi trong event handler, code async (setTimeout, fetch), SSR, và lỗi ném từ chính boundary đó. Những case này tự try/catch hoặc dùng showBoundary() để chuyển vào boundary.