MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 错误边界基础与应用场景

2023-09-011.2k 阅读

React 错误边界基础

在 React 应用程序中，错误处理是一个至关重要的环节。传统的 JavaScript 错误处理机制，如 try...catch，在 React 组件的环境中并不完全适用。React 引入了错误边界（Error Boundaries）这一概念，用于捕获子组件树中的 JavaScript 错误，并提供一种优雅的方式来处理这些错误，避免整个应用程序崩溃。

错误边界的定义

错误边界是一种 React 组件，这种组件可以捕获并处理其子组件树中抛出的 JavaScript 错误，记录这些错误，并且展示一个备用 UI，而不是渲染那些崩溃的子组件树。错误边界仅能捕获其子组件树中的错误，对于自身组件内部的错误、事件处理函数中的错误、异步代码（如 setTimeout 或 fetch）中的错误以及服务端渲染期间抛出的错误，错误边界无法捕获。

创建错误边界

要创建一个错误边界，我们需要定义一个类组件，并在其中实现 componentDidCatch 生命周期方法。这个方法接收两个参数：error，即抛出的错误对象；errorInfo，一个包含有关错误发生位置信息的对象，如文件名、行号等。

以下是一个简单的错误边界组件示例：

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

  componentDidCatch(error, errorInfo) {
    // 记录错误信息，例如发送到日志服务器
    console.log('捕获到错误:', error, '错误位置:', errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 返回备用 UI
      return (
        <div>
          <h1>发生错误，部分功能可能无法正常使用。</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

在上述代码中，ErrorBoundary 组件通过 componentDidCatch 捕获错误，将 hasError 状态设置为 true，并在 render 方法中根据 hasError 状态决定是渲染备用 UI 还是正常的子组件。

错误边界的应用场景

防止应用崩溃

在大型 React 应用中，某个子组件出现错误不应导致整个应用崩溃。例如，一个电商应用中商品列表展示组件可能由于数据格式问题抛出错误，如果没有错误边界，整个页面可能无法正常显示。通过在商品列表组件外层包裹错误边界组件，即使商品列表组件出错，应用的其他部分，如导航栏、购物车等仍能正常工作。

// 假设这是商品列表组件，可能会抛出错误
class ProductList extends React.Component {
  render() {
    // 模拟可能的错误，例如数据格式错误
    const data = this.props.data;
    if (!Array.isArray(data)) {
      throw new Error('数据格式错误，商品列表数据必须是数组');
    }
    return (
      <ul>
        {data.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    );
  }
}

// 使用错误边界包裹商品列表组件
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productData: null // 模拟初始数据为空
    };
    setTimeout(() => {
      this.setState({
        productData: [
          { id: 1, name: '商品 1' },
          { id: 2, name: '商品 2' }
        ]
      });
    }, 3000);
  }
  render() {
    return (
      <div>
        <ErrorBoundary>
          <ProductList data={this.state.productData} />
        </ErrorBoundary>
      </div>
    );
  }
}

在上述代码中，ProductList 组件在数据格式不正确时会抛出错误。通过 ErrorBoundary 包裹，在数据未正确加载（productData 为 null）时，ProductList 抛出错误，ErrorBoundary 捕获错误并展示备用 UI，而不是让整个应用崩溃。

错误监控与上报

错误边界不仅可以防止应用崩溃，还可以用于错误监控与上报。在 componentDidCatch 方法中，我们可以将捕获到的错误信息发送到日志服务器，以便开发团队及时了解应用中出现的问题。

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

  componentDidCatch(error, errorInfo) {
    // 发送错误信息到日志服务器
    const errorReport = {
      errorMessage: error.message,
      errorStack: error.stack,
      errorLocation: errorInfo.componentStack
    };
    fetch('/api/logError', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(errorReport)
    });
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>发生错误，部分功能可能无法正常使用。</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

在上述代码中，componentDidCatch 方法中构造了错误报告对象 errorReport，包含错误信息、错误堆栈以及错误发生的组件堆栈信息，并通过 fetch 将其发送到 /api/logError 接口，实现错误的上报。

区分不同类型错误并处理

有时候，我们可能需要根据错误类型来提供不同的备用 UI 或处理逻辑。例如，网络请求错误可能提示用户检查网络连接，而数据格式错误可能提示用户联系管理员。

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

  componentDidCatch(error, errorInfo) {
    let errorType;
    if (error.message.includes('Network')) {
      errorType = 'network';
    } else if (error.message.includes('Data format')) {
      errorType = 'dataFormat';
    }
    this.setState({ hasError: true, errorType });
  }

  render() {
    if (this.state.hasError) {
      if (this.state.errorType === 'network') {
        return (
          <div>
            <h1>网络错误，请检查网络连接。</h1>
          </div>
        );
      } else if (this.state.errorType === 'dataFormat') {
        return (
          <div>
            <h1>数据格式错误，请联系管理员。</h1>
          </div>
        );
      }
      return (
        <div>
          <h1>发生错误，部分功能可能无法正常使用。</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

在上述代码中，componentDidCatch 方法根据错误信息判断错误类型，并在 render 方法中根据不同的错误类型展示不同的备用 UI。

处理组件更新时的错误

React 错误边界不仅可以捕获渲染过程中的错误，还能捕获组件更新过程中的错误。例如，在组件的 componentDidUpdate 生命周期方法中抛出的错误也能被错误边界捕获。

class UpdateErrorComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.count > 5) {
      throw new Error('更新计数超过 5');
    }
  }

  handleClick = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
        <button onClick={this.handleClick}>增加计数</button>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <UpdateErrorComponent />
      </ErrorBoundary>
    );
  }
}

在上述代码中，UpdateErrorComponent 在 componentDidUpdate 中当 count 超过 5 时抛出错误，ErrorBoundary 可以捕获这个错误并展示备用 UI，确保应用在组件更新出错时不会崩溃。

错误边界的嵌套与优先级

在实际应用中，可能会存在多个错误边界嵌套的情况。当错误发生时，React 会按照组件树的层级顺序，从最近的错误边界开始查找。也就是说，离错误发生组件最近的错误边界具有最高优先级来捕获和处理错误。

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

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>外层错误边界捕获到错误</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

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

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>内层错误边界捕获到错误</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

class ErrorComponent extends React.Component {
  render() {
    throw new Error('测试错误');
  }
}

class App extends React.Component {
  render() {
    return (
      <OuterErrorBoundary>
        <InnerErrorBoundary>
          <ErrorComponent />
        </InnerErrorBoundary>
      </OuterErrorBoundary>
    );
  }
}

在上述代码中，ErrorComponent 抛出错误。由于 InnerErrorBoundary 离 ErrorComponent 更近，所以 InnerErrorBoundary 会捕获并处理这个错误，展示 “内层错误边界捕获到错误” 的备用 UI。如果没有 InnerErrorBoundary，则 OuterErrorBoundary 会捕获并处理该错误。

错误边界与 React 16 之前版本的错误处理对比

在 React 16 引入错误边界之前，处理组件错误相对困难。传统的 try...catch 无法捕获组件渲染、生命周期方法以及构造函数中的错误。如果组件树中某个组件抛出错误，整个应用可能会崩溃，导致用户体验极差。

例如，在 React 15 及之前版本，如果一个组件在 render 方法中抛出错误：

class ErrorComponent extends React.Component {
  render() {
    throw new Error('测试错误');
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <ErrorComponent />
      </div>
    );
  }
}

这个错误会导致整个应用崩溃，没有办法优雅地处理错误并展示备用 UI。而 React 16 引入的错误边界为我们提供了一种统一且有效的方式来处理这些错误，提高了应用的健壮性和用户体验。

错误边界的局限性

虽然错误边界在处理 React 组件错误方面提供了很大的便利，但它也有一些局限性。

无法捕获的错误类型

如前文所述，错误边界无法捕获自身组件内部的错误、事件处理函数中的错误、异步代码（如 setTimeout 或 fetch）中的错误以及服务端渲染期间抛出的错误。

对于自身组件内部的错误，例如错误边界组件自身的 render 方法抛出错误，这个错误无法被自身的 componentDidCatch 捕获，因为错误边界在设计上是用于捕获子组件树的错误。

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

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
  }

  render() {
    throw new Error('自身组件错误');
    return this.props.children;
  }
}

在上述代码中，SelfErrorBoundary 组件自身 render 方法抛出的错误无法被其 componentDidCatch 捕获，会导致应用崩溃。

对于事件处理函数中的错误，例如：

class EventErrorComponent extends React.Component {
  handleClick = () => {
    throw new Error('点击事件错误');
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击</button>
    );
  }
}

即使 EventErrorComponent 被错误边界包裹，点击事件中抛出的错误也不会被错误边界捕获。因为事件处理函数的执行环境与组件渲染和生命周期方法不同，React 将其视为独立的执行上下文，错误需要在事件处理函数内部通过传统的 try...catch 来处理。

class EventErrorComponent extends React.Component {
  handleClick = () => {
    try {
      throw new Error('点击事件错误');
    } catch (error) {
      console.log('捕获到点击事件错误:', error);
    }
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击</button>
    );
  }
}

对于异步代码中的错误，如 setTimeout：

class AsyncErrorComponent extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      throw new Error('异步错误');
    }, 1000);
  }

  render() {
    return <div>异步错误组件</div>;
  }
}

这个异步错误不会被错误边界捕获，因为 setTimeout 的回调函数在一个新的执行栈中执行，与组件渲染和生命周期方法的执行栈不同。处理这类错误需要在异步回调函数内部使用 try...catch 或者使用 async/await 结合 try...catch 来捕获错误。

class AsyncErrorComponent extends React.Component {
  componentDidMount() {
    setTimeout(async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        throw new Error('异步错误');
      } catch (error) {
        console.log('捕获到异步错误:', error);
      }
    }, 1000);
  }

  render() {
    return <div>异步错误组件</div>;
  }
}

错误边界的重新渲染

当错误边界捕获到错误并展示备用 UI 后，如果后续状态或属性发生变化导致错误边界重新渲染，可能会出现一些问题。例如，如果错误边界依赖于外部状态，而这个状态在错误发生后被更新，错误边界可能会重新尝试渲染子组件，可能再次触发错误。

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

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>发生错误，部分功能可能无法正常使用。</h1>
        </div>
      );
    }
    return this.props.children;
  }
}

class ErrorProneComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    setTimeout(() => {
      this.setState({ data: 'error - prone data' });
    }, 3000);
  }

  render() {
    if (!this.state.data) {
      throw new Error('数据未加载');
    }
    return <div>{this.state.data}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { shouldRender: true };
  }

  handleToggle = () => {
    this.setState(prevState => ({ shouldRender:!prevState.shouldRender }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>切换渲染</button>
        {this.state.shouldRender && (
          <ErrorBoundary>
            <ErrorProneComponent />
          </ErrorBoundary>
        )}
      </div>
    );
  }
}

在上述代码中，ErrorProneComponent 初始数据未加载时会抛出错误，ErrorBoundary 捕获并展示备用 UI。当用户点击按钮切换 shouldRender 状态时，ErrorBoundary 重新渲染并再次尝试渲染 ErrorProneComponent，可能又会触发错误。在实际应用中，需要谨慎处理错误边界重新渲染的情况，确保不会导致无限循环错误或其他意外行为。

总结

React 错误边界为前端开发人员提供了一种强大的工具，用于处理 React 组件树中的错误，防止应用崩溃，提升用户体验，并实现错误监控与上报。了解错误边界的基础概念、应用场景以及局限性，能够帮助开发者在构建 React 应用时更好地处理错误情况，打造更加健壮和可靠的应用程序。在实际开发中，合理运用错误边界，结合传统的错误处理机制，如 try...catch，可以有效地应对各种可能出现的错误场景，为用户提供流畅的使用体验。同时，随着 React 技术的不断发展，错误处理机制也可能会进一步优化和完善，开发者需要持续关注并学习新的特性和最佳实践，以保持代码的高质量和应用的稳定性。