面试题：React错误边界在生命周期中的应用

Question

在React组件的生命周期方法中，哪些阶段抛出的错误能够被错误边界捕获？如果在`componentDidUpdate`中由于数据更新导致了一个错误，错误边界如何处理这种情况？

Answer 1

能够被错误边界捕获错误的阶段

1. 渲染阶段：包括 render 方法以及在 render 中调用的函数。例如，在 render 方法中有对某个对象属性的访问，但该对象可能为 null，这种情况下抛出的错误可以被错误边界捕获。
2. 生命周期方法：如 componentDidMount、componentDidUpdate 等生命周期函数内抛出的错误也能被捕获。

componentDidUpdate 中错误的处理

1. 错误边界的处理方式：当在 componentDidUpdate 中由于数据更新导致错误时，错误边界的 componentDidCatch 方法会被触发。在 componentDidCatch 方法中，可以进行错误日志记录，以便开发者定位问题。同时，可以返回一个备用 UI，避免整个应用崩溃。例如：

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        // 记录错误日志
        console.log('Error in componentDidUpdate:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            // 返回备用 UI
            return <div>Something went wrong.</div>;
        }
        return this.props.children;
    }
}

然后将需要捕获错误的组件包裹在 ErrorBoundary 组件内：

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

这样，当 MyComponent 的 componentDidUpdate 出现错误时，就能被 ErrorBoundary 捕获并处理。