Cách hoạt động của Error Boundaries trong React

Nếu đã làm việc với React một thời gian, bạn có thể đã gặp thông báo có nội dung “Xem xét thêm ranh giới lỗi vào cây của bạn để tùy chỉnh hành vi xử lý lỗi”. Bạn có thể đã thấy điều này trong bảng điều khiển trình duyệt của mình bất cứ khi nào các thành phần của bạn gặp sự cố.

React khuyến nghị sử dụng ranh giới lỗi để cung cấp trải nghiệm người dùng tốt hơn khi xảy ra lỗi.

Lớp ranh giới lỗi trong React là gì?

Các ranh giới lỗi hoạt động giống như khối thử/bắt trong vanilla JavaScript. Sự khác biệt là chúng bắt lỗi xảy ra trong các thành phần React. Nếu xảy ra lỗi trong một thành phần giao diện người dùng, React sẽ ngắt kết nối cây bên trong thành phần đó và thay thế nó bằng giao diện người dùng dự phòng mà bạn đã xác định. Điều này có nghĩa là một lỗi chỉ ảnh hưởng đến thành phần mà nó xảy ra và phần còn lại của ứng dụng hoạt động như mong đợi.

Theo tài liệu React, các lớp ranh giới lỗi không bắt lỗi trong:

• Trình xử lý sự kiện.
• Mã không đồng bộ.
• Mã phía máy chủ.
• Các lỗi được ném vào chính ranh giới lỗi (chứ không phải con của nó).

Đối với các lỗi trên, bạn có thể sử dụng khối try/catch.

Ví dụ: để bắt lỗi xảy ra trong trình xử lý sự kiện, hãy sử dụng đoạn mã sau:

 function EventComponent() {
    const [error, setError] = useState(null)
    const handleClick = () => {
        try {
            
        } catch (error) {
            setError(error)
        }
    }
    return (
        <>
            <div>{error?error: ""}</div>
            <button onClick={handleClick}>Button</button>
        </>
    )
}
 

Chỉ sử dụng ranh giới lỗi để bắt lỗi trong các thành phần React.

Tạo một lớp ranh giới lỗi

Bạn có thể tạo một ranh giới lỗi bằng cách định nghĩa một lớp chứa một hoặc cả hai phương thức sau:

• getDerivedStateFromError() tĩnh
• thành phầnDidCatch()

Hàm getDerivedStateFromError() cập nhật trạng thái thành phần sau khi phát hiện lỗi trong khi bạn có thể sử dụng componentDidCatch() để ghi thông tin lỗi vào bảng điều khiển. Bạn cũng có thể gửi lỗi đến dịch vụ báo cáo lỗi.

Dưới đây là một ví dụ cho thấy cách tạo một lớp ranh giới lỗi đơn giản.

 class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: false };
    }
    static getDerivedStateFromError(error) {
        
        return { error: error };
    }
    componentDidCatch(error, errorInfo) {
        
    }
    render() {
        if (this.state.error) {
            
            return <h1>There seems to be a problem.</h1>;
        }
      
       return this.props.children; 
    }
}
export default ErrorBoundary;
 

Khi xảy ra lỗi, getDerivedStateFromError() sẽ cập nhật trạng thái và do đó kích hoạt kết xuất lại sẽ hiển thị giao diện người dùng dự phòng.

Nếu bạn không muốn tạo lớp ranh giới lỗi từ đầu, hãy sử dụng gói NPM ranh giới lỗi phản ứng. Gói này cung cấp thành phần ErrorBoundary bao quanh các thành phần mà bạn cho rằng có thể gây ra lỗi.

Sử dụng lớp ranh giới lỗi

Để xử lý lỗi, hãy bọc các thành phần bằng thành phần lớp ranh giới lỗi. Bạn có thể bọc thành phần cấp cao nhất hoặc các thành phần riêng lẻ.

Nếu bạn bọc thành phần cấp cao nhất, lớp ranh giới lỗi sẽ xử lý các lỗi do tất cả các thành phần trong ứng dụng React đưa ra.

 <ErrorBoundary>
<App/>
</ErrorBoundary>
 

Nếu bạn bọc một thành phần riêng lẻ bằng ErrorBoundary, lỗi trong thành phần đó sẽ không ảnh hưởng đến cách thành phần khác hiển thị.

 <ErrorBoundary>
<Profile/>
</ErrorBoundary>
 

Ví dụ: một lỗi trong thành phần hồ sơ sẽ không ảnh hưởng đến cách một thành phần khác như thành phần Hero hiển thị. Trong khi thành phần cấu hình có thể bị lỗi, phần còn lại của ứng dụng sẽ hoạt động tốt. Điều này tốt hơn nhiều so với việc hiển thị màn hình dự phòng màu trắng chung do React cung cấp.

Xử lý lỗi trong JavaScript

Lỗi lập trình có thể gây khó chịu cho nhà phát triển và người dùng. Việc không xử lý lỗi có thể khiến người dùng của bạn gặp phải giao diện người dùng xấu với các thông báo lỗi khó hiểu.

Khi xây dựng thành phần React của bạn, hãy tạo một lớp ranh giới lỗi từ đầu hoặc sử dụng gói ranh giới lỗi phản ứng để hiển thị các thông báo lỗi thân thiện với người dùng.