React Error Boundary 如何捕获组件错误？

Question

仓乃文 · Accepted Answer

React 组件渲染期间抛出错误会导致整个应用白屏。Error Boundary 是类组件，捕获子组件树的渲染错误，显示降级 UI 而不是崩溃。函数组件需要使用 react-error-boundary 库。类组件写法： ```javascript class ErrorBoundary extends React.Component { state = { hasError: false, error: null }; static getDerivedStateFromError(error) { return { hasError: true, error }; // 渲染阶段的错误 } componentDidCatch(error, info) { logErrorToService(error, info.componentStack); // 副作用：上报错误 } render() { if (this.state.hasError) { return this.props.fallback ||

出错了

; } return this.props.children; } } ``` react-error-boundary 库（推荐，函数组件友好）： ```javascript import { ErrorBoundary } from "react-error-boundary"; function ErrorFallback({ error, resetErrorBoundary }) { return (

出错了：{error.message}

); } function App() { return ( {}}> ); } ``` 补充说明： - Error Boundary 只捕获渲染期间和生命周期中的错误，不捕获事件处理中的错误 - 事件处理中的错误用 try/catch 捕获 - 错误边界无法捕获异步代码（setTimeout、fetch）中的错误 - 建议在关键组件外层包裹 Error Boundary，避免局部错误导致整棵树崩溃 - react-error-boundary 提供了 withErrorBoundary HOC 和 useErrorBoundary Hook