React Error Boundaries: Handle error hiệu quả trong react

Khi xây dựng các ứng dụng web phức tạp với React, việc xử lý lỗi là một phần quan trọng để đảm bảo ứng dụng của bạn không bị sập và user có thể tiếp tục trải nghiệm một cách mượt mà. Một trong những công cụ quan trọng mà React cung cấp cho việc này là Error Boundaries. Trong bài viết này, chúng ta sẽ tìm hiểu sâu về react-error-boundaries — một thư viện tiện lợi để triển khai Error Boundaries trong ứng dụng React

1. React Error Boundaries là gì?

Error Boundaries là một thành phần trong React được giới thiệu từ phiên bản React 16. Nó cho phép bạn bắt các lỗi xảy ra trong quá trình render, trong các lifecycle method, hoặc trong các constructor của component con. Khi một lỗi xảy ra, thay vì để ứng dụng bị sập, Error Boundary sẽ hiển thị một fallback UI và ngăn lỗi lan rộng ra toàn bộ ứng dụng.

Lưu ý quan trọng về Error Boundaries:

- Error Boundaries chỉ bắt lỗi xảy ra trong các component con, không bắt được lỗi trong chính nó.

- Không thể bắt được lỗi xảy ra trong event handlers hoặc các hoạt động bất đồng bộ như setTimeout.

2. Giới thiệu về react-error-boundaries

Thay vì tự tay viết các Error Boundaries, bạn có thể sử dụng thư viện react-error-boundaries. Thư viện này cung cấp các thành phần và hook để dễ dàng bắt và xử lý lỗi, đồng thời cho phép bạn tùy chỉnh fallback UI và quản lý các lỗi hiệu quả hơn.

Tính năng nổi bật:

- ErrorBoundary component: Đơn giản hóa việc tạo Error Boundaries.

- useErrorHandler hook: Cho phép bạn dễ dàng bắt và xử lý lỗi bên trong components.

- Tùy chỉnh fallback UI: Có thể chỉ định các component hoặc UI hiển thị khi lỗi xảy ra.

3. Cách sử dụng react-error-boundaries

Cài đặt thư viện

Để sử dụng react-error-boundaries, bạn cần cài đặt nó vào dự án của mình thông qua npm hoặc yarn:

npm install react-error-boundaries

Hoặc

yarn add react-error-boundaries

Sử dụng ErrorBoundary component

import { ErrorBoundary } from 'react-error-boundaries';

function FallbackComponent({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>BBMCode: Đã có lỗi xảy ra</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function MyComponent() {
  return (
    <ErrorBoundary
      FallbackComponent={FallbackComponent}
      onReset={() => {
        // reset the state of your app so the error doesn't happen again
      }}
    >
      <ComponentThatMayFail />
    </ErrorBoundary>
  );
}

Ngoài ra bạn cũng có thể xem thêm document của react-error-boundaries

Kết luận

react-error-boundaries là một thư viện hữu ích và dễ sử dụng để quản lý lỗi trong các ứng dụng React. Bạn không chỉ bảo vệ ứng dụng khỏi các lỗi không mong muốn mà còn cải thiện trải nghiệm user khi sự cố xảy ra. Hãy thử tích hợp thư viện này vào dự án của bạn để thấy sự khác biệt!