面试题：Next.js 路由系统错误边界下的数据恢复与用户提示

恢复部分数据：

在错误边界组件的 state 中维护一份备用数据。例如：

import React, { Component } from'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      fallbackData: { /* 这里填充备用数据 */ }
    };
  }

  componentDidCatch(error, errorInfo) {
    // 记录错误，可用于日志分析
    console.log('Error caught:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 使用备用数据渲染
      return <div>{JSON.stringify(this.state.fallbackData)}</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

提供友好的错误提示信息：

在 render 方法中，当捕获到错误时，返回友好的错误提示。比如：

render() {
  if (this.state.hasError) {
    return (
      <div>
        <p>很抱歉，加载数据时出现问题。</p>
        <p>请稍后重试或联系管理员。</p>
      </div>
    );
  }
  return this.props.children;
}

不影响应用其他部分的正常运行：
- Next.js 中的错误边界只捕获其子组件树中的错误，不会影响应用其他部分。只要确保错误边界正确包裹可能出错的数据获取组件即可。例如：
```
import React from'react';
import ErrorBoundary from './ErrorBoundary';
import DataComponent from './DataComponent';

function Page() {
  return (
    <ErrorBoundary>
      <DataComponent />
    </ErrorBoundary>
  );
}

export default Page;
```
这样，即使 DataComponent 在数据获取时抛出异常，错误边界捕获异常并处理，应用的其他部分（如导航栏、页脚等不在错误边界包裹内的组件）仍能正常运行。

面试题：Next.js 路由系统错误边界下的数据恢复与用户提示

知识考点

面试题答案