面试题：React错误边界在生产环境中如何捕获子组件错误

错误边界捕获错误原理

在React生产环境中，错误边界通过componentDidCatch生命周期方法来捕获其子组件渲染、生命周期方法以及构造函数中抛出的错误。错误边界是一种React组件，这种组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且会渲染出备用UI，而不是渲染那些崩溃了的子组件树。

代码示例

以下是一个基本的错误边界组件示例：

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>发生错误，组件无法正常渲染。</div>;
    }
    return this.props.children;
  }
}

使用方式如下：

function BrokenComponent() {
  throw new Error('模拟错误');
  return <div>这是一个永远不会渲染的组件</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <BrokenComponent />
    </ErrorBoundary>
  );
}

在上述代码中，ErrorBoundary组件包裹了BrokenComponent组件，当BrokenComponent组件在渲染、生命周期方法或构造函数中抛出错误时，ErrorBoundary组件的componentDidCatch方法会捕获到错误，并更新状态，从而渲染备用UI。

星途面试题库

面试题：React错误边界在生产环境中如何捕获子组件错误

知识考点

面试题答案

错误边界捕获错误原理

代码示例