Next.js+TS项目中的错误边界处理与渲染降级实践

在开发基于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;