Error Boundaries: Xử lý lỗi trong React

Trong quá trình phát triển ứng dụng React, việc xuất hiện lỗi trong thành phần là điều không thể tránh khỏi. Để ứng dụng không bị "sập" hoàn toàn khi xảy ra lỗi, React cung cấp một cơ chế gọi là Error Boundaries (Ranh giới lỗi). Error Boundaries giúp bạn xử lý lỗi một cách có tổ chức và hiển thị giao diện dự phòng thay vì để ứng dụng ngừng hoạt động.

1. Error Boundaries là gì?

Error Boundaries là các thành phần React có khả năng bắt các lỗi JavaScript xảy ra trong vòng đời của các thành phần con, bao gồm:

• Render (kết xuất)
• Lifecycle methods (các phương thức vòng đời)
• Constructor của các thành phần con

Error Boundaries không bắt các lỗi:

• Trong các sự kiện (event handlers).
• Trong các phần tử không thuộc cây DOM con của nó.

2. Cách sử dụng Error Boundaries

Error Boundaries thường được triển khai bằng cách sử dụng các phương thức vòng đời đặc biệt là:

• static getDerivedStateFromError(error): Cập nhật state để hiển thị giao diện dự phòng khi lỗi xảy ra.
• componentDidCatch(error, info): Ghi lại thông tin về lỗi (như log lỗi).

Ví dụ:

import React, { Component } from "react";
	
class ErrorBoundary extends Component {
	  constructor(props) {
	    super(props);
	    this.state = { hasError: false };
	  }
	
	  static getDerivedStateFromError(error) {
	    // Cập nhật state để hiển thị giao diện dự phòng
	    return { hasError: true };
	  }
	
	  componentDidCatch(error, info) {
	    // Log lỗi hoặc gửi thông tin lỗi đến server
	    console.error("Error caught in Error Boundary:", error, info);
	  }
	
	  render() {
	    if (this.state.hasError) {
	      // Giao diện dự phòng khi có lỗi
	      return <h1>Đã xảy ra lỗi. Vui lòng thử lại sau.</h1>;
	    }
	
	    return this.props.children;
	  }
}
	
export default ErrorBoundary;

3. Cách triển khai trong ứng dụng

Khi bạn đã tạo một Error Boundary, bạn có thể bọc bất kỳ thành phần nào bằng Error Boundary để bảo vệ chúng:

import ErrorBoundary from "./ErrorBoundary";
import SomeComponent from "./SomeComponent";
	
function App() {
	  return (
	    <ErrorBoundary>
	      <SomeComponent />
	    </ErrorBoundary>
	  );
}

4. Error Boundaries và sự kiện (Event Handlers)

Error Boundaries không bắt lỗi xảy ra trong các sự kiện. Bạn cần sử dụng các khối try-catch để xử lý lỗi trong sự kiện:

function handleClick() {
	  try {
	    // Code có thể gây lỗi
	    throw new Error("Something went wrong");
	  } catch (error) {
	    console.error(error);
	  }
}

5. Khi nào nên sử dụng Error Boundaries?

Bạn nên sử dụng Error Boundaries ở các cấp độ sau:

• Bọc xung quanh toàn bộ ứng dụng để ngăn ứng dụng "sập".
• Bọc xung quanh các thành phần quan trọng hoặc dễ gây lỗi như:
  • Thành phần hiển thị đồ họa phức tạp.
  • Thành phần bên thứ ba.

6. Hạn chế của Error Boundaries

• Không thể bắt lỗi trong các sự kiện bất đồng bộ (như setTimeout, Promise).
• Không hoạt động đối với các lỗi ngoài React (như lỗi liên quan đến DOM trực tiếp).

7. Kết luận

Error Boundaries là một công cụ mạnh mẽ trong React để xử lý lỗi một cách an toàn và thân thiện. Việc triển khai Error Boundaries không chỉ giúp cải thiện trải nghiệm người dùng mà còn hỗ trợ nhà phát triển trong việc theo dõi và khắc phục lỗi một cách hiệu quả.

Hãy luôn sử dụng Error Boundaries trong các ứng dụng React phức tạp để đảm bảo ứng dụng của bạn luôn hoạt động ổn định!