@multiplayer-app/session-recorder-browser 1.2.36 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -14
- package/dist/browser/index.js +340 -240
- package/dist/browser/index.js.map +1 -1
- package/dist/config/constants.d.ts +3 -0
- package/dist/config/constants.d.ts.map +1 -1
- package/dist/config/constants.js +3 -0
- package/dist/config/constants.js.map +1 -1
- package/dist/config/defaults.d.ts.map +1 -1
- package/dist/config/defaults.js +1 -0
- package/dist/config/defaults.js.map +1 -1
- package/dist/config/session-recorder.d.ts.map +1 -1
- package/dist/config/session-recorder.js +2 -0
- package/dist/config/session-recorder.js.map +1 -1
- package/dist/exporters/index.js +182 -114
- package/dist/exporters/index.js.map +1 -1
- package/dist/exporters.d.ts +1 -1
- package/dist/exporters.d.ts.map +1 -1
- package/dist/exporters.js +1 -1
- package/dist/exporters.js.map +1 -1
- package/dist/index.js +338 -239
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +338 -239
- package/dist/index.umd.js.map +1 -1
- package/dist/otel/helpers.d.ts.map +1 -1
- package/dist/otel/helpers.js +1 -8
- package/dist/otel/helpers.js.map +1 -1
- package/dist/otel/index.d.ts.map +1 -1
- package/dist/otel/index.js +4 -0
- package/dist/otel/index.js.map +1 -1
- package/dist/patch/fetch.js +1 -0
- package/dist/patch/fetch.js.map +1 -1
- package/dist/rrweb/index.d.ts +2 -3
- package/dist/rrweb/index.d.ts.map +1 -1
- package/dist/rrweb/index.js +7 -11
- package/dist/rrweb/index.js.map +1 -1
- package/dist/services/api.service.d.ts +8 -2
- package/dist/services/api.service.d.ts.map +1 -1
- package/dist/services/api.service.js.map +1 -1
- package/dist/{rrweb/exporter.d.ts → services/socket.service.d.ts} +12 -3
- package/dist/services/socket.service.d.ts.map +1 -0
- package/dist/{rrweb/exporter.js → services/socket.service.js} +41 -5
- package/dist/services/socket.service.js.map +1 -0
- package/dist/sessionRecorder.d.ts +6 -2
- package/dist/sessionRecorder.d.ts.map +1 -1
- package/dist/sessionRecorder.js +33 -3
- package/dist/sessionRecorder.js.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +1 -0
- package/dist/types/index.js.map +1 -1
- package/dist/types/sessionRecorder.d.ts +5 -0
- package/dist/types/sessionRecorder.d.ts.map +1 -1
- package/dist/types/sessionRecorder.js.map +1 -1
- package/package.json +3 -3
- package/dist/rrweb/exporter.d.ts.map +0 -1
- package/dist/rrweb/exporter.js.map +0 -1
package/README.md
CHANGED
|
@@ -41,9 +41,9 @@ The Multiplayer Full Stack Session Recorder is a powerful tool that offers deep
|
|
|
41
41
|
### Installation
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
|
-
npm i @multiplayer-app/session-recorder-browser
|
|
44
|
+
npm i @multiplayer-app/session-recorder-browser
|
|
45
45
|
# or
|
|
46
|
-
yarn add @multiplayer-app/session-recorder-browser
|
|
46
|
+
yarn add @multiplayer-app/session-recorder-browser
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
## Set up web client:
|
|
@@ -70,7 +70,12 @@ SessionRecorder.init({
|
|
|
70
70
|
propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')],
|
|
71
71
|
})
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
|
|
74
|
+
// Use session attributes to attach user context to recordings.
|
|
75
|
+
// The provided `userName` and `userId` will be visible in the Multiplayer
|
|
76
|
+
// sessions list and in the session details (shown as the reporter),
|
|
77
|
+
// making it easier to identify who reported or recorded the session.
|
|
78
|
+
|
|
74
79
|
SessionRecorder.setSessionAttributes({
|
|
75
80
|
userId: '12345',
|
|
76
81
|
userName: 'John Doe'
|
|
@@ -220,14 +225,9 @@ SessionRecorder.setSessionAttributes({
|
|
|
220
225
|
// optionally control via API (widget is enabled by default)
|
|
221
226
|
// if you're not using widget (see: `showWidget: true/false`)
|
|
222
227
|
// then you can programatically control the session recorder
|
|
223
|
-
// by using the
|
|
224
|
-
|
|
225
|
-
// Option A: fire-and-forget (simple)
|
|
226
|
-
// SessionRecorder.start()
|
|
227
|
-
// ... later ...
|
|
228
|
-
// SessionRecorder.stop('Finished session')
|
|
228
|
+
// by using the method below
|
|
229
229
|
|
|
230
|
-
//
|
|
230
|
+
// Wire up your own UI controls
|
|
231
231
|
const startButton = document.getElementById('start')
|
|
232
232
|
const pauseButton = document.getElementById('pause')
|
|
233
233
|
const resumeButton = document.getElementById('resume')
|
|
@@ -337,12 +337,42 @@ activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO
|
|
|
337
337
|
activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO_SAVE_REASON, 'Some reason')
|
|
338
338
|
```
|
|
339
339
|
|
|
340
|
-
##
|
|
340
|
+
## Framework-Specific Integrations
|
|
341
|
+
|
|
342
|
+
The Multiplayer Session Recorder works with any web framework, but we provide specialized packages and examples for popular frameworks to make integration easier.
|
|
343
|
+
|
|
344
|
+
### React & Next.js
|
|
345
|
+
|
|
346
|
+
For React and Next.js applications, use the dedicated React package which includes idiomatic hooks, context helpers, and navigation tracking:
|
|
347
|
+
|
|
348
|
+
- **Package**: [@multiplayer-app/session-recorder-react](../session-recorder-react/README.md)
|
|
349
|
+
- **Features**: React hooks, context providers, error boundaries, and Next.js integration tips
|
|
350
|
+
- **Documentation**: [React/Next.js Integration Guide](../session-recorder-react/README.md)
|
|
351
|
+
|
|
352
|
+
### Vue.js
|
|
353
|
+
|
|
354
|
+
For Vue.js applications, use the browser package directly. We provide comprehensive examples and integration guides:
|
|
355
|
+
|
|
356
|
+
- **Package**: `@multiplayer-app/session-recorder-browser` (this package)
|
|
357
|
+
- **Examples**: [Vue.js Example Application](./examples/vue/README.md)
|
|
358
|
+
- **Features**: Plugin-based integration, composables, Vue Router integration, and HTTP client support
|
|
359
|
+
|
|
360
|
+
### Angular
|
|
361
|
+
|
|
362
|
+
For Angular applications, use the browser package with Angular-specific setup. We provide detailed examples and integration guides:
|
|
363
|
+
|
|
364
|
+
- **Package**: `@multiplayer-app/session-recorder-browser` (this package)
|
|
365
|
+
- **Examples**: [Angular Example Application](./examples/angular/README.md)
|
|
366
|
+
- **Features**: Service-based integration, app initializer setup, Angular HttpClient integration, and router support
|
|
367
|
+
|
|
368
|
+
### React Native
|
|
341
369
|
|
|
342
|
-
|
|
370
|
+
For React Native applications (iOS and Android), use the dedicated React Native package:
|
|
343
371
|
|
|
344
|
-
-
|
|
345
|
-
-
|
|
372
|
+
- **Package**: [@multiplayer-app/session-recorder-react-native](../session-recorder-react-native/README.md)
|
|
373
|
+
- **Features**: Native screen recording, gesture tracking, navigation monitoring, and full-stack debugging
|
|
374
|
+
- **Documentation**: [React Native Integration Guide](../session-recorder-react-native/README.md)
|
|
375
|
+
- **Note**: Does not support React Native Web - use the browser package for web platforms
|
|
346
376
|
|
|
347
377
|
## Documentation
|
|
348
378
|
|