如何在Next.js 14 App Router中配置Rollbar集成？

一、客户端错误捕获配置 #

你用next/Script替代旧方案的思路是对的，TypeScript报错不用忽略，通过类型声明就能解决：

1. 添加Rollbar全局类型声明
   在项目根目录创建types/rollbar.d.ts文件，内容如下：

interface Window {
  Rollbar: any;
}

然后在tsconfig.json中确保types目录被包含：

{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

2. 优化Script组件配置
   将Rollbar初始化代码放在app/layout.tsx的body标签内，使用strategy="beforeInteractive"确保脚本尽早加载，覆盖更多错误场景：

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <Script
          id="rollbar-init"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              var _rollbarConfig = {
                accessToken: '${process.env.NEXT_PUBLIC_ROLLBAR_ACCESS_TOKEN}',
                captureUncaught: true,
                captureUnhandledRejections: true,
                payload: {
                  environment: '${process.env.NODE_ENV}',
                  client: {
                    javascript: {
                      code_version: '1.0.0',
                      source_map_enabled: true
                    }
                  }
                }
              };
              // 粘贴Rollbar官方提供的完整初始化代码片段
              !function(r){function o(e){if(t[e])return t[e].exports;var n=t[e]={i:e,l:!1,exports:{}};return r[e].call(n.exports,n,n.exports,o),n.l=!0,n.exports}var t={};o.m=r,o.c=t,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(n,e){if(1&e&&(n=o(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var t in n)o.d(r,t,function(e){return n[e]}.bind(null,t));return r},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="",o(o.s=0)}([function(e,n,t){"use strict";var r=t(1),o=t(2);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdn.rollbar.com/rollbarjs/v2.26.0/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async,r(_rollbarConfig,o)}],function(){return this}());
            `,
          }}
        />
        {children}
      </body>
    </html>
  );
}

注意：建议用环境变量存储accessToken和environment，避免硬编码敏感信息。

二、服务端错误捕获配置 #

Next.js 14+ App Router的服务端错误可以通过两种方式上报到Rollbar：

1. 在error.jsx中上报客户端可感知的服务端错误 #

在需要捕获错误的路由目录下创建error.jsx，在组件内部上报错误：

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error & { digest?: string }, reset: () => void }) {
  useEffect(() => {
    if (window.Rollbar) {
      window.Rollbar.error(error);
    }
  }, [error]);

  return (
    <div>
      <h2>出错了！</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

2. 服务端组件/API路由/Server Actions中的错误上报 #

这类场景需要使用Rollbar的Node.js SDK：

首先安装依赖：

npm install rollbar
# 或
yarn add rollbar

创建服务端Rollbar实例工具文件utils/rollbar-server.ts：

import Rollbar from 'rollbar';

const rollbarServer = new Rollbar({
  accessToken: process.env.ROLLBAR_SERVER_ACCESS_TOKEN, // 服务端专用token，不要暴露给客户端
  environment: process.env.NODE_ENV,
  captureUncaught: true,
  captureUnhandledRejections: true,
});

export default rollbarServer;

在服务端组件中使用：

import rollbarServer from '@/utils/rollbar-server';

export default async function ServerComponent() {
  try {
    // 你的服务端逻辑
    const data = await fetch('https://api.example.com/data');
    if (!data.ok) throw new Error('请求失败');
  } catch (error) {
    rollbarServer.error(error);
    throw error; // 触发error.jsx渲染
  }

  return <div>服务端组件内容</div>;
}

在API路由中使用：

import rollbarServer from '@/utils/rollbar-server';
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    // API逻辑
    throw new Error('API错误');
  } catch (error) {
    rollbarServer.error(error);
    return NextResponse.json({ error: '服务器错误' }, { status: 500 });
  }
}

三、额外优化 #

• Source Map配置：在Rollbar项目设置中开启Source Map支持，构建Next.js时通过Rollbar CLI或webpack插件上传Source Map，方便定位源码错误。
• 自定义上下文：上报错误时可添加用户ID、请求路径等额外信息，提升排查效率。

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