@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.
Files changed (56) hide show
  1. package/README.md +44 -14
  2. package/dist/browser/index.js +340 -240
  3. package/dist/browser/index.js.map +1 -1
  4. package/dist/config/constants.d.ts +3 -0
  5. package/dist/config/constants.d.ts.map +1 -1
  6. package/dist/config/constants.js +3 -0
  7. package/dist/config/constants.js.map +1 -1
  8. package/dist/config/defaults.d.ts.map +1 -1
  9. package/dist/config/defaults.js +1 -0
  10. package/dist/config/defaults.js.map +1 -1
  11. package/dist/config/session-recorder.d.ts.map +1 -1
  12. package/dist/config/session-recorder.js +2 -0
  13. package/dist/config/session-recorder.js.map +1 -1
  14. package/dist/exporters/index.js +182 -114
  15. package/dist/exporters/index.js.map +1 -1
  16. package/dist/exporters.d.ts +1 -1
  17. package/dist/exporters.d.ts.map +1 -1
  18. package/dist/exporters.js +1 -1
  19. package/dist/exporters.js.map +1 -1
  20. package/dist/index.js +338 -239
  21. package/dist/index.js.map +1 -1
  22. package/dist/index.umd.js +338 -239
  23. package/dist/index.umd.js.map +1 -1
  24. package/dist/otel/helpers.d.ts.map +1 -1
  25. package/dist/otel/helpers.js +1 -8
  26. package/dist/otel/helpers.js.map +1 -1
  27. package/dist/otel/index.d.ts.map +1 -1
  28. package/dist/otel/index.js +4 -0
  29. package/dist/otel/index.js.map +1 -1
  30. package/dist/patch/fetch.js +1 -0
  31. package/dist/patch/fetch.js.map +1 -1
  32. package/dist/rrweb/index.d.ts +2 -3
  33. package/dist/rrweb/index.d.ts.map +1 -1
  34. package/dist/rrweb/index.js +7 -11
  35. package/dist/rrweb/index.js.map +1 -1
  36. package/dist/services/api.service.d.ts +8 -2
  37. package/dist/services/api.service.d.ts.map +1 -1
  38. package/dist/services/api.service.js.map +1 -1
  39. package/dist/{rrweb/exporter.d.ts → services/socket.service.d.ts} +12 -3
  40. package/dist/services/socket.service.d.ts.map +1 -0
  41. package/dist/{rrweb/exporter.js → services/socket.service.js} +41 -5
  42. package/dist/services/socket.service.js.map +1 -0
  43. package/dist/sessionRecorder.d.ts +6 -2
  44. package/dist/sessionRecorder.d.ts.map +1 -1
  45. package/dist/sessionRecorder.js +33 -3
  46. package/dist/sessionRecorder.js.map +1 -1
  47. package/dist/types/index.d.ts +1 -0
  48. package/dist/types/index.d.ts.map +1 -1
  49. package/dist/types/index.js +1 -0
  50. package/dist/types/index.js.map +1 -1
  51. package/dist/types/sessionRecorder.d.ts +5 -0
  52. package/dist/types/sessionRecorder.d.ts.map +1 -1
  53. package/dist/types/sessionRecorder.js.map +1 -1
  54. package/package.json +3 -3
  55. package/dist/rrweb/exporter.d.ts.map +0 -1
  56. 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 @opentelemetry/api
44
+ npm i @multiplayer-app/session-recorder-browser
45
45
  # or
46
- yarn add @multiplayer-app/session-recorder-browser @opentelemetry/api
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
- // add any key value pairs which should be associated with a session
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 methods below
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
- // Option B: wire up your own UI controls
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
- ## Session Recorder for Next.js
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
- Use the React wrapper for Next.js. It includes idiomatic Next.js guidance and helpers:
370
+ For React Native applications (iOS and Android), use the dedicated React Native package:
343
371
 
344
- - React package: [@multiplayer-app/session-recorder-react](../session-recorder-react/README.md)
345
- - Next.js guide: [Next.js integration tips](../session-recorder-react/README.md#nextjs-integration-tips)
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