Skip to content

Commit a0bac8c

Browse files
authored
Update examples to use local rollbar package and fix compatibility issues (#1247)
1 parent 973bdea commit a0bac8c

File tree

15 files changed

+150
-13984
lines changed

15 files changed

+150
-13984
lines changed

examples/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock.json

examples/README.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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`

examples/angular/angular.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,5 +97,8 @@
9797
}
9898
}
9999
}
100+
},
101+
"cli": {
102+
"analytics": false
100103
}
101104
}

0 commit comments

Comments
 (0)