面试题：React中错误边界组件的基本创建方式

创建基本的错误边界组件

类组件写法：
- 错误边界是一个React组件，它可以捕获在其子组件树的任何位置抛出的JavaScript错误，并记录这些错误，同时展示备用UI，而不是崩溃整个应用。
- 一个错误边界组件需要继承React.Component，并实现componentDidCatch生命周期方法。
- 示例代码如下：

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;
    }
}

函数式组件写法（React 18+）：
- 从React 18开始，可以使用useErrorBoundary钩子来创建错误边界。
- 示例代码如下：

import {useErrorBoundary} from'react';

function MyErrorBoundary({children}) {
    const [error, errorInfo, resetErrorBoundary] = useErrorBoundary((error, errorInfo) => {
        // 记录错误，可发送到日志服务器等
        console.log('捕获到错误:', error, '错误信息:', errorInfo);
    });
    if (error) {
        // 返回备用UI
        return <div>发生了错误，当前组件无法正常渲染。</div>;
    }
    return children;
}

错误边界能够捕获的错误类型

渲染期间的错误：
- 例如在组件的render方法中抛出的错误。
- 示例：

class ErrorProneComponent extends React.Component {
    render() {
        throw new Error('渲染时出错');
        return <div>这行代码不会执行。</div>;
    }
}

上述组件在渲染时抛出错误，其父组件如果是错误边界组件，就可以捕获该错误。

生命周期方法中的错误：
- 如componentDidMount、componentDidUpdate等生命周期方法中抛出的错误。
- 示例：

class ErrorProneComponent extends React.Component {
    componentDidMount() {
        throw new Error('生命周期方法中出错');
    }
    render() {
        return <div>组件渲染。</div>;
    }
}

此组件在componentDidMount生命周期方法中抛出错误，若它被包裹在错误边界组件内，错误边界组件能够捕获该错误。

构造函数中的错误：
- 在组件的构造函数constructor中抛出的错误也能被捕获。
- 示例：

class ErrorProneComponent extends React.Component {
    constructor(props) {
        super(props);
        throw new Error('构造函数中出错');
    }
    render() {
        return <div>这行代码不会执行。</div>;
    }
}

同样，若该组件被错误边界组件包裹，错误将被捕获。

注意：错误边界无法捕获以下类型的错误：

事件处理函数中的错误：事件处理函数运行在React的事件系统之外，所以错误边界无法捕获。例如在onClick等事件处理函数中抛出的错误。
异步代码中的错误：如setTimeout、Promise等异步操作中抛出的错误，错误边界不能捕获。
自身抛出的错误：错误边界组件自身的render、生命周期方法或构造函数中抛出的错误，它自己无法捕获。

星途面试题库

面试题：React中错误边界组件的基本创建方式

知识考点

面试题答案

创建基本的错误边界组件

错误边界能够捕获的错误类型