面试题：React错误处理在复杂组件树中的实践

思路

使用Error Boundaries：Error Boundaries 是 React 组件，它可以捕获其子组件树中任何位置抛出的 JavaScript 错误，并记录这些错误，同时展示一个备用 UI，而不是渲染崩溃的子组件树。
在合适的层级放置Error Boundaries：由于是多层嵌套组件，需要在可能发生错误的子组件的最近父层级放置 Error Boundaries。这样既能捕获到错误，又不会影响其他无关组件。
错误处理逻辑：在 Error Boundaries 组件内定义 componentDidCatch 生命周期方法，在此方法中可以记录错误日志，同时返回备用 UI。

代码示例

创建 Error Boundary 组件

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

    componentDidCatch(error, errorInfo) {
        // 记录错误日志，可使用例如 Sentry 等工具
        console.log('Error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            // 返回备用 UI
            return <div>An error occurred.</div>;
        }
        return this.props.children;
    }
}

在组件树中使用 Error Boundary 假设在 ChildComponent 中进行异步操作可能抛出错误。

function ChildComponent() {
    const [data, setData] = React.useState(null);
    React.useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch('your-api-url');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                setData(result);
            } catch (error) {
                throw error;
            }
        }
        fetchData();
    }, []);

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

function ParentComponent() {
    return (
        <ErrorBoundary>
            <ChildComponent />
        </ErrorBoundary>
    );
}

function App() {
    return (
        <div>
            <ParentComponent />
        </div>
    );
}

通过上述方式，在多层嵌套的 React 组件树中，能够有效捕获子组件异步操作抛出的错误，并进行相应处理，同时不影响其他无关组件正常运行。

星途面试题库

面试题：React错误处理在复杂组件树中的实践

知识考点

面试题答案

思路

代码示例