Next.js+TRPC项目客户端无法接收TRPCError问题求助

• 检查TRPC客户端链路配置
  新版TRPC（v10+）移除旧版onError后，客户端错误传递依赖链路（links）的正确配置。如果自定义了链路中间件，确保没有拦截错误后未正常传递。比如默认的httpLink需保持正确配置，避免中间件吃掉错误：

const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      links: [
        httpLink({ url: '/api/trpc' }),
        // 避免添加拦截错误后返回null的自定义链路
      ],
    };
  },
});

• 验证retry配置是否掩盖错误
  你设置了retry和retryDelay，若重试次数过多，可能导致错误在重试流程中未被最终返回。可临时将retry设为0，确认是否能获取到错误：

const { data, error } = trpc.authCallback.useQuery(
  {},
  { retry: 0, retryDelay: 0 }
);

• 检查服务端错误序列化格式
  虽然直接访问接口能看到错误，需确认返回格式符合TRPC规范：错误应包含在error字段中，带有code、message属性，比如：

{
  "error": {
    "code": "UNAUTHORIZED",
    "message": "Unauthorized",
    "data": null
  }
}

若服务端自定义错误处理修改了返回结构，客户端会无法解析，导致error为null。

• 排查Next.js API路由的错误处理逻辑
  在TRPC的API路由（pages/api/trpc/[trpc].ts）中，若自定义了onError方法，需确保未覆盖默认的错误序列化逻辑。比如不要只打印错误而不传递：

export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: createContext,
  onError({ error }) {
    console.error(error);
    // 保留默认错误处理，或确保错误被正确序列化返回
  },
});

• 确认客户端读取error的时机
  组件渲染初期请求处于pending状态时，error必然为null。需通过isLoading判断请求完成后再读取错误：

const { data, error, isLoading } = trpc.authCallback.useQuery({});

if (isLoading) return <div>加载中...</div>;
if (error) return <div>错误：{error.message}</div>;

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