Remix中抛出自定义NoRecordFound异常时如何返回404响应？

你当前的ErrorBoundary仅处理了前端渲染内容，但HTTP状态码由服务器端决定，因此需要在服务器端的错误处理逻辑中针对NoRecordFound错误设置404状态码，以下是几种高效的实现方式：

方法一：使用Root路由的handleError函数（推荐） #

Remix允许在root.tsx中导出handleError函数，这个函数在服务器端执行，专门用于处理路由抛出的错误，你可以在这里直接返回带指定状态码的响应：

// app/root.tsx
import { NoRecordFound } from "./data-access-layer";

// 服务器端错误处理，返回对应状态码的响应
export async function handleError(error) {
  if (error instanceof NoRecordFound) {
    return new Response("404 Not Found", {
      status: 404,
      headers: { "Content-Type": "text/html" },
    });
  }

  // 其他错误默认返回500
  return new Response("An error occurred", {
    status: 500,
    headers: { "Content-Type": "text/html" },
  });
}

// 保留你的ErrorBoundary负责渲染错误页面
export function ErrorBoundary() {
  const error = useRouteError();
  if (error instanceof NoRecordFound) {
    return (
      <html>
        <body>404 Not Found</body>
      </html>
    );
  } else {
    return (
      <html>
        <body>An error occurred</body>
      </html>
    );
  }
}

这样服务器会自动返回404状态码，同时前端渲染对应的404页面。

方法二：用高阶函数统一包装Loader #

如果需要更灵活的loader级控制，可以创建一个错误处理高阶函数，所有loader都用它包装，自动捕获NoRecordFound错误：

// app/utils/withErrorHandling.js
import { NoRecordFound } from "../data-access-layer";

export function withErrorHandling(loader) {
  return async (...args) => {
    try {
      return await loader(...args);
    } catch (error) {
      if (error instanceof NoRecordFound) {
        throw new Response("404 Not Found", { status: 404 });
      }
      throw error; // 其他错误继续抛出
    }
  };
}

然后在路由的loader中使用：

// app/routes/item.$id.jsx
import { withErrorHandling } from "../utils/withErrorHandling";

export const loader = withErrorHandling(async ({ params }) => {
  const item = await getItem(params.id);
  return json({ item });
});

这种方式避免了在每个loader中重复写try-catch逻辑。

方法三：在Entry Server中修改状态码 #

你也可以在服务器入口文件entry.server.tsx中检查路由错误，动态修改响应状态码：

// app/entry.server.tsx
import { NoRecordFound } from "./data-access-layer";

export default function handleRequest(
  request,
  responseStatusCode,
  responseHeaders,
  remixContext,
  loadContext
) {
  // 检查所有路由错误中是否存在NoRecordFound
  const is404Error = Object.values(remixContext.routeErrors).some(
    err => err instanceof NoRecordFound
  );

  if (is404Error) {
    responseStatusCode = 404;
  }

  // 保留原有渲染逻辑...
}

这种方式适合需要全局控制所有响应状态码的场景。

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