Vercel部署Next.js项目时自定义错误页面被覆盖、Rollbar上报失效

问题核心原因 #

Vercel生产环境默认会接管服务端抛出的未捕获错误，直接返回平台默认错误页面，跳过Next.js的_error.js渲染逻辑，同时会阻断你写在_error.js里的上报代码执行。

解决方案 #

• 第一步：添加Vercel配置关闭默认错误处理
  在项目根目录新建vercel.json文件，添加如下配置：

{
  "disableServerlessErrorHandling": true,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "status": 500, "dest": "/_error" },
    { "src": "/.*", "status": 404, "dest": "/404" }
  ]
}

disableServerlessErrorHandling设置为true会关闭Vercel的默认服务端错误拦截逻辑，让Next.js的自定义错误页面接管所有错误渲染流程。

• 第二步：调整_error.js的上报逻辑适配服务端环境
  确保Rollbar初始化逻辑同时支持服务端和客户端执行，上报代码要放在getInitialProps里覆盖服务端错误场景，示例代码：

import NextError from 'next/error'
import Rollbar from 'rollbar'

// 服务端、客户端分别使用对应token，确保环境变量在Vercel后台已配置
const rollbarConfig = {
  accessToken: typeof window === 'undefined' 
    ? process.env.ROLLBAR_SERVER_TOKEN 
    : process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN,
  environment: process.env.NODE_ENV,
  captureUncaught: true,
  captureUnhandledRejections: true
}

const rollbar = new Rollbar(rollbarConfig)

export default function CustomError({ statusCode, err }) {
  // 客户端侧错误上报
  if (typeof window !== 'undefined' && err) {
    rollbar.error(err)
  }
  return <NextError statusCode={statusCode} />
}

CustomError.getInitialProps = async ({ res, err, asPath }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  // 服务端侧错误上报
  if (res && err) {
    rollbar.error(err, { path: asPath })
  }
  return { statusCode, err }
}

注意在Vercel项目后台的环境变量配置页，分别添加服务端用的ROLLBAR_SERVER_TOKEN和客户端用的带NEXT_PUBLIC_前缀的客户端token，确保构建时能正确读取。

• 第三步：API路由错误单独处理
  如果错误是从pages/api/下的接口路由抛出的，需要在接口逻辑内手动捕获错误、上报后再返回响应，不要直接抛出未捕获的错误：

export default async function handler(req, res) {
  try {
    // 业务逻辑
  } catch (err) {
    rollbar.error(err)
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

• 第四步：适配Next.js版本差异
  如果使用的是Next.js 13+ App Router，pages/_error.js已废弃，需要在app/目录下新建error.js作为全局错误边界，错误上报逻辑写在该文件的副作用逻辑内即可。

配置完成后重新部署即可生效，自定义错误页面会替代Vercel默认错误页，Rollbar上报也会正常触发。

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