Template name
A complete starter kit for integrating Rollbar error monitoring into your Next.js App Router application.
Ship faster with confidence — A complete starter kit for integrating Rollbar error monitoring into your Next.js App Router application. Kickstart your error monitoring in minutes and ship with no worries.
🌐 Public Demo: This app can be deployed as a public demo where users can configure their own Rollbar tokens via the UI (stored in localStorage). Perfect for live demos, workshops, or self-service trials!
This demo app shows how to:
Note: This app is designed to work as a public demo where users can configure their own Rollbar tokens without requiring environment variables or deployment configuration.
cd rollbar-vercelnpm installCopy the example environment file:
cp .env.example .env.localEdit .env.local and add your Rollbar client access token:
NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=your_rollbar_client_token_hereNEXT_PUBLIC_ROLLBAR_ENV=developmentTo get your Rollbar client token:
post_client_item scopenpm run devOpen http://localhost:3000 in your browser.
NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN - Your Rollbar client access tokenNEXT_PUBLIC_ROLLBAR_ENV - Set to production or your preferred environment namenpm install -g vercelvercelFollow the prompts and set environment variables when asked.
By default, production builds in Next.js are minified and bundled, which results in unhelpful stack traces in Rollbar (showing webpack-internal paths). To get readable stack traces with actual file names and line numbers, you need to upload source maps to Rollbar.
This project is already configured with:
next.config.js - Enables production source mapsscripts/upload-sourcemaps.js - Uploads source maps to Rollbar after buildGo to Project Settings → Project Name -> Project Access Tokens
Find or create a token with post_server_item scope
Copy the token value
.env.local:ROLLBAR_SERVER_TOKEN=your_server_token_hereBASE_URL=https://your-app.vercel.appnpm run build:productionThis will:
.map files to RollbarAdd these environment variables in Edgenivo Project Settings:
ROLLBAR_SERVER_TOKEN - Your server access tokenBASE_URL - Your Edgenivo deployment URL (e.g., https://your-app.vercel.app)SOURCE_VERSION - (Optional) Version tag for tracking (e.g., 1.0.0 or git commit SHA)Update your Edgenivo build command to:
npm run build:productioncomponents/EventControls.js:57npm run build:productionnpm run dev) don't need source maps - they already have readable stack tracesROLLBAR_SERVER_TOKEN, the build will still succeed but skip source map uploadsThe demo provides four types of events you can send to Rollbar:
After sending events:
Event history is stored only in browser memory. This means:
This demo uses only Rollbar's browser SDK with a client access token. For production applications, consider:
rollbar-vercel/├── app/│ ├── globals.css # Global styles with Tailwind│ ├── layout.js # Root layout component│ └── page.js # Home page with demo controls├── components/│ ├── EventControls.js # Main control panel with buttons│ ├── EventSlideout.js # Event history slide out│ └── Header.js # Simple header with logos├── lib/│ ├── rollbarClient.js # Rollbar SDK initialization│ └── time.js # Timestamp and UUID utilities├── public/│ └── logo.svg # Rollbar logo├── .env.example # Environment variable template├── package.json # Dependencies and scripts├── postcss.config.js # PostCSS configuration├── tailwind.config.js # Tailwind CSS configuration├── vercel.json # Edgenivo deployment config└── README.md # This filenpm run dev - Start development server on http://localhost:3000npm run build - Build production bundlenpm start - Start production servernpm run lint - Run ESLint (if configured)NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN is correctpost_client_item scopenpm install to ensure all dependencies are installed.next folder and node_modules, then reinstallThis is a demo project for educational purposes. Feel free to use and modify as needed.
