Dev001- Error Boundary , FallbackUI

[dev000000]

1. Lý do sử dụng Error Boundary

Tránh crash toàn bộ ứng dụng: Khi một component bị lỗi trong quá trình render, React sẽ unmount toàn bộ cây UI bên dưới nó → khiến cả app bị trắng (blank screen).

Cách ly lỗi: Error Boundary giúp “bao” một phần UI, nếu lỗi xảy ra thì chỉ phần đó hiển thị fallback UI, còn các phần khác vẫn chạy bình thường.

Cải thiện trải nghiệm người dùng: Người dùng sẽ thấy một giao diện thay thế (ví dụ: “Đã xảy ra lỗi, vui lòng thử lại”), thay vì màn hình trắng.

Ghi log / báo cáo lỗi: Có thể kết hợp Error Boundary với logging service (Sentry, LogRocket, …) để thu thập lỗi ở production.

2. Concept của Error Boundary

Là một React component (chỉ có thể viết bằng Class Component hoặc dùng thư viện như react-error-boundary).

Dùng lifecycle method đặc biệt:

static getDerivedStateFromError(error) → cập nhật state để hiển thị fallback UI.

componentDidCatch(error, info) → log error.

Khi một component con throw error trong render, lifecycle hoặc constructor, Error Boundary sẽ chặn và hiển thị fallback UI.

3. Những loại lỗi xảy ra trong ứng dụng React

Render errors: lỗi trong JSX hoặc khi truy cập biến undefined.

Lifecycle errors: lỗi trong componentDidMount, componentDidUpdate.

Event handler errors: thường được quản lý trong hàm xử lý sự kiện.

Async errors: lỗi khi gọi API (fetch, axios) hoặc setTimeout.

Server-side rendering errors: khi render trên server với Next.js / Remix.

4. Error Boundary bắt được

✅ Các lỗi synchronous trong rendering, lifecycle methods, và constructor của component con.
Ví dụ:

function BuggyComponent() {
throw new Error("Render failed!");
return

Hi

;
}

→ Error Boundary sẽ catch.

5. Error Boundary không bắt được

❌ Các loại lỗi sau sẽ không được bắt:

Event handlers (onClick, onChange, …): phải tự try/catch trong hàm.

Asynchronous errors (setTimeout, Promise, fetch API).

Server-side rendering (SSR) errors.

Errors trong chính Error Boundary (fallback UI lỗi).

=> Đối với những error mà ErrorBoundary ko bắt được (error trong chính Error Boundary , fallback UI , async, event handlers ) => try-catch tự bắt những lỗi đó , hoặc sử dụng library react-error-boundary : Forward lỗi từ event handler (cũng thông qua useErrorHandler)

• Đối với phiên bản "react-router-dom": "^6.23.1": Hỗ trợ Default Error Boundary, bọc quanh Route , mỗi khi lỗi xảy ra trong trang (được định nghĩa trong route) , error boundary này sẽ catch trước khi đi ra ngoài (ErrorBoundary bên ngoài ko tới lượt ) ,
• Hơn thế nữa , react-route-dom hỗ trợ errorElement để custom fallbackUI cho từng route ...
  Example: