面试题：React错误边界在复杂路由场景下的高级应用

Question

在一个多层嵌套路由且带有路由参数的React应用里，有多个路由组件可能出现不同类型的错误。请设计一个通用的错误边界解决方案，使其能根据不同路由组件的错误类型，跳转到不同的错误处理页面，同时在控制台记录详细错误信息。阐述实现思路并给出核心代码示例。

Answer 1

实现思路

1. 创建一个自定义的错误边界组件，用于捕获子组件抛出的错误。
2. 在错误边界组件中，根据错误类型决定跳转到哪个错误处理页面。
3. 使用 react-router-dom 中的 history 对象进行页面跳转。
4. 在控制台记录详细的错误信息。

核心代码示例

1. 创建错误边界组件

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

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

    componentDidCatch(error, errorInfo) {
        this.setState({ hasError: true, errorType: error.name });
        console.log('Error caught in ErrorBoundary:', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            const { history } = this.props;
            const errorType = this.state.errorType;
            if (errorType === 'TypeError') {
                history.push('/type-error');
            } else if (errorType === 'ReferenceError') {
                history.push('/reference-error');
            } else {
                history.push('/general-error');
            }
            return null;
        }
        return this.props.children;
    }
}

export default withRouter(ErrorBoundary);

2. 在路由组件中使用错误边界组件

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import ErrorBoundary from './ErrorBoundary';
import Home from './Home';
import TypeErrorPage from './TypeErrorPage';
import ReferenceErrorPage from './ReferenceErrorPage';
import GeneralErrorPage from './GeneralErrorPage';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<ErrorBoundary><Home /></ErrorBoundary>} />
                <Route path="/type-error" element={<ErrorBoundary><TypeErrorPage /></ErrorBoundary>} />
                <Route path="/reference-error" element={<ErrorBoundary><ReferenceErrorPage /></ErrorBoundary>} />
                <Route path="/general-error" element={<ErrorBoundary><GeneralErrorPage /></ErrorBoundary>} />
            </Routes>
        </Router>
    );
}

export default App;

3. 示例错误处理页面

import React from'react';

const TypeErrorPage = () => {
    return (
        <div>
            <h1>Type Error Page</h1>
            <p>An error of type 'TypeError' occurred.</p>
        </div>
    );
};

export default TypeErrorPage;

import React from'react';

const ReferenceErrorPage = () => {
    return (
        <div>
            <h1>Reference Error Page</h1>
            <p>An error of type 'ReferenceError' occurred.</p>
        </div>
    );
};

export default ReferenceErrorPage;

import React from'react';

const GeneralErrorPage = () => {
    return (
        <div>
            <h1>General Error Page</h1>
            <p>An unexpected error occurred.</p>
        </div>
    );
};

export default GeneralErrorPage;