javascript如何实现错误边界_如何捕获组件错误

错误边界是React class组件特性，需实现getDerivedStateFromError和componentDidCatch方法来捕获子组件渲染错误并降级UI，无法捕获事件、异步或SSR错误。

JavaScript 本身无法直接实现 React 的“错误边界”（Error Boundary），因为错误边界是 React 框架层面的特性，依赖其内部的渲染机制和生命周期。但你可以在 React 应用中用 class 组件 实现错误边界，捕获其子组件树中 JavaScript 运行时错误，并防止整个应用崩溃。

什么是错误边界

错误边界是一个 React class 组件，它定义了以下任一（或两个）生命周期方法：

• static getDerivedStateFromError(error)：在渲染阶段出错后调用，用于更新 state（例如设置 `hasError: true`），触发降级 UI 渲染
• componentDidCatch(error, info)：在提交阶段被调用，适合记录错误日志（如上报 Sentry）、分析堆栈信息

如何写一个基础错误边界组件

下面是一个最小可用的错误边界示例：

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);
    // 可在此上报错误：trackError(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <p>⚠️ 页面加载失败，请刷新重试</p>;
    }
    return this.props.children;
  }
}

使用方式：

立即学习“Java免费学习笔记（深入）”；

<ErrorBoundary>
  <MyWidget />
  <AnotherComponent />
</ErrorBoundary>

错误边界能捕获什么

✅ 能捕获：

标签： react javascript java js 栈 ai 组件渲染