React中的ErrorBoundary

---

前言

在 React 中，ErrorBoundary（错误边界）用于捕获子组件在 渲染期间、生命周期方法中 或 构造函数中 发生的错误，防止整个应用崩溃。

React 目前官方只支持使用 类组件 实现 ErrorBoundary，但你也可以使用 第三方库 或自定义 Hook 来用函数组件实现类似功能。

---

✅ 一、使用类组件实现 ErrorBoundary（官方推荐方式）

import React from 'react'type Props = {fallback: React.ReactNodechildren: React.ReactNode
}type State = {hasError: boolean
}class ErrorBoundary extends React.Component<Props, State> {state: State = { hasError: false }static getDerivedStateFromError(_: Error): State {return { hasError: true }}componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {console.error('Error caught by ErrorBoundary:', error, errorInfo)}render() {if (this.state.hasError) {return this.props.fallback}return this.props.children}
}export default ErrorBoundary

用法示例：

<ErrorBoundary fallback={<h2>Something went wrong.</h2>}><MyComponent />
</ErrorBoundary>

---

✅ 二、用函数组件实现 ErrorBoundary（借助 Hook + react-error-boundary 库）

React 本身不支持函数组件方式的 Error Boundary（因为没有生命周期 componentDidCatch），但我们可以借助 第三方库。

1. 安装 react-error-boundary

npm install react-error-boundary

2. 使用 ErrorBoundary 组件（函数方式）

import { ErrorBoundary } from 'react-error-boundary'function ErrorFallback({ error }: { error: Error }) {return (<div role="alert"><p>Something went wrong:</p><pre>{error.message}</pre></div>)
}function App() {return (<ErrorBoundary FallbackComponent={ErrorFallback}><DangerousComponent /></ErrorBoundary>)
}

---

✅ 三、手写 Hook 模拟捕获运行时异常（局限性较大）

只能用于捕获异步或事件中的异常，不能替代 ErrorBoundary 对渲染错误的捕获能力：

function useSafeExecute(callback: () => void) {try {callback()} catch (e) {console.error('Caught error in hook:', e)}
}

---

✅ 总结对比

方法	支持渲染错误	类型	是否推荐
类组件 ErrorBoundary	✅	官方支持	✅ 推荐
函数组件 + react-error-boundary	✅	第三方支持	✅ 推荐
自己写 hook try/catch 包装	❌	非正式	⚠️ 仅限逻辑错误

---