在开发基于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<Props, { hasError: boolean; error?: Error; errorInfo?: ErrorInfo }> {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 (<div className={styles['error-container']}><FrownTwoTone className={styles['error-icon']} twoToneColor="#15a9fc" /><div><div className={styles['error-message']}>很抱歉，发生了意外错误。</div><div className={styles['error-message']}>请稍后再试或重新登录。</div><Button type="primary" className={styles['theme-color-button']} block onClick={()=>handleReload()}>重新登录</Button></div></div>);}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 (<ErrorBoundary accessStore={accessStore} navigate={navigate}>{/* ...这里是页面其他代码 */}</ErrorBoundary>);
}export default Home;