目录
- 安装
- 使用方式
- 常用 Props
- 使用场景
react-error-boundary 是一个由 Brian Vaughn 开发的 React 组件库，用于更方便地处理组件树中的错误（错误边界）。
阅读参考：
- React Error Boundaries
- react-error-boundary
安装
npm install react-error-boundary
# 或者
yarn add react-error-boundary
使用方式
import { ErrorBoundary } from 'react-error-boundary';function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {return (<div role="alert"><p>出了点问题:</p><pre>{error.message}</pre><button onClick={resetErrorBoundary}>重试</button></div>);
}function BuggyComponent() {throw new Error('这就是个错误');
}function App() {return (<ErrorBoundaryFallbackComponent={ErrorFallback}onReset={() => {// 可在这里重置 state 或做其它操作}}><BuggyComponent /></ErrorBoundary>);
}
常用 Props
| Prop | 说明 |
|---|---|
FallbackComponent | 当发生错误时渲染的备用组件 |
onReset | 当调用 resetErrorBoundary 时触发 |
onError | 当捕获错误时触发的回调函数 |
resetKeys | 类似 useEffect 的依赖项，当其改变时自动重置错误边界 |
使用场景
- 某个组件偶尔报错不影响整体页面时
- 第三方组件有潜在崩溃风险时
- 想让用户点击“重试”而不刷新整个页面时
