错误边界

为了避免向用户渲染空白页面，路由模块会自动捕获代码中的错误并渲染最近的 ErrorBoundary。

错误边界不用于错误报告或渲染表单验证错误。请参阅表单验证和错误报告。

1. 添加根级错误边界

所有应用至少应该导出一个根级错误边界。它处理以下三种主要情况：

抛出带有状态码和文本的 data
带有堆栈跟踪的错误实例
随机抛出的值

import { Route } from "./+types/root";

export function ErrorBoundary({
  error,
}: Route.ErrorBoundaryProps) {
  if (isRouteErrorResponse(error)) {
    return (
      <>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  } else {
    return <h1>Unknown Error</h1>;
  }
}

2. 编写一个错误

不建议为了控制流而有意地抛出错误来强制错误边界渲染。错误边界主要用于捕获代码中的非预期错误。

export async function loader() {
  return undefined();
}

这将渲染步骤 1 中 UI 的 instanceof Error 分支。

这不仅适用于 loaders，也适用于所有路由模块 API：loaders、actions、组件、headers、links 和 meta。

3. 在 loader/action 中抛出数据

对于规则 #2，存在例外，特别是 404 错误。当 loader 找不到渲染页面所需的内容时，你可以有意地 throw data()（带上正确的状态码）到最近的错误边界。抛出 404 错误然后继续。

import { data } from "react-router";

export async function loader({ params }) {
  let record = await fakeDb.getRecord(params.id);
  if (!record) {
    throw data("Record Not Found", { status: 404 });
  }
  return record;
}

这将渲染步骤 1 中 UI 的 isRouteErrorResponse 分支。

4. 嵌套错误边界

当抛出错误时，将渲染“最近的错误边界”。考虑以下嵌套路由：

// ✅ has error boundary
route("/app", "app.tsx", [
  // ❌ no error boundary
  route("invoices", "invoices.tsx", [
    // ✅ has error boundary
    route("invoices/:id", "invoice-page.tsx", [
      // ❌ no error boundary
      route("payments", "payments.tsx"),
    ]),
  ]),
]);

下表显示了根据错误来源将渲染哪个错误边界

错误来源	渲染的边界
app.tsx	app.tsx
invoices.tsx	app.tsx
invoice-page.tsx	invoice-page.tsx
payments.tsx	invoice-page.tsx

错误清理

在生产模式下，服务器上发生的任何错误在发送到浏览器之前都会自动进行清理，以防止泄露任何敏感的服务器信息（如堆栈跟踪）。

这意味着在生产环境的浏览器中，抛出的 Error 将具有通用消息且没有堆栈跟踪。原始错误在服务器上保持不变。

另请注意，使用 throw data(yourData) 发送的数据不会被清理，因为这些数据是用于渲染的。