面试题：React错误边界处理异步错误的策略

1. 使用错误边界捕获异步操作错误

1.1 创建错误边界组件

在React中，错误边界是一种特殊的组件，它可以捕获其下方子组件树中任何位置抛出的JavaScript错误，并渲染一个备用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;
    }
}

1.2 包裹异步操作组件

假设我们有一个组件AsyncComponent进行异步数据获取：

class AsyncComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: null };
    }

    componentDidMount() {
        fetch('your-api-url')
          .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
          .then(data => this.setState({ data }))
          .catch(error => {
                // 这里不处理错误，让错误冒泡到错误边界
                throw error;
            });
    }

    render() {
        if (!this.state.data) {
            return <div>Loading...</div>;
        }
        return <div>{JSON.stringify(this.state.data)}</div>;
    }
}

然后在应用中使用错误边界包裹AsyncComponent：

function App() {
    return (
        <ErrorBoundary>
            <AsyncComponent />
        </ErrorBoundary>
    );
}

2. 实际应用中的挑战及解决方法

2.1 挑战：无法捕获异步操作的所有错误

2.1.1 原因

在async/await代码块内部，如果没有显式处理错误并抛出，错误可能不会被错误边界捕获。例如：

class AnotherAsyncComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: null };
    }

    async componentDidMount() {
        try {
            const response = await fetch('your-api-url');
            const data = await response.json();
            this.setState({ data });
        } catch (error) {
            // 这里捕获了错误，错误不会冒泡到错误边界
        }
    }

    render() {
        if (!this.state.data) {
            return <div>Loading...</div>;
        }
        return <div>{JSON.stringify(this.state.data)}</div>;
    }
}

2.1.2 解决方法

在async/await代码块中，要么不捕获错误，让其冒泡到错误边界，要么捕获后重新抛出：

class AnotherAsyncComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: null };
    }

    async componentDidMount() {
        try {
            const response = await fetch('your-api-url');
            const data = await response.json();
            this.setState({ data });
        } catch (error) {
            // 重新抛出错误
            throw error;
        }
    }

    render() {
        if (!this.state.data) {
            return <div>Loading...</div>;
        }
        return <div>{JSON.stringify(this.state.data)}</div>;
    }
}

2.2 挑战：错误边界的层级问题

2.2.1 原因

如果错误边界嵌套层级过深，可能导致难以定位和处理错误。例如，一个父组件有多个子组件，每个子组件又有自己的错误边界，当错误发生时，很难确定哪个错误边界应该处理该错误。

2.2.2 解决方法

保持错误边界的层级尽量简单。在整个应用中，可以在应用的顶层设置一个全局的错误边界，捕获所有未处理的错误。对于特定功能模块，可以在模块的根组件设置错误边界。同时，通过良好的日志记录（如在componentDidCatch中记录错误信息）来帮助定位错误。

2.3 挑战：错误边界无法捕获异步任务队列中的错误

2.3.1 原因

React的错误边界只能捕获在渲染、生命周期方法和构造函数中抛出的错误。像setTimeout、Promise的then回调等异步任务队列中的错误不会被错误边界捕获。例如：

class TimerComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        setTimeout(() => {
            throw new Error('Error in setTimeout');
        }, 1000);
    }

    render() {
        return <div>Timer Component</div>;
    }
}

2.3.2 解决方法

对于setTimeout等，可以手动包裹在try - catch块中，并通过其他方式（如自定义事件、状态管理等）通知应用进行错误处理。对于Promise，确保在then链的末尾添加.catch处理，或者使用async/await并在try - catch块中处理。例如：

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

    componentDidMount() {
        setTimeout(() => {
            try {
                // 模拟异步操作
                throw new Error('Error in setTimeout');
            } catch (error) {
                this.setState({ hasError: true });
            }
        }, 1000);
    }

    render() {
        if (this.state.hasError) {
            return <div>Something went wrong in setTimeout!</div>;
        }
        return <div>Timer Component</div>;
    }
}