Rollbar.js Integration Examples

This directory contains examples demonstrating various ways to integrate Rollbar.js into different JavaScript environments and frameworks.

Integration Compatibility Matrix

The following table shows all supported integration methods across different platforms:

Environment	Script Tag	CommonJS	ESM Import	TypeScript	AMD
Browser	✅ script.html ✅ snippet.html	—	✅ via bundler	✅ via bundler	✅ requirejs/
Node.js	—	✅ require	✅ import	✅	—
React Native	—	✅	✅	✅	—
React	✅	✅ react/	✅	✅	—
Angular	—	—	✅ angular/	✅	—
Vue.js	✅	✅	✅ vuejs3/	✅	—
Next.js	—	✅ SSR/Client	✅ SSR/Client	✅	—
Browser Extension	✅ v2, v3	—	✅	✅	—

Quick Start

First, sign up for a Rollbar account if you haven't already. Each example includes its own README with specific setup instructions.

Common patterns:

Browser (Script Tag)

For the recommended snippet-based installation with automatic error capture and telemetry, see our Browser JS – Quick Start documentation.

Node.js / CommonJS

const Rollbar = require('rollbar');

const rollbar = new Rollbar({
  accessToken: 'POST_SERVER_ITEM_ACCESS_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: { code_version: '1.0.0' },
});

ES Modules / TypeScript

import Rollbar from 'rollbar';

const rollbar = new Rollbar({
  accessToken: 'POST_SERVER_ITEM_ACCESS_TOKEN',
  environment: 'production',
});

Available Examples

Framework Examples

• angular/ - Angular 18+ with TypeScript and error handlers
• react/ - React with error boundaries
• vuejs3/ - Vue.js 3 with Vite

Build Tool Examples

• browserify/ - Browserify bundler integration
• webpack/ - Webpack bundler configuration
• requirejs/ - AMD/RequireJS loader

Environment Examples

• universal-browser/ - Isomorphic JavaScript (browser)
• universal-node/ - Isomorphic JavaScript (Node.js)
• browser_extension_v2/ - Chrome extension (Manifest V2)
• browser_extension_v3/ - Chrome extension (Manifest V3)
• no-conflict/ - Using Rollbar with noConflict mode

Basic Examples

• snippet.html - Async snippet integration
• script.html - Direct script tag
• test.html - Test page
• itemsPerMinute.html - Rate limiting demo
• include_custom_object.html - Custom data example

Testing Examples

To test these examples with your local Rollbar.js build:

1. Build the library:

   npm run build

2. For Node.js examples:

   cd examples/universal-node
   npm install
   npm start

3. For browser examples, start a local server:

   python3 -m http.server 8000
   # Visit http://localhost:8000/examples/

Package Entry Points

Rollbar.js uses conditional exports to provide the right module format for each environment:

Automatic Resolution (Recommended)

When you use require('rollbar') or import Rollbar from 'rollbar', you automatically get:

• Node.js:
  • import → ES module (src/server/rollbar.js)
  • require() → CommonJS wrapper (src/server/rollbar.cjs)
• Browsers/Bundlers:
  • import → ES module (src/browser/rollbar.js)
  • require() → UMD bundle (dist/rollbar.umd.min.js)
• TypeScript: Type definitions from index.d.ts

Direct Imports - Source Files (ES modules)

• rollbar/src/server/rollbar.js - Server-side source
• rollbar/src/browser/rollbar.js - Browser-side source
• rollbar/src/react-native/rollbar.js - React Native source

Direct Imports - Distribution Files (Pre-built bundles)

• rollbar/dist/rollbar.umd.js - Universal (CommonJS/AMD/global)
• rollbar/dist/rollbar.umd.min.js - Universal minified
• rollbar/dist/rollbar.js - Vanilla (script tag only)
• rollbar/dist/rollbar.min.js - Vanilla minified
• rollbar/dist/rollbar.snippet.js - Async snippet loader
• rollbar/dist/rollbar.named-amd.js - AMD/RequireJS