Phân Loại Lỗi trong React Error Boundary: Hướng Dẫn Toàn Diện

Xử lý lỗi là một khía cạnh quan trọng của việc xây dựng các ứng dụng React mạnh mẽ và dễ bảo trì. Mặc dù Error Boundary của React cung cấp một cơ chế để xử lý các lỗi xảy ra trong quá trình render một cách mượt mà, việc hiểu cách phân loại và phản ứng với các loại lỗi khác nhau là rất quan trọng để tạo ra một ứng dụng thực sự có khả năng phục hồi. Hướng dẫn này khám phá các cách tiếp cận khác nhau để phân loại lỗi trong Error Boundary, cung cấp các ví dụ thực tế và thông tin chi tiết hữu ích để cải thiện chiến lược quản lý lỗi của bạn.

React Error Boundary là gì?

Được giới thiệu trong React 16, Error Boundary là các component React giúp bắt lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị một UI dự phòng thay vì làm sập toàn bộ cây component. Chúng hoạt động tương tự như một khối try...catch, nhưng dành cho các component.

Các đặc điểm chính của Error Boundary:

• Xử lý lỗi ở cấp Component: Cô lập lỗi trong các cây component con cụ thể.
• Thoái hóa mượt mà (Graceful Degradation): Ngăn chặn toàn bộ ứng dụng bị sập do lỗi của một component duy nhất.
• UI dự phòng có kiểm soát: Hiển thị một thông báo thân thiện với người dùng hoặc nội dung thay thế khi có lỗi xảy ra.
• Ghi lại lỗi (Error Logging): Hỗ trợ theo dõi và gỡ lỗi bằng cách ghi lại thông tin lỗi.

Tại sao cần Phân loại Lỗi trong Error Boundary?

Chỉ bắt lỗi thôi là chưa đủ. Xử lý lỗi hiệu quả đòi hỏi phải hiểu điều gì đã xảy ra và phản ứng một cách tương ứng. Phân loại lỗi trong Error Boundary mang lại một số lợi ích:

• Xử lý lỗi có mục tiêu: Các loại lỗi khác nhau có thể yêu cầu các phản ứng khác nhau. Ví dụ, lỗi mạng có thể cần một cơ chế thử lại, trong khi lỗi xác thực dữ liệu có thể yêu cầu người dùng sửa lại thông tin đầu vào.
• Cải thiện trải nghiệm người dùng: Hiển thị các thông báo lỗi nhiều thông tin hơn dựa trên loại lỗi. Một thông báo chung chung như "Đã có lỗi xảy ra" sẽ kém hữu ích hơn một thông báo cụ thể chỉ ra sự cố mạng hoặc đầu vào không hợp lệ.
• Tăng cường gỡ lỗi: Phân loại lỗi cung cấp ngữ cảnh có giá trị để gỡ lỗi và xác định nguyên nhân gốc rễ của sự cố.
• Giám sát chủ động: Theo dõi tần suất của các loại lỗi khác nhau để xác định các vấn đề lặp đi lặp lại và ưu tiên sửa chữa.
• UI dự phòng chiến lược: Hiển thị các UI dự phòng khác nhau tùy thuộc vào lỗi, cung cấp thông tin hoặc hành động phù hợp hơn cho người dùng.

Các phương pháp Phân loại Lỗi

Có một số kỹ thuật có thể được sử dụng để phân loại lỗi trong React Error Boundary:

1. Sử dụng instanceof

Toán tử instanceof kiểm tra xem một đối tượng có phải là một thể hiện của một lớp cụ thể hay không. Điều này hữu ích để phân loại lỗi dựa trên các loại lỗi tích hợp sẵn hoặc tùy chỉnh.

Ví dụ:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
      let errorMessage = "Đã có lỗi xảy ra.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Đã xảy ra lỗi mạng. Vui lòng kiểm tra kết nối và thử lại.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Đã có lỗi xác thực. Vui lòng xem lại dữ liệu bạn đã nhập.";
      }

      return (
        <div>
          <h2>Lỗi!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Giải thích:

• Các lớp tùy chỉnh NetworkError và ValidationError được định nghĩa, kế thừa từ lớp Error tích hợp sẵn.
• Trong phương thức render của component MyErrorBoundary, toán tử instanceof được sử dụng để kiểm tra loại lỗi đã bắt được.
• Dựa trên loại lỗi, một thông báo lỗi cụ thể được hiển thị trong UI dự phòng.

2. Sử dụng Mã lỗi hoặc Thuộc tính của Lỗi

Một cách tiếp cận khác là bao gồm mã lỗi hoặc các thuộc tính trong chính đối tượng lỗi. Điều này cho phép phân loại chi tiết hơn dựa trên các kịch bản lỗi cụ thể.

Ví dụ:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Yêu cầu mạng thất bại");
          error.code = response.status; // Thêm một mã lỗi tùy chỉnh
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Đã có lỗi xảy ra.";
      if (this.state.error.code === 404) {
        errorMessage = "Không tìm thấy tài nguyên.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Lỗi máy chủ. Vui lòng thử lại sau.";
      }

      return (
        <div>
          <h2>Lỗi!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Giải thích:

• Hàm fetchData thêm một thuộc tính code vào đối tượng lỗi, đại diện cho mã trạng thái HTTP.
• Component MyErrorBoundary kiểm tra thuộc tính code để xác định kịch bản lỗi cụ thể.
• Các thông báo lỗi khác nhau được hiển thị dựa trên mã lỗi.

3. Sử dụng một Bản đồ Lỗi tập trung

Đối với các ứng dụng phức tạp, việc duy trì một bản đồ lỗi tập trung có thể cải thiện việc tổ chức và bảo trì mã nguồn. Điều này bao gồm việc tạo ra một từ điển hoặc đối tượng ánh xạ các loại lỗi hoặc mã lỗi tới các thông báo lỗi và logic xử lý cụ thể.

Ví dụ:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Đã xảy ra lỗi mạng. Vui lòng kiểm tra kết nối của bạn.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Dữ liệu không hợp lệ. Vui lòng xem lại dữ liệu của bạn.",
    retry: false,
  },
  404: {
    message: "Không tìm thấy tài nguyên.",
    retry: false,
  },
  500: {
    message: "Lỗi máy chủ. Vui lòng thử lại sau.",
    retry: true,
  },
  "DEFAULT": {
    message: "Đã có lỗi xảy ra.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Lỗi!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Giải thích:

• Đối tượng errorMap lưu trữ thông tin lỗi, bao gồm thông báo và cờ thử lại, dựa trên loại hoặc mã lỗi.
• Hàm handleCustomError truy xuất chi tiết lỗi từ errorMap dựa trên thông báo lỗi và trả về giá trị mặc định nếu không tìm thấy mã cụ thể.
• Component MyErrorBoundary sử dụng handleCustomError để lấy thông báo lỗi thích hợp từ errorMap.

Các Thực hành Tốt nhất để Phân loại Lỗi

• Định nghĩa các loại lỗi rõ ràng: Thiết lập một bộ mã hoặc loại lỗi nhất quán cho ứng dụng của bạn.
• Cung cấp thông tin theo ngữ cảnh: Bao gồm các chi tiết liên quan trong đối tượng lỗi để hỗ trợ việc gỡ lỗi.
• Tập trung hóa logic xử lý lỗi: Sử dụng một bản đồ lỗi tập trung hoặc các hàm tiện ích để quản lý việc xử lý lỗi một cách nhất quán.
• Ghi lại lỗi hiệu quả: Tích hợp với các dịch vụ báo cáo lỗi để theo dõi và phân tích lỗi trong môi trường production. Các dịch vụ phổ biến bao gồm Sentry, Rollbar và Bugsnag.
• Kiểm tra việc xử lý lỗi: Viết unit test để xác minh rằng Error Boundary của bạn xử lý đúng các loại lỗi khác nhau.
• Quan tâm đến trải nghiệm người dùng: Hiển thị các thông báo lỗi thân thiện, giàu thông tin và hướng dẫn người dùng cách giải quyết. Tránh sử dụng thuật ngữ kỹ thuật.
• Theo dõi tỷ lệ lỗi: Theo dõi tần suất của các loại lỗi khác nhau để xác định các vấn đề lặp đi lặp lại và ưu tiên sửa chữa.
• Quốc tế hóa (i18n): Khi trình bày thông báo lỗi cho người dùng, hãy đảm bảo rằng thông báo của bạn được quốc tế hóa đúng cách để hỗ trợ các ngôn ngữ và văn hóa khác nhau. Sử dụng các thư viện như i18next hoặc Context API của React để quản lý các bản dịch.
• Khả năng tiếp cận (a11y): Đảm bảo rằng các thông báo lỗi của bạn có thể tiếp cận được bởi người dùng khuyết tật. Sử dụng các thuộc tính ARIA để cung cấp thêm ngữ cảnh cho các trình đọc màn hình.
• Bảo mật: Cẩn thận với những thông tin bạn hiển thị trong thông báo lỗi, đặc biệt là trong môi trường production. Tránh tiết lộ dữ liệu nhạy cảm có thể bị kẻ tấn công khai thác. Ví dụ, không hiển thị stack trace thô cho người dùng cuối.

Kịch bản ví dụ: Xử lý lỗi API trong ứng dụng Thương mại điện tử

Hãy xem xét một ứng dụng thương mại điện tử truy xuất thông tin sản phẩm từ một API. Các kịch bản lỗi có thể xảy ra bao gồm:

• Lỗi mạng: Máy chủ API không khả dụng hoặc kết nối internet của người dùng bị gián đoạn.
• Lỗi xác thực: Token xác thực của người dùng không hợp lệ hoặc đã hết hạn.
• Lỗi không tìm thấy tài nguyên: Sản phẩm được yêu cầu không tồn tại.
• Lỗi máy chủ: Máy chủ API gặp lỗi nội bộ.

Sử dụng Error Boundary và phân loại lỗi, ứng dụng có thể xử lý các kịch bản này một cách mượt mà:

// Ví dụ (Đơn giản hóa)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Sử dụng errorMap như đã trình bày trước đó
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Lỗi!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Thử lại</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Giải thích:

• Hàm fetchProduct kiểm tra mã trạng thái phản hồi của API và ném ra các loại lỗi cụ thể dựa trên trạng thái đó.
• Component ProductErrorBoundary bắt các lỗi này và hiển thị các thông báo lỗi thích hợp.
• Đối với lỗi mạng và lỗi máy chủ, một nút "Thử lại" được hiển thị, cho phép người dùng thử lại yêu cầu.
• Đối với lỗi xác thực, người dùng có thể được chuyển hướng đến trang đăng nhập.
• Đối với lỗi không tìm thấy tài nguyên, một thông báo cho biết sản phẩm không tồn tại sẽ được hiển thị.

Kết luận

Phân loại lỗi trong React Error Boundary là điều cần thiết để xây dựng các ứng dụng có khả năng phục hồi và thân thiện với người dùng. Bằng cách sử dụng các kỹ thuật như kiểm tra instanceof, mã lỗi và bản đồ lỗi tập trung, bạn có thể xử lý hiệu quả các kịch bản lỗi khác nhau và cung cấp trải nghiệm người dùng tốt hơn. Hãy nhớ tuân thủ các thực hành tốt nhất về xử lý lỗi, ghi lại log và kiểm thử để đảm bảo rằng ứng dụng của bạn xử lý các tình huống bất ngờ một cách mượt mà.

Bằng cách triển khai các chiến lược này, bạn có thể cải thiện đáng kể sự ổn định và khả năng bảo trì của các ứng dụng React của mình, mang lại trải nghiệm mượt mà và đáng tin cậy hơn cho người dùng, bất kể vị trí hay nền tảng của họ.

Tài liệu tham khảo thêm:

• Tài liệu về React Error Boundary
• Hướng dẫn về React 16 Error Boundary của Sentry
• Bài hướng dẫn về React Error Boundary của Robin Wieruch