面试题：React错误边界在路由动态加载及异常处理的专家级应用

实现原理

错误边界概念：错误边界是一种React组件，它可以捕获在其子组件树任何位置抛出的JavaScript错误，并记录这些错误，同时展示备用UI，而不是渲染崩溃的组件树。
动态加载与错误边界结合：在路由动态加载场景下，当React.lazy加载组件过程中出现网络错误（如组件资源无法获取）或模块解析错误（如组件代码本身有语法错误），错误边界可以捕获这些异常。
异常处理流程：错误边界捕获到错误后，会调用componentDidCatch生命周期方法（在类组件中）或useErrorBoundary Hook（在函数组件中），在该方法中可以进行错误日志记录、展示友好的加载失败提示等操作。

架构设计

全局错误边界：可以在应用的顶层设置一个全局错误边界组件，包裹整个应用或至少包裹路由部分。例如：

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LoadingError from './components/LoadingError';

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

  componentDidCatch(error, errorInfo) {
    // 记录错误日志
    console.log('Error in dynamic route loading:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <LoadingError />;
    }
    return this.props.children;
  }
}

const App = () => (
  <Router>
    <GlobalErrorBoundary>
      <Routes>
        <Route path="/" element={<React.lazy(() => import('./components/Home'))} />
        <Route path="/about" element={<React.lazy(() => import('./components/About'))} />
      </Routes>
    </GlobalErrorBoundary>
  </Router>
);

export default App;

局部错误边界：对于特定的路由组件，也可以在组件内部设置局部错误边界。例如：

import React, { Component, Suspense } from'react';

const LazyComponent = React.lazy(() => import('./SomeComponent'));

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

  componentDidCatch(error, errorInfo) {
    // 记录错误日志
    console.log('Error in local component loading:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div>Loading failed for this part.</div>;
    }
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    );
  }
}

export default LocalErrorBoundary;

可能遇到的难点与解决方案

难点：错误边界无法捕获异步代码中的错误，例如setTimeout、Promise的reject等。
- 解决方案：对于Promise，可以使用.catch方法处理。对于setTimeout等异步操作，可以将其包装在一个try - catch块中，并在catch中手动触发错误边界的错误捕获机制。例如：

import React, { Component } from'react';

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

  componentDidCatch(error, errorInfo) {
    console.log('Caught error:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div>Error occurred.</div>;
    }
    return this.props.children;
  }
}

class AsyncComponent extends Component {
  componentDidMount() {
    setTimeout(() => {
      try {
        throw new Error('Async error');
      } catch (error) {
        this.props.errorBoundaryRef.current && this.props.errorBoundaryRef.current.componentDidCatch(error, {});
      }
    }, 1000);
  }

  render() {
    return null;
  }
}

const App = () => {
  const errorBoundaryRef = React.createRef();
  return (
    <ErrorBoundary ref={errorBoundaryRef}>
      <AsyncComponent errorBoundaryRef={errorBoundaryRef} />
    </ErrorBoundary>
  );
};

export default App;

难点：错误边界会捕获其子组件树中所有的错误，可能导致不必要的备用UI展示。
- 解决方案：可以在componentDidCatch方法中添加更细粒度的错误判断逻辑，例如根据错误信息或错误类型来决定是否展示备用UI。
难点：在服务端渲染（SSR）场景下，错误边界的行为可能有所不同，并且错误处理可能更复杂。
- 解决方案：需要在服务端和客户端统一错误处理逻辑。在服务端，可以记录错误日志并返回一个通用的错误状态码或错误页面。在客户端，同样捕获错误并展示友好UI。可以使用一些工具库如react-error-overlay来辅助SSR场景下的错误处理。

星途面试题库

面试题：React错误边界在路由动态加载及异常处理的专家级应用

知识考点

面试题答案

实现原理

架构设计

可能遇到的难点与解决方案