面试题：React中错误边界如何捕获子组件的异常信息

Question

在React中，错误边界是用来捕获其子组件树中JavaScript错误的一种机制。请描述一下如何创建一个错误边界组件，以及它是如何捕获子组件抛出的异常信息的，并给出一个简单的代码示例。

Answer 1

创建错误边界组件

1. 类组件方式：
   • 错误边界必须是一个类组件，它需要继承 React.Component 或 React.PureComponent。
   • 实现 componentDidCatch 生命周期方法。这个方法接收两个参数：error（抛出的错误对象）和 errorInfo（包含有关错误发生位置的信息，例如组件堆栈跟踪）。
2. 使用 static getDerivedStateFromError 方法：该方法是一个静态方法，它在 componentDidCatch 之前被调用，用于在捕获错误后更新组件的状态。通常可以在这里设置一个标志，以便在 UI 中显示错误提示。

捕获子组件异常信息的原理

• 当错误边界组件的子组件树中任何位置抛出 JavaScript 错误时，错误边界会捕获到这个错误。
• componentDidCatch 会被调用，它可以记录错误信息，例如发送到日志服务器。同时，static getDerivedStateFromError 可以更新状态，从而让组件展示一个友好的错误界面。

代码示例

import React, { Component } from'react';

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

    componentDidCatch(error, errorInfo) {
        // 记录错误信息到日志服务器
        console.log('捕获到错误:', error, '错误信息:', errorInfo);
    }

    static getDerivedStateFromError(error) {
        // 更新状态，显示错误界面
        return { hasError: true };
    }

    render() {
        if (this.state.hasError) {
            // 错误界面
            return <div>发生错误，组件无法正常渲染。</div>;
        }
        return this.props.children;
    }
}

class ChildComponent extends Component {
    render() {
        throw new Error('模拟子组件错误');
        return <div>子组件内容</div>;
    }
}

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

export default App;