17370845950

错误边界是React中用于捕获子组件树JavaScript错误并渲染降级UI的类组件，通过static getDerivedStateFromError和componentDidCatch实现，不捕获事件处理、异步代码、服务端渲染及自身错误。

错误边界（Error Boundary）是 React 中一种特殊的组件，用于捕获其子组件树中 JavaScript 运行时错误，防止整个应用崩溃，并提供降级 UI。它不能捕获事件处理函数、异步代码（如 setTimeout 或 Promise）、服务端渲染中的错误，也不能捕获自身抛出的错误。

错误边界的工作原理

错误边界通过两个生命周期方法实现：

• static getDerivedStateFromError(error)：在渲染阶段被调用，用于更新 state，触发备用 UI 渲染（如显示“加载失败”提示）
• componentDidCatch(error, info)：在提交阶段被调用，适合记录错误日志（如上报到 Sentry 或自建监控平台）

如何定义一个错误边界组件

必须是类组件（React 18+ 仍不支持函数组件原生作为错误边界），且需包含上述至少一个方法：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("捕获到错误:", error, info.componentStack);
    // 可发送错误日志到监控系统
  }

  render() {
    if (this.state.hasError) {
      return 哎呀，出错了，请刷新重试;
    }
    return this.props.children;
  }
}

使用时包裹可能出错的子组件：

优雅处理运行时错误的补充方式

错误边界覆盖不到的场景，需配合其他机制：

• Promise 错误统一捕获：全局监听 unhandledrejection 事件，避免未处理 Promise 拒绝静默失败
• 全局异常监听：用 window.addEventListener('error', handler) 捕获未被捕获的同步错误（注意它不会捕获 Promise 错误）
• 异步操作显式 try/catch：在 async 函数或 setTimeout 回调中主动包裹逻辑
• React 18+ 的 Suspense + Error Boundaries：结合 处理 loading 和 error 状态，提升用户体验

注意事项与常见误区

错误边界不是万能的，实际使用中要注意：

• 只对**子组件树**生效，无法捕获自己、父组件或兄弟组件的错误
• 开发模式下，即使捕获了错误，React 仍会在控制台打印警告（便于调试）
• 服务端渲染（SSR）时，componentDidCatch 不会执行，只能依赖 getDerivedStateFromError 做状态降级
• 不要滥用——为每个小组件都套一层错误边界，应按功能模块或路由层级合理包裹