Error Boundary được xử lý thế nào trong React?

Trong React, Error Boundary là một cơ chế cho phép bạn bắt và xử lý các lỗi JavaScript trong các phần của cây component, ngăn chặn lỗi từ việc "lan" ra toàn bộ ứng dụng. Error Boundary được xử lý bằng cách sử dụng các class component đặc biệt có thể bắt các lỗi xảy ra trong quá trình render, trong các phương thức lifecycle, và trong các constructor của toàn bộ cây component dưới chúng.

Cách sử dụng Error Boundary

Để tạo một Error Boundary, bạn cần định nghĩa một class component và sử dụng ít nhất một trong hai phương thức lifecycle sau:

• static getDerivedStateFromError(error): Phương thức này được gọi khi một lỗi được ném ra từ một component con trong quá trình render. Nó trả về một đối tượng state mới dựa trên lỗi nhận được, cho phép bạn hiển thị một UI dự phòng.
• componentDidCatch(error, info): Phương thức này được gọi sau khi lỗi xảy ra. Nó cho phép bạn ghi log lỗi và thu thập thông tin về lỗi, như stack trace.

Ví dụ về Error Boundary

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để component tiếp theo có thể render UI d...