在开发基于Next.js的TypeScript应用程序时，我们经常会遇到一些意料之外的JavaScript错误，这些错误可能会导致页面直接白屏，严重影响用户体验。为了提升应用的健壮性和用户体验，引入ErrorBoundary组件是一种非常有效的策略。本文将深入探讨如何在Next.js + TypeScript项目中使用ErrorBoundary来优雅地处理运行时错误，并实现页面的降级渲染。

一、ErrorBoundary简介

ErrorBoundary是React 16引入的一个高级特性，它允许我们将组件树的一部分包装起来，并捕获该部分中任何子组件抛出的JavaScript错误，从而避免整个页面崩溃。通过自定义错误边界组件，我们可以展示一个友好的错误信息给用户，同时后台记录错误详情，甚至提供重试或者回退操作，达到所谓的“降级渲染”。

二、逐步实现ErrorBoundary

1 引入依赖及类型定义

首先，在你的Next.js项目中创建一个名为ErrorBoundary.tsx的文件，确保已安装@types/react以获得React相关的类型支持。

2 定义ErrorBoundary组件

接下来，按照以下步骤编写ErrorBoundary组件：

import React, { Component, ErrorInfo } from 'react';
import { FrownTwoTone } from '@ant-design/icons';
import { Button } from 'antd';
import styles from './error.module.scss'; // 假设你已经创建了样式模块
import { Path } from '@/app/constant'; // 导入路由常量
import UseLocalStorage from '@/app/tools/storage'; // 自定义本地存储工具
interface Props {
  children: React.ReactNode;
  accessStore: any; // 根据实际情况定义类型
  navigate: (path: string, options?: any) => void; // 页面跳转函数类型定义
}
export default class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Client-side Exception:', error, errorInfo);
    // 可以在此处添加上报错误到服务端的逻辑
  }
  handleReload = () => {
    this.props.accessStore.logout(); // 确保logout方法名称正确
    this.props.navigate(Path.Auth, { replace: true });
    window.location.reload();
  }
  render() {
    if (this.state.hasError) {
      return (
        
          
          
            很抱歉，发生了意外错误。
            请稍后再试或重新登录。
            handleReload()}>
              重新登录
            
          
        
      );
    }
    
    return this.props.children;
  }
}

3 在页面中应用ErrorBoundary

要在具体页面（例如Home.tsx）中使用ErrorBoundary，只需将其作为包裹组件即可：

import ErrorBoundary from '../components/ErrorBoundary'; // 路径根据实际情况调整
import { useAccessStore } from '@/app/stores'; // 假定这是状态管理的hook
import { useRouter } from 'next/router';
function Home() {
  const router = useRouter();
  const accessStore = useAccessStore();
  const navigate = (path: string, options?: any) => router.push(path, options);
  return (
    
      {/* ...这里是页面其他代码 */}
    
  );
}
export default Home;