Next.js 14中如何在error.tsx文件中展示更多错误信息？

扩展原生Error类时，直接添加自定义属性经常会遇到访问不到的问题，核心原因是ES6类继承Error时的原型链问题，以及TypeScript（如果用TS）的类型约束。以下是具体解决方法：

1. 正确实现自定义Error类 #

不管是JS还是TS，都需要规范地扩展Error，确保原型链和属性正确绑定：

JavaScript版本 #

class CustomError extends Error {
  constructor(title, description, cause) {
    // 必须先调用父类构造函数，初始化基础Error属性
    super(description);
    // 自定义错误名称，方便调试
    this.name = 'CustomError';
    // 添加自定义属性
    this.title = title;
    this.description = description;
    this.cause = cause;
    // 修复原型链，确保instanceof判断和属性访问正常
    Object.setPrototypeOf(this, CustomError.prototype);
  }
}

TypeScript版本 #

需要先声明自定义错误的类型接口，再实现类：

// 声明自定义错误的类型，扩展原生Error
interface CustomError extends Error {
  title: string;
  cause: string;
}

class CustomError extends Error implements CustomError {
  title: string;
  cause: string;

  constructor(title: string, description: string, cause: string) {
    super(description);
    this.name = 'CustomError';
    this.title = title;
    this.cause = cause;
    Object.setPrototypeOf(this, CustomError.prototype);
  }
}

2. 在error.tsx中访问自定义属性 #

以Next.js的error.tsx为例（其他React错误边界组件逻辑类似）：

TypeScript场景 #

需要通过类型断言或实例判断处理类型约束：

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  // 先判断是否为自定义错误实例，避免类型错误
  const isCustomError = error instanceof CustomError;

  useEffect(() => {
    if (isCustomError) {
      console.error('错误详情:', error.title, error.description, error.cause);
    }
  }, [error]);

  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>{isCustomError ? error.title : '未知错误'}</h1>
      <p>{isCustomError ? error.description : '系统出现了异常'}</p>
      {isCustomError && <p style={{ color: '#dc2626' }}>错误原因：{error.cause}</p>}
      <button onClick={reset} style={{ marginTop: '1rem' }}>重试操作</button>
    </div>
  );
}

JavaScript场景 #

直接通过instanceof判断后访问属性即可：

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }) {
  const isCustomError = error instanceof CustomError;

  useEffect(() => {
    if (isCustomError) {
      console.error('错误详情:', error.title, error.description, error.cause);
    }
  }, [error]);

  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>{isCustomError ? error.title : '未知错误'}</h1>
      <p>{isCustomError ? error.description : '系统出现了异常'}</p>
      {isCustomError && <p style={{ color: '#dc2626' }}>错误原因：{error.cause}</p>}
      <button onClick={reset} style={{ marginTop: '1rem' }}>重试操作</button>
    </div>
  );
}

3. 常见问题排查 #

• 忘记修复原型链：如果不执行Object.setPrototypeOf(this, CustomError.prototype)，error instanceof CustomError会返回false，导致无法访问自定义属性。
• TS未声明类型接口：如果跳过类型声明，TS编译器会报错“属性不存在”，必须先定义接口再实现类。
• 未调用super构造函数：必须在构造函数第一行调用super()，否则this无法被正确初始化，自定义属性无法绑定。

内容的提问来源于stack exchange，提问作者rudzky