|
| 1 | +# Rollbar.js Integration Examples |
| 2 | + |
| 3 | +This directory contains examples demonstrating various ways to integrate Rollbar.js into different JavaScript environments and frameworks. |
| 4 | + |
| 5 | +## Integration Compatibility Matrix |
| 6 | + |
| 7 | +The following table shows all supported integration methods across different platforms: |
| 8 | + |
| 9 | +| Environment | Script Tag | CommonJS | ESM Import | TypeScript | AMD | |
| 10 | +|-------------|------------|----------|------------|------------|-----| |
| 11 | +| **Browser** | ✅ [script.html](./script.html) | — | ✅ via bundler | ✅ via bundler | ✅ [requirejs/](./requirejs/) | |
| 12 | +| **Node.js** | — | ✅ `require('rollbar')` | ✅ `import` | ✅ | — | |
| 13 | +| **React** | ✅ | ✅ [react/](./react/) | ✅ | ✅ | — | |
| 14 | +| **Angular** | — | — | ✅ [angular/](./angular/) | ✅ | — | |
| 15 | +| **Vue.js** | ✅ | ✅ | ✅ [vuejs3/](./vuejs3/) | ✅ | — | |
| 16 | +| **Next.js** | — | ✅ SSR/Client | ✅ SSR/Client | ✅ | — | |
| 17 | +| **Browser Extension** | ✅ [v2](./browser_extension_v2/), [v3](./browser_extension_v3/) | — | ✅ | ✅ | — | |
| 18 | + |
| 19 | +## Quick Start |
| 20 | + |
| 21 | +Each example includes its own README with specific setup instructions. Common patterns: |
| 22 | + |
| 23 | +### Browser (Script Tag) |
| 24 | +```html |
| 25 | +<script src="https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.4/rollbar.min.js"></script> |
| 26 | +<script> |
| 27 | + var _rollbarConfig = { |
| 28 | + accessToken: "YOUR_ACCESS_TOKEN", |
| 29 | + captureUncaught: true, |
| 30 | + captureUnhandledRejections: true |
| 31 | + }; |
| 32 | +</script> |
| 33 | +``` |
| 34 | + |
| 35 | +### Node.js / CommonJS |
| 36 | +```javascript |
| 37 | +const Rollbar = require('rollbar'); |
| 38 | +const rollbar = new Rollbar({ |
| 39 | + accessToken: 'YOUR_ACCESS_TOKEN', |
| 40 | + environment: 'production' |
| 41 | +}); |
| 42 | +``` |
| 43 | + |
| 44 | +### ES Modules / TypeScript |
| 45 | +```javascript |
| 46 | +import Rollbar from 'rollbar'; |
| 47 | +const rollbar = new Rollbar({ |
| 48 | + accessToken: 'YOUR_ACCESS_TOKEN', |
| 49 | + environment: 'production' |
| 50 | +}); |
| 51 | +``` |
| 52 | + |
| 53 | +## Available Examples |
| 54 | + |
| 55 | +### Framework Examples |
| 56 | +- **[angular/](./angular/)** - Angular 18+ with TypeScript and error handlers |
| 57 | +- **[react/](./react/)** - React with error boundaries |
| 58 | +- **[vuejs3/](./vuejs3/)** - Vue.js 3 with Vite |
| 59 | + |
| 60 | +### Build Tool Examples |
| 61 | +- **[browserify/](./browserify/)** - Browserify bundler integration |
| 62 | +- **[webpack/](./webpack/)** - Webpack bundler configuration |
| 63 | +- **[requirejs/](./requirejs/)** - AMD/RequireJS loader |
| 64 | + |
| 65 | +### Environment Examples |
| 66 | +- **[universal-browser/](./universal-browser/)** - Isomorphic JavaScript (browser) |
| 67 | +- **[universal-node/](./universal-node/)** - Isomorphic JavaScript (Node.js) |
| 68 | +- **[browser_extension_v2/](./browser_extension_v2/)** - Chrome extension (Manifest V2) |
| 69 | +- **[browser_extension_v3/](./browser_extension_v3/)** - Chrome extension (Manifest V3) |
| 70 | +- **[no-conflict/](./no-conflict/)** - Using Rollbar with noConflict mode |
| 71 | + |
| 72 | +### Basic Examples |
| 73 | +- **[snippet.html](./snippet.html)** - Async snippet integration |
| 74 | +- **[script.html](./script.html)** - Direct script tag |
| 75 | +- **[error.html](./error.html)** - Error handling examples |
| 76 | +- **[test.html](./test.html)** - Test page |
| 77 | +- **[itemsPerMinute.html](./itemsPerMinute.html)** - Rate limiting demo |
| 78 | +- **[csp-errors.html](./csp-errors.html)** - Content Security Policy testing |
| 79 | +- **[include_custom_object.html](./include_custom_object.html)** - Custom data example |
| 80 | + |
| 81 | +## Testing Examples |
| 82 | + |
| 83 | +To test these examples with your local Rollbar.js build: |
| 84 | + |
| 85 | +1. Build the library: |
| 86 | + ```bash |
| 87 | + npm run build |
| 88 | + ``` |
| 89 | + |
| 90 | +2. For Node.js examples: |
| 91 | + ```bash |
| 92 | + cd examples/universal-node |
| 93 | + npm install |
| 94 | + npm start |
| 95 | + ``` |
| 96 | + |
| 97 | +3. For browser examples, start a local server: |
| 98 | + ```bash |
| 99 | + python3 -m http.server 8000 |
| 100 | + # Visit http://localhost:8000/examples/ |
| 101 | + ``` |
| 102 | + |
| 103 | +## Package Entry Points |
| 104 | + |
| 105 | +Rollbar.js provides different entry points for different environments: |
| 106 | + |
| 107 | +- **Main package**: `require('rollbar')` or `import Rollbar from 'rollbar'` |
| 108 | + - Node.js: `src/server/rollbar.js` |
| 109 | + - Browser (with bundler): `dist/rollbar.umd.min.js` |
| 110 | + |
| 111 | +- **Direct imports - Source files** (ES modules): |
| 112 | + - `rollbar/src/server/rollbar.js` - Server-side source |
| 113 | + - `rollbar/src/browser/rollbar.js` - Browser-side source |
| 114 | + - `rollbar/src/react-native/rollbar.js` - React Native source |
| 115 | + |
| 116 | +- **Direct imports - Distribution files** (pre-built bundles): |
| 117 | + - `rollbar/dist/rollbar.umd.js` - Universal (CommonJS/AMD/global) |
| 118 | + - `rollbar/dist/rollbar.umd.min.js` - Universal minified |
| 119 | + - `rollbar/dist/rollbar.js` - Vanilla (script tag only) |
| 120 | + - `rollbar/dist/rollbar.min.js` - Vanilla minified |
| 121 | + - `rollbar/dist/rollbar.snippet.js` - Async snippet loader |
| 122 | + - `rollbar/dist/rollbar.named-amd.js` - AMD/RequireJS |
| 123 | + |
| 124 | +- **CDN**: `https://cdn.rollbar.com/rollbarjs/refs/tags/vVERSION/rollbar.min.js` |
0 commit comments