Nextjs Vercel部署报错：客户端异常，trpc接口POST请求失败

本地运行正常，但部署到Vercel生产环境后调用tRPC接口发送POST请求时出现报错：Application error: a client-side exception has occurred (see the browser console for more information).，经排查问题源于三点，对应解决方案如下：

1. catch块类型不正确 #

确保catch捕获的错误类型匹配tRPC的错误结构：

• 使用tRPC.TRPCError类型约束捕获的错误对象，避免类型不匹配导致客户端解析失败；
• 在catch分支中先判断错误的属性（比如error.data?.code），再进行后续处理，不要直接假设错误是tRPC标准格式。

2. Vercel默认超时限制（10秒）导致请求超时 #

Vercel Serverless函数默认超时为10秒，若API请求耗时超过该时长会触发超时，可通过以下方式解决：

• 优化接口性能：压缩请求数据、给数据库查询加索引、减少不必要的关联查询、缓存高频请求结果，将请求耗时控制在10秒内；
• 调整Vercel函数超时：付费版Vercel支持最长90秒的函数超时，可在项目根目录的vercel.json中配置：

{
  "functions": {
    "pages/api/trpc/[trpc].ts": {
      "maxDuration": 30
    }
  }
}

• 改用异步任务模式：若请求确实需要长时间处理，可采用“提交任务+轮询结果”的方式，比如用Vercel KV存储任务状态，前端先提交任务，之后定期查询任务结果，避免长时间占用请求连接。

3. 未处理超时情况，强行从文本推断JSON格式 #

Vercel超时返回的是文本而非标准tRPC错误JSON，强行解析会导致客户端异常，解决方案：

• 在tRPC客户端配置请求超时，提前触发客户端超时处理，避免触发Vercel的服务端超时：

import { httpBatchLink } from '@trpc/client';

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: '/api/trpc',
      timeout: 8000, // 提前设置超时，预留缓冲时间
    }),
  ],
});

• 在错误处理逻辑中区分超时错误，当检测到超时（比如error.message.includes('timeout')）时，直接返回友好提示，不要尝试解析非JSON格式的响应内容。

内容的提问来源于stack exchange，提问作者Binny.H