@multiplayer-app/session-recorder-browser 1.2.35 → 1.2.37

package/README.md

@@ -41,9 +41,9 @@ The Multiplayer Full Stack Session Recorder is a powerful tool that offers deep
 ### Installation
 
 ```bash
-npm i @multiplayer-app/session-recorder-browser @opentelemetry/api
+npm i @multiplayer-app/session-recorder-browser
 # or
-yarn add @multiplayer-app/session-recorder-browser @opentelemetry/api
+yarn add @multiplayer-app/session-recorder-browser
 ```
 
 ## Set up web client:
@@ -70,7 +70,12 @@ SessionRecorder.init({
   propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')],
 })
 
-// add any key value pairs which should be associated with a session
+
+// Use session attributes to attach user context to recordings.
+// The provided `userName` and `userId` will be visible in the Multiplayer
+// sessions list and in the session details (shown as the reporter),
+// making it easier to identify who reported or recorded the session.
+
 SessionRecorder.setSessionAttributes({
   userId: '12345',
   userName: 'John Doe'
@@ -220,14 +225,9 @@ SessionRecorder.setSessionAttributes({
 // optionally control via API (widget is enabled by default)
 // if you're not using widget (see: `showWidget: true/false`)
 // then you can programatically control the session recorder
-// by using the methods below
-
-// Option A: fire-and-forget (simple)
-// SessionRecorder.start()
-// ... later ...
-// SessionRecorder.stop('Finished session')
+// by using the method below
 
-// Option B: wire up your own UI controls
+// Wire up your own UI controls
 const startButton = document.getElementById('start')
 const pauseButton = document.getElementById('pause')
 const resumeButton = document.getElementById('resume')
@@ -337,12 +337,42 @@ activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO
 activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO_SAVE_REASON, 'Some reason')
 ```
 
-## Session Recorder for Next.js
+## Framework-Specific Integrations
+
+The Multiplayer Session Recorder works with any web framework, but we provide specialized packages and examples for popular frameworks to make integration easier.
+
+### React & Next.js
+
+For React and Next.js applications, use the dedicated React package which includes idiomatic hooks, context helpers, and navigation tracking:
+
+- **Package**: [@multiplayer-app/session-recorder-react](../session-recorder-react/README.md)
+- **Features**: React hooks, context providers, error boundaries, and Next.js integration tips
+- **Documentation**: [React/Next.js Integration Guide](../session-recorder-react/README.md)
+
+### Vue.js
+
+For Vue.js applications, use the browser package directly. We provide comprehensive examples and integration guides:
+
+- **Package**: `@multiplayer-app/session-recorder-browser` (this package)
+- **Examples**: [Vue.js Example Application](./examples/vue/README.md)
+- **Features**: Plugin-based integration, composables, Vue Router integration, and HTTP client support
+
+### Angular
+
+For Angular applications, use the browser package with Angular-specific setup. We provide detailed examples and integration guides:
+
+- **Package**: `@multiplayer-app/session-recorder-browser` (this package)
+- **Examples**: [Angular Example Application](./examples/angular/README.md)
+- **Features**: Service-based integration, app initializer setup, Angular HttpClient integration, and router support
+
+### React Native
 
-Use the React wrapper for Next.js. It includes idiomatic Next.js guidance and helpers:
+For React Native applications (iOS and Android), use the dedicated React Native package:
 
-- React package: [@multiplayer-app/session-recorder-react](../session-recorder-react/README.md)
-- Next.js guide: [Next.js integration tips](../session-recorder-react/README.md#nextjs-integration-tips)
+- **Package**: [@multiplayer-app/session-recorder-react-native](../session-recorder-react-native/README.md)
+- **Features**: Native screen recording, gesture tracking, navigation monitoring, and full-stack debugging
+- **Documentation**: [React Native Integration Guide](../session-recorder-react-native/README.md)
+- **Note**: Does not support React Native Web - use the browser package for web platforms
 
 ## Documentation
 

package/dist/browser/index.js

@@ -25094,7 +25094,7 @@ const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000;
 const SESSION_RESPONSE = 'multiplayer-debug-session-response';
 const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
 const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
-const PACKAGE_VERSION_EXPORT = "1.2.35" || 0;
+const PACKAGE_VERSION_EXPORT = "1.2.37" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -25748,6 +25748,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   extractResponseBody: () => (/* binding */ extractResponseBody),
+/* harmony export */   getElementTextContent: () => (/* binding */ getElementTextContent),
 /* harmony export */   getExporterEndpoint: () => (/* binding */ getExporterEndpoint),
 /* harmony export */   headersToObject: () => (/* binding */ headersToObject),
 /* harmony export */   processBody: () => (/* binding */ processBody),
@@ -25956,6 +25957,9 @@ const getExporterEndpoint = (exporterEndpoint) => {
     const trimmedExporterEndpoint = new URL(exporterEndpoint).origin;
     return `${trimmedExporterEndpoint}/v1/traces`;
 };
+const getElementTextContent = (element) => {
+    return String(element.textContent || element.ariaLabel || '').trim();
+};
 
 
 /***/ }),
@@ -25998,7 +26002,6 @@ __webpack_require__.r(__webpack_exports__);
 
 class TracerBrowserSDK {
     constructor() {
-        this.allowedElements = new Set(['A', 'BUTTON']);
         this.sessionId = '';
         this.globalErrorListenersRegistered = false;
     }
@@ -26128,11 +26131,10 @@ class TracerBrowserSDK {
                             if (span['parentSpanContext']) {
                                 return true;
                             }
-                            let textContent = '';
-                            if (this.allowedElements.has(element.tagName)) {
-                                textContent = String(element.textContent || element.ariaLabel || '').trim();
-                            }
-                            span.setAttribute('target.innerText', textContent);
+                            span.setAttribute('target.innerText', (0,_helpers__WEBPACK_IMPORTED_MODULE_3__.getElementTextContent)(element));
+                            Array.from(element.attributes).forEach(attribute => {
+                                span.setAttribute(`target.attribute.${attribute.name}`, attribute.value);
+                            });
                             return false;
                         },
                     },