React：错误边界的原理-Gojoh的充电站

在 React 中，错误边界（Error Boundary）是一种专门用于捕获其子组件树中 JavaScript 错误，防止这些错误导致整个应用崩溃的组件。

原理

错误边界组件可以通过类组件实现，包含以下两个生命周期方法：

static getDerivedStateFromError(error)：此方法在子组件抛出错误后触发，用于更新组件状态以显示降级 UI（即 fallback UI）。它接收错误对象作为参数，并返回一个用于更新状态的对象（例如 { hasError: true }）
componentDidCatch(error, errorInfo)：此方法在错误被捕获后触发，常用于记录错误信息。它接收错误对象和一个包含组件堆栈信息（errorInfo.componentStack）的对象作为参数，适合在此处将错误上报至监控服务

其工作流程如下：当子组件在渲染阶段（包括 render、生命周期方法或构造函数）发生错误时，错误会冒泡到最近的错误边界。

import React from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error('错误被捕获:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <h1>页面出现错误。</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

第三方库

react-error-boundary

目录CONTENT

React：错误边界的原理

原理

第三方库

评论区