如何在React错误边界中识别并处理自定义错误类型？

嘿，这个需求我刚好做过，其实核心就是在错误页面组件里通过类型判断识别你的自定义错误，然后针对性返回提示内容。下面给你具体的实现步骤和技巧：

1. 确保自定义错误类的正确定义 #

首先你的自定义错误得继承Error，并且要显式设置name属性（这个是后续判断的关键标识），比如：

// 定义认证失败的自定义错误
class AuthError extends Error {
  constructor(message = "登录状态已过期，请重新登录") {
    super(message);
    this.name = "AuthError"; // 唯一标识，用来区分不同错误类型
    this.statusCode = 401; // 可选：添加额外上下文信息
  }
}

// 定义资源找不到的自定义错误
class NotFoundError extends Error {
  constructor(resourceName) {
    super(`抱歉，资源「${resourceName}」不存在`);
    this.name = "NotFoundError";
    this.statusCode = 404;
  }
}

小提示：如果你的错误需要跨组件/跨页面传递（比如被序列化），instanceof可能会失效，这时候name属性就是最可靠的判断依据。

2. 在错误页面中判断错误类型并渲染对应UI #

假设你的错误边界已经把捕获到的error作为props传给了错误页面组件，那在组件里就可以通过两种方式判断：

方式一：用instanceof判断（适合直接引入自定义类的场景） #

function ErrorPage({ error }) {
  // 识别认证错误
  if (error instanceof AuthError) {
    return (
      <div className="error-container">
        <h2>🔒 登录状态失效</h2>
        <p>{error.message}</p>
        <button onClick={() => window.location.href = "/login"}>去登录</button>
      </div>
    );
  }

  // 识别资源找不到错误
  if (error instanceof NotFoundError) {
    return (
      <div className="error-container">
        <h2>🔍 页面找不到啦</h2>
        <p>{error.message}</p>
        <button onClick={() => window.history.back()}>返回上一页</button>
      </div>
    );
  }

  // 默认错误提示（处理非自定义错误）
  return (
    <div className="error-container">
      <h2>😵 哎呀，出问题了</h2>
      <p>我们正在紧急修复，请稍后再试</p>
      <button onClick={() => window.location.reload()}>刷新页面</button>
    </div>
  );
}

方式二：用error.name判断（更鲁棒，适合错误可能被序列化的场景） #

如果你的错误经过了序列化/反序列化（比如在SSR场景下），instanceof会因为原型链丢失失效，这时候用name判断更稳妥：

function ErrorPage({ error }) {
  switch(error.name) {
    case "AuthError":
      return (
        <div className="error-container">
          <h2>🔒 登录状态失效</h2>
          <p>{error.message}</p>
          <button onClick={() => window.location.href = "/login"}>去登录</button>
        </div>
      );
    case "NotFoundError":
      return (
        <div className="error-container">
          <h2>🔍 页面找不到啦</h2>
          <p>{error.message}</p>
          <button onClick={() => window.history.back()}>返回上一页</button>
        </div>
      );
    default:
      return (
        <div className="error-container">
          <h2>😵 哎呀，出问题了</h2>
          <p>我们正在紧急修复，请稍后再试</p>
          <button onClick={() => window.location.reload()}>刷新页面</button>
        </div>
      );
  }
}

3. 额外注意事项 #

• 错误边界要确保能捕获到错误：不要在子组件里用try/catch吃掉错误，要让错误冒泡到错误边界；
• 自定义错误的name要唯一：避免和原生Error的name（比如"TypeError"）冲突；
• 可以扩展自定义错误的属性：比如添加statusCode、action等，用来在错误页面里做更复杂的逻辑（比如跳转特定页面、触发特定操作）。

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