React中的ErrorBoundary

前言

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

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

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

import React from 'react'

type Props = {
  fallback: React.ReactNode
  children: 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)
  }
}

✅ 总结对比