如何在NextJS 13 App Router中实现tRPC全局错误处理？

问题分析 #

你在NextJS 13里用fetchRequestHandler配置的onError，只有直接调用API路由（比如浏览器访问/api/trpc/getError）时会触发，但通过tRPC客户端调用getError接口时，服务器端的onError完全没反应。

解决步骤 #

1. 先检查日志输出位置 #

别盯着浏览器控制台看！fetchRequestHandler里的onError是在服务器端执行的，日志会打印在NextJS运行的终端窗口里。你调用客户端接口后，去终端看看，应该能看到你写的On error*********************日志。

2. 给Router加全局错误钩子 #

如果要确保所有接口的错误都被捕获（不管是直接调API还是客户端调用），可以在Router层面额外加onError，它会兜底捕获所有接口执行时抛出的错误：

修改server/index.ts：

import { router, publicProcedure } from "@trpc/server";

export const appRouter = router({
  getError: publicProcedure.query(() => {
    throw new Error("Test error");
  }),
  // 其他接口...
})
// 新增Router级别的错误处理
.onError((opts) => {
  console.error("全局接口错误:", {
    错误信息: opts.error.message,
    接口路径: opts.path,
    请求参数: opts.input,
  });
});

export type AppRouter = typeof appRouter;

3. 确认fetchRequestHandler配置没问题 #

检查api/trpc/[trpc]/route.ts的几个关键点：

• endpoint必须和你的API路由路径一致，这里/api/trpc是对的
• createContext别抛出错误，否则会中断请求处理
• 如果你用的是tRPC v10+，当前的参数配置是符合要求的

4. 客户端也可以加统一错误处理 #

要是需要在前端也统一处理错误，给tRPC客户端加个onError钩子就行：

// 示例：utils/trpc.ts
import { createTRPCNext } from "@trpc/next";
import type { AppRouter } from "@/server";

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      url: "/api/trpc",
      onError(opts) {
        console.error("前端捕获错误:", opts.error.message);
      },
    };
  },
  ssr: false,
});

验证方法 #

1. 启动NextJS，盯着终端日志
2. 在页面里调用trpc.getError.useQuery()
3. 终端应该会输出fetchRequestHandler和Router的错误日志，浏览器控制台会显示前端的错误信息

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