面试题：React错误边界在组件树中的捕获范围

Question

请描述React错误边界能够捕获哪些组件内抛出的错误，哪些组件内的错误它无法捕获？

Answer 1

能够捕获的错误

1. 渲染过程中的错误：在组件的 render 方法及其调用的子组件 render 方法中抛出的错误。例如：

class MyComponent extends React.Component {
    render() {
        throw new Error('Render error');
        return <div>Content</div>;
    }
}

2. 生命周期函数内的错误：包括 componentDidMount、componentDidUpdate 和 shouldComponentUpdate 等生命周期函数内抛出的错误。例如：

class MyComponent extends React.Component {
    componentDidMount() {
        throw new Error('ComponentDidMount error');
    }
    render() {
        return <div>Content</div>;
    }
}

3. 构造函数内的错误：如果在类组件的 constructor 中抛出错误，错误边界也能捕获。例如：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        throw new Error('Constructor error');
    }
    render() {
        return <div>Content</div>;
    }
}

无法捕获的错误

1. 事件处理函数内的错误：React 事件处理函数（如 onClick、onChange 等）中的错误不会被错误边界捕获。例如：

class MyComponent extends React.Component {
    handleClick = () => {
        throw new Error('Click event error');
    };
    render() {
        return <button onClick={this.handleClick}>Click me</button>;
    }
}

2. 异步代码中的错误：例如在 setTimeout、Promise 等异步操作中抛出的错误，错误边界无法捕获。例如：

class MyComponent extends React.Component {
    componentDidMount() {
        setTimeout(() => {
            throw new Error('Timeout error');
        }, 1000);
    }
    render() {
        return <div>Content</div>;
    }
}

3. 错误边界自身抛出的错误：如果错误边界组件自身在 render、生命周期函数等地方抛出错误，它无法捕获自身的这些错误。例如：

class ErrorBoundary extends React.Component {
    componentDidMount() {
        throw new Error('Error in ErrorBoundary');
    }
    componentDidCatch(error, errorInfo) {
        // 这里无法捕获上面抛出的错误
        console.log('Caught error:', error, errorInfo);
    }
    render() {
        return this.props.children;
    }
}