面试题：React错误边界如何捕获子组件错误

错误边界捕获子组件错误的原理

在React中，错误边界是一种特殊的React组件，它可以捕获并处理其子组件树中任何位置抛出的JavaScript错误，同时记录这些错误。错误边界并不会捕获以下场景的错误：

事件处理函数中的错误（例如onClick等）。这些错误应该在事件处理函数内部自行处理。
异步代码（例如setTimeout或async/await）中的错误。
服务端渲染期间抛出的错误。
它自身抛出的错误（而非子组件）。

当子组件树中的某个组件抛出错误时，React会沿着组件树向上查找，直到找到最近的错误边界组件，然后将错误传递给该错误边界组件进行处理。

错误边界的生命周期函数

componentDidCatch(error, errorInfo)：
- 当子组件树中抛出错误时，会调用此函数。
- error参数是实际抛出的错误对象。
- errorInfo包含有关错误发生位置的信息，例如组件堆栈跟踪等。在此函数中，可以执行错误日志记录操作，向服务器发送错误报告等。同时，也可以返回一个备用UI，以替代发生错误的子组件树部分，防止整个应用崩溃。例如：

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

    componentDidCatch(error, errorInfo) {
        // 记录错误
        console.log('Error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            // 返回备用UI
            return <div>Something went wrong.</div>;
        }
        return this.props.children;
    }
}

getDerivedStateFromError(error)：
- 此函数在componentDidCatch之前调用，当子组件树抛出错误时触发。
- error参数为实际抛出的错误对象。它应该返回一个状态对象，用于更新错误边界组件的状态，以便在UI上显示适当的错误提示。例如：

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

    getDerivedStateFromError(error) {
        // 更新状态以显示错误提示
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 记录错误
        console.log('Error caught:', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // 返回备用UI
            return <div>An error occurred.</div>;
        }
        return this.props.children;
    }
}

面试题：React错误边界如何捕获子组件错误

知识考点

面试题答案

错误边界捕获子组件错误的原理

错误边界的生命周期函数