Next.js

Use separate tokens so server and client events are sent correctly. Follow Rollbar’s Next.js docs : do not put the server token in a NEXT_PUBLIC_ env var.

Environment variables

In .env or .env.local:


NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=<POST CLIENT ITEM TOKEN>
ROLLBAR_SERVER_TOKEN=<POST SERVER ITEM TOKEN>

Service setup

Create a shared module (e.g. lib/observability.ts):


import {
  RollbarService,
  RollbarPluginFactory,
  RollbarEventTypes,
} from "@rachelallyson/stratum-rollbar-js";
 
const catalog = {
  API_ERROR: {
    id: "API_ERROR",
    description: "API request failed",
    eventType: RollbarEventTypes.ERROR,
    properties: { error: "object", path: "string", status: "number" },
  },
  USER_SIGNED_IN: {
    id: "USER_SIGNED_IN",
    description: "User identified for Rollbar",
    eventType: RollbarEventTypes.IDENTIFY,
    properties: { id: "string", username: "string", email: "string" },
  },
  USER_SIGNED_OUT: {
    id: "USER_SIGNED_OUT",
    description: "Clear Rollbar person",
    eventType: RollbarEventTypes.CLEAR_PERSON,
    properties: {},
  },
};
 
export const rollbarService = new RollbarService({
  catalog: { items: catalog },
  plugins: [
    RollbarPluginFactory({
      SERVER_ACCESS_TOKEN: process.env.ROLLBAR_SERVER_TOKEN!,
      CLIENT_ACCESS_TOKEN: process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN!,
      config: {
        environment: process.env.NODE_ENV,
        payload: { context: "my-app" },
      },
      serverConfig: {
        captureUncaught: false,
        captureUnhandledRejections: false,
      },
      clientConfig: {
        captureUncaught: true,
        captureUnhandledRejections: true,
      },
    }),
  ],
  productName: "my-app",
  productVersion: "1.0.0",
});

Server (API routes, server components)


// app/api/some-route/route.ts
import { rollbarService } from "@/lib/observability";
 
export async function GET() {
  try {
    // ...
  } catch (e) {
    await rollbarService.publish("API_ERROR", {
      pluginData: {
        RollbarPlugin: {
          properties: {
            error: e instanceof Error ? e : new Error(String(e)),
            path: "/api/some-route",
            status: 500,
          },
        },
      },
    });
    throw e;
  }
}

Client (client components)


"use client";
import { rollbarService } from "@/lib/observability";
 
export function SomeClientComponent() {
  const handleError = async () => {
    await rollbarService.publish("API_ERROR", {
      pluginData: {
        RollbarPlugin: {
          properties: {
            error: new Error("Client-side failure"),
            path: window.location.pathname,
          },
        },
      },
    });
  };
  // ...
}

Rollbar provider and uncaught errors

This plugin handles Stratum-driven events (rollbarService.publish(...)) on both server and client. For uncaught errors and the Rollbar React context (e.g. useRollbar() in client components), set up Rollbar separately using their packages and docs; the two setups work alongside each other.

App Router: Follow Rollbar’s Next.js (App Router) guide :

Provider — In your root layout, wrap the app with <Provider config={clientConfig}> from @rollbar/react so hooks like useRollbar() are available in client components.
Route error handler — Add error.js (and optionally global-error.js for root layout/template errors) and call rollbar.error(error) (or create a Rollbar instance in global-error.js since the Provider isn’t available there).
ErrorBoundary — Optionally use <ErrorBoundary> from @rollbar/react instead of or in addition to Next.js error handlers.

Install Rollbar’s React integration if you use the Provider or ErrorBoundary:


npm install rollbar @rollbar/react

Then configure a clientConfig (e.g. same token as NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN) for the Provider. This plugin does not ship or replace that setup; it only sends events you publish through Stratum.