面试题：React中如何使用Error Boundaries处理Hooks的错误

创建Error Boundaries组件捕获React Hooks错误

类组件方式创建Error Boundaries：
- 在React中，Error Boundaries是一个类组件，它可以捕获其子组件树中渲染、生命周期方法和构造函数中的错误。
- 示例代码如下：

import React, { Component } from'react';

class ErrorBoundary extends 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) {
            // 当捕获到错误时，返回一个友好的错误提示
            return <div>Something went wrong.</div>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

使用方法：
- 在你的React应用中，将可能出错的组件包裹在ErrorBoundary组件内。例如，假设你有一个使用React Hooks的组件MyHookComponent：

import React, { useState } from'react';
import ErrorBoundary from './ErrorBoundary';

const MyHookComponent = () => {
    const [count, setCount] = useState(0);
    // 模拟一个可能出错的操作，例如除以0
    const result = 1 / (count === 0? 0 : 1);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <p>Result: {result}</p>
        </div>
    );
};

const App = () => {
    return (
        <ErrorBoundary>
            <MyHookComponent />
        </ErrorBoundary>
    );
};

export default App;

Error Boundaries能捕获的错误类型

渲染错误：在组件渲染过程中抛出的错误，例如在render方法中执行的代码出现错误，像上述MyHookComponent中1 / (count === 0? 0 : 1)可能抛出的Division by zero错误。
生命周期错误：在组件的生命周期方法（如componentDidMount、componentDidUpdate等）中抛出的错误。
构造函数错误：在类组件的构造函数中抛出的错误。

Error Boundaries不能捕获的错误类型

事件处理函数中的错误：例如在onClick、onChange等事件处理函数中抛出的错误。因为事件处理函数运行在React的事件系统之外，所以Error Boundaries无法捕获。示例：

const MyComponent = () => {
    const handleClick = () => {
        throw new Error('Error in click handler');
    };
    return <button onClick={handleClick}>Click me</button>;
};

异步代码中的错误：比如在setTimeout、Promise的回调函数中抛出的错误。例如：

const MyComponent = () => {
    React.useEffect(() => {
        setTimeout(() => {
            throw new Error('Error in setTimeout');
        }, 1000);
    }, []);
    return <div>Component with async error</div>;
};

React自身内部的错误：例如React核心代码出现的错误，这并不是应用层面通过Error Boundaries能捕获的。
在Error Boundary自身的render、生命周期方法或构造函数中的错误：Error Boundaries无法捕获自身的这些错误，因为它不能自己“保护”自己。

星途面试题库

面试题：React中如何使用Error Boundaries处理Hooks的错误

知识考点

面试题答案

创建Error Boundaries组件捕获React Hooks错误

Error Boundaries能捕获的错误类型

Error Boundaries不能捕获的错误类型