React的ErrorBoundary与错误恢复

当React应用的某个组件在渲染、生命周期方法或构造函数中抛出错误时，整个组件树都会被卸载，导致用户看到一个白屏。React 16引入的 错误边界 机制，专门用于捕获并处理这类错误，防止整个应用崩溃，并为用户提供一个优雅的降级UI。

第一阶段：理解问题与错误边界

在深入代码前，明确错误边界能捕获和不能捕获的场景至关重要。

错误边界可以捕获的错误：
- 清单渲染过程中发生的错误。
- 生命周期方法中的错误。
- 整个组件树的构造函数中的错误。
错误边界无法捕获的错误：
- 事件处理器（例如 onClick 回调）中的错误。对于事件处理器，应使用常规的 try...catch 语句。
- 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）。
- 服务端渲染。
- 错误边界组件自身抛出的错误。

核心思路：错误边界是一个 React类组件，它充当其子组件树的“边界”，捕获子组件中发生的JavaScript错误，记录这些错误，并显示一个备用的UI，而不是崩溃的组件树。

第二阶段：创建一个错误边界组件

错误边界组件的核心是两个特定的生命周期方法：static getDerivedStateFromError 和 componentDidCatch。

创建一个名为 ErrorBoundary 的类组件。
定义组件的 state，包含一个 hasError 布尔值（初始为 false）和一个 error 对象。

实现静态方法 getDerivedStateFromError(error)。此方法在后代组件抛出错误后被调用。它接收抛出的 error 作为参数，并返回一个对象来更新 state，从而触发下一次渲染以显示备用UI。

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true, error: error };
  }

  // 第四阶段将实现此方法
  // componentDidCatch(error, errorInfo) { ... }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级 UI
      return (
        <div>
          <h2>抱歉，出了点问题。</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {/* 错误堆栈信息将显示在这里 */}
          </details>
        </div>
      );
    }
    // 正常渲染子组件
    return this.props.children;
  }
}

export default ErrorBoundary;

第三阶段：使用错误边界

创建好错误边界后，你需要像使用普通组件一样，用它包裹你想要保护的应用部分。

定位应用中可能出错或承载关键UI的模块。
导入 ErrorBoundary 组件。

包裹目标组件。通常，你会为应用的不同功能模块（如侧边栏、内容区）设置不同的错误边界。

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';
import AnotherComponent from './AnotherComponent';

function App() {
  return (
    <div>
      <header>
        <h1>我的应用</h1>
      </header>
      <ErrorBoundary>
        <SomeComponent /> {/* 如果SomeComponent出错，将显示错误边界的备用UI */}
      </ErrorBoundary>
      <ErrorBoundary>
        <AnotherComponent /> {/* 另一个独立的错误边界 */}
      </ErrorBoundary>
    </div>
  );
}

export default App;

使用多个独立的 ErrorBoundary 可以确保一个组件的错误不会影响应用的其他部分。

第四阶段：错误恢复与日志记录

仅显示错误信息是不够的，我们还需要提供恢复途径并记录错误。

添加重置功能：在 ErrorBoundary 的 state 中增加一个 errorInfo 字段，并为“重试”按钮添加事件处理器，将 state 重置为初始状态。

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

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

  componentDidCatch(error, errorInfo) {
    // 可以将错误日志上报给服务器
    console.error("Uncaught error:", error, errorInfo);
    this.setState({
      errorInfo: errorInfo
    });
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '20px', border: '1px solid #ffcccc', borderRadius: '5px', backgroundColor: '#fff5f5' }}>
          <h2 style={{ color: '#cc0000' }}>组件发生错误</h2>
          <p><strong>错误信息：</strong> {this.state.error && this.state.error.toString()}</p>
          <details style={{ margin: '10px 0' }}>
            <summary>查看错误详情</summary>
            <pre style={{ fontSize: '12px', overflow: 'auto', maxHeight: '200px' }}>
              {this.state.errorInfo?.componentStack}
            </pre>
          </details>
          <button onClick={this.handleReset} style={{ padding: '8px 16px', cursor: 'pointer' }}>
            尝试重新加载组件
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

记录错误：componentDidCatch 方法接收两个参数：error（错误对象）和 errorInfo（一个包含 componentStack 属性的对象，该属性提供了错误发生的组件堆栈信息）。在此方法内，你可以将这些信息发送到你的错误监控服务（如 Sentry, Bugsnag）。
```
componentDidCatch(error, errorInfo) {
  // 将错误报告给日志服务
  logErrorToMyService(error, errorInfo.componentStack);
}
```
实现用户恢复：用户点击“重新加载组件”按钮时，handleReset 方法会将 state 重置。这不会重新加载导致错误的原始代码，而是让 ErrorBoundary 的 render 方法重新尝试渲染 this.props.children。如果子组件的错误是由于瞬时问题（如网络请求失败）引起的，这可能会成功。如果错误是确定性的（如代码bug），它很可能会再次触发，再次显示备用UI。

第五阶段：最佳实践与层级策略

粒度划分：
- 粗粒度：在应用顶层使用一个 ErrorBoundary，保护整个应用不崩溃。这是最基本的防线。
- 细粒度：为独立的、重要的UI区域（如一个小部件、一个表单、一个导航栏）分别设置 ErrorBoundary。这样，一个区域的错误不会影响其他区域。
备用UI的设计：
- 备用UI应清晰告知用户发生了错误。
- 提供“重试”按钮或联系支持的方式。
- 避免在备用UI中使用可能出错的复杂组件。
生产环境错误收集：务必在生产环境的 componentDidCatch 中将错误上报，仅靠 console.error 是不够的。

事件处理器错误：再次强调，错误边界不捕获事件处理器中的错误。对于这些错误，请在事件处理器内部使用 try...catch。

class MyComponent extends React.Component {
  handleClick = () => {
    try {
      // 可能出错的代码
    } catch (error) {
      // 在这里处理错误，例如更新组件状态以显示错误信息
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <p>点击处理出错：{this.state.error.message}</p>;
    }
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

通过合理地使用 ErrorBoundary 并结合上述策略，你可以构建出更具健壮性和用户体验的React应用，即使在子组件发生意外错误时也能保持应用的其余部分正常运行。

文章目录

React的ErrorBoundary与错误恢复

React的ErrorBoundary与错误恢复

第一阶段：理解问题与错误边界

第二阶段：创建一个错误边界组件

第三阶段：使用错误边界

第四阶段：错误恢复与日志记录

第五阶段：最佳实践与层级策略

评论 (0)

文章目录

React的ErrorBoundary与错误恢复

React的ErrorBoundary与错误恢复

第一阶段：理解问题与错误边界

第二阶段：创建一个错误边界组件

第三阶段：使用错误边界

第四阶段：错误恢复与日志记录

第五阶段：最佳实践与层级策略

评论 (0)

扫一扫，手机查看