@multiplayer-app/session-recorder-browser 1.2.31 → 1.2.33

package/README.md

@@ -339,88 +339,10 @@ activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO
 
 ## Session Recorder for Next.js
 
-### Next.js 15.3+ (App Router) — instrumentation-client.ts
+Use the React wrapper for Next.js. It includes idiomatic Next.js guidance and helpers:
 
-On Next.js 15.3+ you can initialize the Session Recorder as early as possible with `src/instrumentation-client.ts|js`, which runs before hydration. You can also export `onRouterTransitionStart` to observe navigation. See the official docs: [instrumentation-client.ts](https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client).
-
-1. Create `app/instrumentation-client.ts|js`:
-
-```ts
-import SessionRecorder from '@multiplayer-app/session-recorder-browser'
-
-// Initialize as early as possible (before hydration)
-try {
-  SessionRecorder.init({
-    application: 'my-next-app',
-    version: '1.0.0',
-    environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'production',
-    apiKey: process.env.NEXT_PUBLIC_MULTIPLAYER_API_KEY!,
-    showWidget: true,
-    // If your APIs are on different origins, add them so OTLP headers are propagated
-    // format: string | RegExp | Array
-    propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')]
-  })
-} catch (error) {
-  // Keep instrumentation resilient
-  console.warn('[SessionRecorder] init failed in instrumentation-client:', error)
-}
-
-// Optional: Next.js will call this when navigation begins
-export function onRouterTransitionStart(url: string, navigationType: 'push' | 'replace' | 'traverse') {
-  try {
-    SessionRecorder.navigation.record({
-      path: url || '/',
-      navigationType,
-      framework: 'nextjs',
-      source: 'instrumentation-client'
-    })
-  } catch (error) {
-    console.warn('[SessionRecorder] navigation record failed:', error)
-  }
-}
-```
-
-## Note
-
-If frontend domain doesn't match to backend one, set backend domain to `propagateTraceHeaderCorsUrls` parameter:
-
-```javascript
-import SessionRecorder from '@multiplayer-app/session-recorder-browser'
-try {
-  SessionRecorder.init({
-    application: 'my-next-app',
-    version: '1.0.0',
-    environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'production',
-    apiKey: process.env.NEXT_PUBLIC_MULTIPLAYER_API_KEY!,
-    propagateTraceHeaderCorsUrls: new RegExp(`https://your.backend.api.domain`, 'i')
-  })
-} catch (error) {
-  console.warn('[SessionRecorder] init failed:', error)
-}
-```
-
-If frontend sends api requests to two or more different domains put them to `propagateTraceHeaderCorsUrls` as array:
-
-```javascript
-import SessionRecorder from '@multiplayer-app/session-recorder-browser'
-
-try {
-  SessionRecorder.init({
-    // ... other config ...
-    propagateTraceHeaderCorsUrls: [
-      new RegExp(`https://your.backend.api.domain`, 'i'),
-      new RegExp(`https://another.backend.api.domain`, 'i')
-    ]
-  })
-} catch (error) {
-  console.warn('[SessionRecorder] init failed:', error)
-}
-```
-
-### Framework notes
-
-- Next.js: initialize the browser SDK in a Client Component (see example in the browser README). Ensure it runs only in the browser.
-- CORS: when your frontend calls multiple API domains, set `propagateTraceHeaderCorsUrls` to match them so parent/child spans correlate across services.
+- 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)
 
 ## 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.31" || 0;
+const PACKAGE_VERSION_EXPORT = "1.2.33" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -28249,29 +28249,36 @@ __webpack_require__.r(__webpack_exports__);
 
 class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observable {
     set buttonState(newState) {
+        var _a, _b;
         this._buttonState = newState;
+        if (!this.isBrowser)
+            return;
         const { icon, tooltip, classes, excludeClasses } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.buttonStates[newState];
         if (newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL) {
-            this.buttonDraggabilityObserver.observe(this.recorderButton, {
+            (_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
                 attributes: true,
                 attributeOldValue: true,
                 attributeFilter: ['class'],
             });
         }
         else {
-            this.buttonDraggabilityObserver.disconnect();
+            (_b = this.buttonDraggabilityObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
         }
         this.updateButton(icon, tooltip, excludeClasses, classes);
     }
     set initialPopoverVisible(v) {
         var _a;
         this._initialPopoverVisible = v;
-        (_a = this.initialPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        if (this.isBrowser) {
+            (_a = this.initialPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        }
     }
     set finalPopoverVisible(v) {
         var _a;
         this._finalPopoverVisible = v;
-        (_a = this.finalPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        if (this.isBrowser) {
+            (_a = this.finalPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
+        }
     }
     get error() {
         return this._error;
@@ -28290,6 +28297,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     }
     set isStarted(v) {
         this._isStarted = v;
+        if (!this.isBrowser)
+            return;
         if (!this.showRecorderButton && v && !this._continuousRecording) {
             this.overlay.classList.remove('hidden');
             this.makeOverlayDraggable();
@@ -28317,6 +28326,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     }
     set isPaused(v) {
         this._isPaused = v;
+        if (!this.isBrowser)
+            return;
         if (this._isInitialized && !this.showRecorderButton && v && !this._continuousRecording) {
             this.overlay.classList.add('hidden');
             this.submitSessionDialog.classList.remove('hidden');
@@ -28360,6 +28371,18 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
                 }
             }
         };
+        this.isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+        if (!this.isBrowser) {
+            // Create dummy elements for SSR to prevent crashes
+            this.recorderButton = {};
+            this.initialPopover = {};
+            this.finalPopover = {};
+            this.overlay = {};
+            this.toast = {};
+            this.submitSessionDialog = {};
+            this.uiManager = {};
+            return;
+        }
         this.recorderButton = document.createElement('button');
         this.initialPopover = document.createElement('div');
         this.finalPopover = document.createElement('div');
@@ -28398,6 +28421,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     updateContinuousRecordingState(checked, disabled = false) {
+        if (!this.isBrowser)
+            return;
         const toggleCheckbox = this.initialPopover.querySelector('#mp-session-debugger-continuous-debugging-checkbox');
         if (toggleCheckbox) {
             toggleCheckbox.checked = checked;
@@ -28405,6 +28430,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     updateSaveContinuousDebugSessionState(state) {
+        if (!this.isBrowser)
+            return;
         const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
         if (saveButton) {
             const { textContent, disabled } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.continuousRecordingSaveButtonStates[state];
@@ -28418,15 +28445,21 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
      * @param duration - Duration in milliseconds to show the toast (default: 10000ms)
      */
     showToast(config, duration = 10000) {
+        if (!this.isBrowser)
+            return;
         this.uiManager.showToast(config, duration);
     }
     /**
      * Hides the currently displayed toast message
      */
     hideToast() {
+        if (!this.isBrowser)
+            return;
         this.uiManager.hideToast();
     }
     observeButtonDraggableMode() {
+        if (!this.isBrowser)
+            return;
         this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
             for (const mutation of mutationsList) {
                 if (mutation.type === 'attributes' &&
@@ -28448,6 +28481,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
     init(options) {
         if (this._isInitialized)
             return;
+        if (!this.isBrowser)
+            return;
         this._isInitialized = true;
         this.showRecorderButton = options.showWidget;
         this._showContinuousRecording = options.showContinuousRecording;
@@ -28487,6 +28522,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.addEventListeners();
     }
     appendElements(elements) {
+        if (!this.isBrowser || typeof document === 'undefined')
+            return;
         const rootWrapper = document.createElement('mp-root');
         rootWrapper.classList.add('mp-root-wrapper');
         rootWrapper.setAttribute('data-rr-ignore', 'true');
@@ -28494,6 +28531,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         document.body.appendChild(rootWrapper);
     }
     addRecorderDragFunctionality() {
+        if (!this.isBrowser)
+            return;
         this.dragManager = new _dragManager__WEBPACK_IMPORTED_MODULE_2__.DragManager(this.recorderButton, this._recorderPlacement, () => {
             if (this._isPaused) {
                 this.finalPopoverVisible = true;
@@ -28502,6 +28541,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.dragManager.init();
     }
     updatePopoverPosition() {
+        if (!this.isBrowser || typeof window === 'undefined')
+            return;
         const { top, right, bottom, left } = this.recorderButton.getBoundingClientRect();
         const isDraggable = !this.recorderButton.classList.contains('no-draggable');
         const POPOVER_HEIGHT = this._isStarted ? 400 : 300;
@@ -28538,6 +28579,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         });
     }
     addEventListeners() {
+        if (!this.isBrowser)
+            return;
         const events = [];
         if (this.showRecorderButton) {
             events.push({
@@ -28595,14 +28638,20 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         });
     }
     handleStopRecording() {
+        if (!this.isBrowser)
+            return;
         this.onStop();
         this.handleUIReseting();
     }
     handleUIReseting() {
+        if (!this.isBrowser)
+            return;
         this.finalPopoverVisible = false;
         this.resetRecordingButton();
     }
     handleCloseInitialPopover() {
+        if (!this.isBrowser)
+            return;
         if (this._buttonState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.LOADING) {
             this.onCancel();
             this.uiManager.setPopoverLoadingState(false);
@@ -28611,18 +28660,26 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.buttonState = this._continuousRecording
             ? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CONTINUOUS_DEBUGGING
             : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
-        document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
     }
     handleCloseFinalPopover() {
         this.onResume();
     }
     onRequestError() {
+        if (!this.isBrowser)
+            return;
         this.initialPopoverVisible = false;
         this.finalPopoverVisible = false;
         this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
-        document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('click', this.handleClickOutside);
+        }
     }
     handleDismissRecording() {
+        if (!this.isBrowser)
+            return;
         this.onCancel();
         this.finalPopoverVisible = !this._finalPopoverVisible;
         this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
@@ -28641,6 +28698,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         (_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(event, handler);
     }
     onRecordingButtonClick(e) {
+        if (!this.isBrowser)
+            return;
         if (this.buttonClickExternalHandler) {
             const shouldPropagate = this.buttonClickExternalHandler();
             if (shouldPropagate === false) {
@@ -28672,15 +28731,17 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
                 : _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL;
             this.initialPopoverVisible = !this._initialPopoverVisible;
         }
-        if (this._initialPopoverVisible || this._finalPopoverVisible) {
-            document.addEventListener('click', this.handleClickOutside);
-        }
-        else {
-            document.removeEventListener('click', this.handleClickOutside);
+        if (typeof document !== 'undefined') {
+            if (this._initialPopoverVisible || this._finalPopoverVisible) {
+                document.addEventListener('click', this.handleClickOutside);
+            }
+            else {
+                document.removeEventListener('click', this.handleClickOutside);
+            }
         }
     }
     updateButton(innerHTML, tooltip, excludeClasses, classes) {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         (0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.recorderButton, `${innerHTML}`);
         this.recorderButton.dataset['tooltip'] = tooltip;
@@ -28711,6 +28772,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.emit('toggle', [true]);
     }
     onStop() {
+        if (!this.isBrowser)
+            return;
         if (this.showRecorderButton && !this.recorderButton)
             return;
         this.submitSessionDialog.classList.add('hidden');
@@ -28728,6 +28791,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this.emit('pause', []);
     }
     onResume() {
+        if (!this.isBrowser)
+            return;
         this.finalPopoverVisible = false;
         if (!this._continuousRecording) {
             this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.RECORDING;
@@ -28738,28 +28803,35 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     onCancel() {
+        if (!this.isBrowser)
+            return;
         this.submitSessionDialog.classList.add('hidden');
         this.emit('cancel', []);
     }
     enable() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         this.recorderButton.disabled = false;
         this.recorderButton.style.opacity = '1';
     }
     disable() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton)
             return;
         this.recorderButton.disabled = true;
         this.recorderButton.style.opacity = '0.5';
     }
     destroy() {
-        if (!this.recorderButton)
+        if (!this.isBrowser || !this.recorderButton || typeof document === 'undefined')
             return;
-        document.body.removeChild(this.recorderButton);
+        const rootWrapper = document.querySelector('.mp-root-wrapper');
+        if (rootWrapper && rootWrapper.contains(this.recorderButton)) {
+            document.body.removeChild(rootWrapper);
+        }
         document.removeEventListener('click', this.handleClickOutside);
     }
     startTimer() {
+        if (!this.isBrowser)
+            return;
         if (this.timerInterval) {
             clearInterval(this.timerInterval);
             this.timerInterval = null;
@@ -28778,6 +28850,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         }
     }
     makeOverlayDraggable() {
+        if (!this.isBrowser || typeof document === 'undefined')
+            return;
         const element = this.overlay;
         const dragHandle = element.querySelector('.mp-drag-handle');
         if (!dragHandle)