Error boundary là gì và nó bắt những gì?

Question

Accepted Answer

Một **error boundary** là một component bắt các lỗi JavaScript được ném ra **trong lúc render** ở cây con của nó, hiện một UI dự phòng thay vì crash cả app, và có thể log lỗi. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render dự phòng ở lần render kế } componentDidCatch(error, info) { logToService(error, info); // side effect: báo cáo nó } render() { return this.state.hasError ? : this.props.children; } } // bọc một phần độc lập để lỗi của nó không làm trắng cả trang: ``` ## Nó bắt gì — và không bắt gì ✅ Bắt: lỗi trong **render**, trong **phương thức vòng đời**, và trong constructor của các component bên dưới nó. ❌ **Không** bắt: - Lỗi trong **event handler** (dùng `try/catch` bình thường ở đó). - Code **bất đồng bộ** (promise, `setTimeout`) — chúng nằm ngoài luồng render. - Lỗi trong chính boundary, hoặc trong lúc **SSR**. ## Ghi chú thực tế - Error boundary hiện phải là **class component** (hoặc dùng thư viện `react-error-boundary` cho API thân thiện với hook). - Đặt nhiều boundary quanh các phần độc lập (widget, route) để một widget lỗi không hạ gục mọi thứ — một boundary cấp cao duy nhất biến bất kỳ lỗi nào thành một trang trắng hoàn toàn.