面试题：Next.js 路由系统中错误边界如何捕获页面组件的异常

如何使用错误边界捕获错误

在 Next.js 路由系统中，错误边界（Error Boundaries）可以捕获其子组件树中组件在渲染、生命周期方法或构造函数中抛出的错误。通过定义一个自定义的 React 组件作为错误边界，然后在 Next.js 页面组件中使用该错误边界组件包裹可能抛出错误的部分。

错误边界实现步骤

创建错误边界组件：

import React, { Component } from'react';

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

  componentDidCatch(error, errorInfo) {
    // 可以在这里记录错误信息，例如发送到日志服务器
    console.log('捕获到错误:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 返回一个用户友好的错误提示界面
      return <div>发生了一个错误。</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在 Next.js 页面中使用错误边界：

import type { NextPage } from 'next';
import ErrorBoundary from '../components/ErrorBoundary';

const HomePage: NextPage = () => {
  return (
    <ErrorBoundary>
      {/* 可能抛出错误的组件内容 */}
      <div>
        {/* 页面具体内容 */}
      </div>
    </ErrorBoundary>
  );
};

export default HomePage;

在上述步骤中，首先创建了一个 ErrorBoundary 组件，它通过 componentDidCatch 生命周期方法捕获子组件的错误，并通过 state 控制显示错误提示界面还是正常内容。然后在 Next.js 页面组件中，将可能出错的部分包裹在 ErrorBoundary 组件内，这样就能捕获相关错误并进行处理。

面试题：Next.js 路由系统中错误边界如何捕获页面组件的异常

知识考点

面试题答案

如何使用错误边界捕获错误

错误边界实现步骤