@multiplayer-app/session-recorder-browser 1.2.29 → 1.2.30

package/README.md

@@ -339,66 +339,6 @@ activeSpan.setAttribute(SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO
 
 ## Session Recorder for Next.js
 
-To integrate the MySessionRecorder component into your Next.js application, follow these steps:
-
-- Create a new file (e.g., MySessionRecorder.js or MySessionRecorder.tsx) in your root directory or a components directory.
-
-- Import the component
-
-In the newly created file, add the following code:
-
-```javascript
-'use client' // Mark as Client Component
-import { useEffect } from 'react'
-import SessionRecorder from '@multiplayer-app/session-recorder-browser'
-
-export default function MySessionRecorder() {
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      SessionRecorder.init({
-        version: '{YOUR_APPLICATION_VERSION}',
-        application: '{YOUR_APPLICATION_NAME}',
-        environment: '{YOUR_APPLICATION_ENVIRONMENT}',
-        apiKey: '{YOUR_API_KEY}',
-        recordCanvas: true, // Enable canvas recording
-        masking: {
-          maskAllInputs: true,
-          maskInputOptions: {
-            password: true,
-            email: false,
-            tel: false
-          }
-        }
-      })
-
-      SessionRecorder.setSessionAttributes({
-        userId: '{userId}',
-        userName: '{userName}'
-      })
-    }
-  }, [])
-
-  return null // No UI output needed
-}
-```
-
-Replace the placeholders with the actual information.
-
-Now, you can use the MySessionRecorder component in your application by adding it to your desired page or layout file:
-
-```javascript
-import MySessionRecorder from './MySessionRecorder' // Adjust the path as necessary
-
-export default function MyApp() {
-  return (
-    <>
-      <MySessionRecorder />
-      {/* Other components */}
-    </>
-  )
-}
-```
-
 ### Next.js 15.3+ (App Router) — instrumentation-client.ts
 
 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).

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.29" || 0;
+const PACKAGE_VERSION_EXPORT = "1.2.30" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -26369,91 +26369,93 @@ function _headersInitToObject(headersInit) {
     }
     return result;
 }
-// Store original fetch
-const originalFetch = window.fetch;
-// Override fetch
-window.fetch = async function (input, 
-// eslint-disable-next-line
-init) {
-    const networkRequest = {};
-    // Capture request data
-    const inputIsRequest = typeof Request !== 'undefined' && input instanceof Request;
-    const safeToConstructRequest = !inputIsRequest || !input.bodyUsed;
-    // Only construct a new Request when it's safe (i.e., body not already used)
-    let requestForMetadata = null;
-    if (safeToConstructRequest) {
-        try {
-            requestForMetadata = new Request(input, init);
-        }
-        catch (_a) {
-            // If construction fails for any reason, fall back to using available data
-            requestForMetadata = null;
-        }
-    }
-    if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.recordRequestHeaders) {
-        if (requestForMetadata) {
-            networkRequest.requestHeaders = _headersToObject(requestForMetadata.headers);
-        }
-        else if (inputIsRequest) {
-            networkRequest.requestHeaders = _headersToObject(input.headers);
-        }
-        else {
-            networkRequest.requestHeaders = _headersInitToObject(init === null || init === void 0 ? void 0 : init.headers);
-        }
-    }
-    if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.shouldRecordBody) {
-        // Prefer reading from the safely constructed Request; else fallback to init.body
-        const urlStr = inputIsRequest
-            ? input.url
-            : (typeof input === 'string' || input instanceof URL ? String(input) : '');
-        const candidateBody = requestForMetadata
-            ? requestForMetadata.body
-            : (inputIsRequest ? init === null || init === void 0 ? void 0 : init.body : init === null || init === void 0 ? void 0 : init.body);
-        if (!(0,_utils_type_utils__WEBPACK_IMPORTED_MODULE_0__.isNullish)(candidateBody)) {
-            const requestBody = _tryReadFetchBody({
-                body: candidateBody,
-                url: urlStr,
-            });
-            if ((requestBody === null || requestBody === void 0 ? void 0 : requestBody.length) &&
-                new Blob([requestBody]).size <= _configs__WEBPACK_IMPORTED_MODULE_2__.configs.maxCapturingHttpPayloadSize) {
-                networkRequest.requestBody = requestBody;
+if (typeof window !== 'undefined' && typeof window.fetch !== 'undefined') {
+    // Store original fetch
+    const originalFetch = window.fetch;
+    // Override fetch
+    window.fetch = async function (input, 
+    // eslint-disable-next-line
+    init) {
+        const networkRequest = {};
+        // Capture request data
+        const inputIsRequest = typeof Request !== 'undefined' && input instanceof Request;
+        const safeToConstructRequest = !inputIsRequest || !input.bodyUsed;
+        // Only construct a new Request when it's safe (i.e., body not already used)
+        let requestForMetadata = null;
+        if (safeToConstructRequest) {
+            try {
+                requestForMetadata = new Request(input, init);
+            }
+            catch (_a) {
+                // If construction fails for any reason, fall back to using available data
+                requestForMetadata = null;
             }
         }
-    }
-    try {
-        // Make the actual fetch request
-        const response = await originalFetch(input, init);
-        // Capture response data
-        if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.recordResponseHeaders) {
-            networkRequest.responseHeaders = _headersToObject(response.headers);
+        if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.recordRequestHeaders) {
+            if (requestForMetadata) {
+                networkRequest.requestHeaders = _headersToObject(requestForMetadata.headers);
+            }
+            else if (inputIsRequest) {
+                networkRequest.requestHeaders = _headersToObject(input.headers);
+            }
+            else {
+                networkRequest.requestHeaders = _headersInitToObject(init === null || init === void 0 ? void 0 : init.headers);
+            }
         }
         if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.shouldRecordBody) {
-            const responseBody = await _tryReadResponseBody(response);
-            if ((responseBody === null || responseBody === void 0 ? void 0 : responseBody.length) &&
-                new Blob([responseBody]).size <= _configs__WEBPACK_IMPORTED_MODULE_2__.configs.maxCapturingHttpPayloadSize) {
-                networkRequest.responseBody = responseBody;
+            // Prefer reading from the safely constructed Request; else fallback to init.body
+            const urlStr = inputIsRequest
+                ? input.url
+                : (typeof input === 'string' || input instanceof URL ? String(input) : '');
+            const candidateBody = requestForMetadata
+                ? requestForMetadata.body
+                : (inputIsRequest ? init === null || init === void 0 ? void 0 : init.body : init === null || init === void 0 ? void 0 : init.body);
+            if (!(0,_utils_type_utils__WEBPACK_IMPORTED_MODULE_0__.isNullish)(candidateBody)) {
+                const requestBody = _tryReadFetchBody({
+                    body: candidateBody,
+                    url: urlStr,
+                });
+                if ((requestBody === null || requestBody === void 0 ? void 0 : requestBody.length) &&
+                    new Blob([requestBody]).size <= _configs__WEBPACK_IMPORTED_MODULE_2__.configs.maxCapturingHttpPayloadSize) {
+                    networkRequest.requestBody = requestBody;
+                }
             }
         }
-        // Attach network request data to the response for later access
-        // @ts-ignore
-        response.networkRequest = networkRequest;
-        return response;
-    }
-    catch (error) {
-        // Even if the fetch fails, we can still capture the request data
-        // Attach captured request data to the thrown error for downstream handling
-        // @ts-ignore
-        if (error && typeof error === 'object') {
+        try {
+            // Make the actual fetch request
+            const response = await originalFetch(input, init);
+            // Capture response data
+            if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.recordResponseHeaders) {
+                networkRequest.responseHeaders = _headersToObject(response.headers);
+            }
+            if (_configs__WEBPACK_IMPORTED_MODULE_2__.configs.shouldRecordBody) {
+                const responseBody = await _tryReadResponseBody(response);
+                if ((responseBody === null || responseBody === void 0 ? void 0 : responseBody.length) &&
+                    new Blob([responseBody]).size <= _configs__WEBPACK_IMPORTED_MODULE_2__.configs.maxCapturingHttpPayloadSize) {
+                    networkRequest.responseBody = responseBody;
+                }
+            }
+            // Attach network request data to the response for later access
             // @ts-ignore
-            error.networkRequest = networkRequest;
+            response.networkRequest = networkRequest;
+            return response;
         }
-        throw error;
-    }
-};
-// Preserve the original fetch function's properties
-Object.setPrototypeOf(window.fetch, originalFetch);
-Object.defineProperty(window.fetch, 'name', { value: 'fetch' });
-Object.defineProperty(window.fetch, 'length', { value: originalFetch.length });
+        catch (error) {
+            // Even if the fetch fails, we can still capture the request data
+            // Attach captured request data to the thrown error for downstream handling
+            // @ts-ignore
+            if (error && typeof error === 'object') {
+                // @ts-ignore
+                error.networkRequest = networkRequest;
+            }
+            throw error;
+        }
+    };
+    // Preserve the original fetch function's properties
+    Object.setPrototypeOf(window.fetch, originalFetch);
+    Object.defineProperty(window.fetch, 'name', { value: 'fetch' });
+    Object.defineProperty(window.fetch, 'length', { value: originalFetch.length });
+}
 
 
 /***/ }),
@@ -27287,7 +27289,7 @@ class SessionRecorder extends lib0_observable__WEBPACK_IMPORTED_MODULE_14__.Obse
      *
      * This element is used to control the start/stop recording functionality in the session widget UI.
      *
-     * @returns {HTMLButtonElement} The recorder button element from the session widget.
+     * @returns {HTMLButtonElement | null} The recorder button element from the session widget.
      */
     get sessionWidgetButtonElement() {
         return this._sessionWidget.recorderButton;
@@ -27315,10 +27317,12 @@ class SessionRecorder extends lib0_observable__WEBPACK_IMPORTED_MODULE_14__.Obse
          * Error message getter and setter
          */
         this._error = '';
-        const sessionLocal = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_PROP_NAME, true);
-        const sessionIdLocal = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_ID_PROP_NAME);
-        const sessionStateLocal = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_STATE_PROP_NAME);
-        const sessionTypeLocal = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_TYPE_PROP_NAME);
+        // Safety: avoid accessing storage in SSR/non-browser environments
+        const isBrowser = typeof window !== 'undefined';
+        const sessionLocal = isBrowser ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_PROP_NAME, true) : null;
+        const sessionIdLocal = isBrowser ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_ID_PROP_NAME) : null;
+        const sessionStateLocal = isBrowser ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_STATE_PROP_NAME) : null;
+        const sessionTypeLocal = isBrowser ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getStoredItem)(_config__WEBPACK_IMPORTED_MODULE_4__.SESSION_TYPE_PROP_NAME) : null;
         if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isSessionActive)(sessionLocal, sessionTypeLocal)) {
             this.session = sessionLocal;
             this.sessionId = sessionIdLocal;
@@ -27341,6 +27345,9 @@ class SessionRecorder extends lib0_observable__WEBPACK_IMPORTED_MODULE_14__.Obse
      * @param configs - custom configurations for session debugger
      */
     init(configs) {
+        if (typeof window === 'undefined') {
+            return;
+        }
         this._configs = (0,_config__WEBPACK_IMPORTED_MODULE_4__.getSessionRecorderConfig)({ ...this._configs, ...configs });
         this._isInitialized = true;
         this._checkOperation('init');
@@ -28321,13 +28328,13 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this._isStarted = false;
         this._isPaused = false;
         this._isInitialized = false;
-        this._recorderPlacement = '';
         this._error = '';
-        this._initialPopoverVisible = false;
+        this._recorderPlacement = '';
         this._finalPopoverVisible = false;
-        this._buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
+        this._initialPopoverVisible = false;
         this._continuousRecording = false;
         this._showContinuousRecording = true;
+        this._buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
         this._widgetTextOverrides = _config__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_WIDGET_TEXT_CONFIG;
         this.commentTextarea = null;
         this.dragManager = null;
@@ -28353,21 +28360,6 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
                 }
             }
         };
-        this.recorderButton = document.createElement('button');
-        this.initialPopover = document.createElement('div');
-        this.finalPopover = document.createElement('div');
-        this.overlay = document.createElement('div');
-        this.toast = document.createElement('div');
-        this.submitSessionDialog = document.createElement('div');
-        this.uiManager = new _UIManager__WEBPACK_IMPORTED_MODULE_5__.UIManager(this.recorderButton, this.initialPopover, this.finalPopover, this.overlay, this.submitSessionDialog, this.toast, _config__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_WIDGET_TEXT_CONFIG, true);
-        this.uiManager.setRecorderButtonProps();
-        this.uiManager.setInitialPopoverProps();
-        this.uiManager.setFinalPopoverProps();
-        this.uiManager.setOverlayProps();
-        this.uiManager.setSubmitSessionDialogProps();
-        this.uiManager.setToastProps();
-        this.commentTextarea = this.finalPopover.querySelector('.mp-session-debugger-popover-textarea');
-        this.observeButtonDraggableMode();
     }
     updateState(state, continuousRecording) {
         this._continuousRecording = continuousRecording;
@@ -28438,9 +28430,32 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
             }
         });
     }
+    initUiManager() {
+        this.recorderButton = document.createElement('button');
+        this.initialPopover = document.createElement('div');
+        this.finalPopover = document.createElement('div');
+        this.overlay = document.createElement('div');
+        this.toast = document.createElement('div');
+        this.submitSessionDialog = document.createElement('div');
+        // Recreate UIManager with proper config
+        this.uiManager = new _UIManager__WEBPACK_IMPORTED_MODULE_5__.UIManager(this.recorderButton, this.initialPopover, this.finalPopover, this.overlay, this.submitSessionDialog, this.toast, this._widgetTextOverrides, this._showContinuousRecording);
+        // Re-initialize templates with new config
+        this.uiManager.setRecorderButtonProps();
+        this.uiManager.setInitialPopoverProps();
+        this.uiManager.setFinalPopoverProps();
+        this.uiManager.setOverlayProps();
+        this.uiManager.setSubmitSessionDialogProps();
+        this.uiManager.setToastProps();
+        this.commentTextarea = this.finalPopover.querySelector('.mp-session-debugger-popover-textarea');
+        this.observeButtonDraggableMode();
+    }
     init(options) {
         if (this._isInitialized)
             return;
+        // Safety guard: avoid DOM access in SSR/non-browser environments
+        if (typeof document === 'undefined') {
+            return;
+        }
         this._isInitialized = true;
         this.showRecorderButton = options.showWidget;
         this._showContinuousRecording = options.showContinuousRecording;
@@ -28448,15 +28463,7 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
             ...this._widgetTextOverrides,
             ...options.widgetTextOverrides,
         };
-        // Recreate UIManager with proper config
-        this.uiManager = new _UIManager__WEBPACK_IMPORTED_MODULE_5__.UIManager(this.recorderButton, this.initialPopover, this.finalPopover, this.overlay, this.submitSessionDialog, this.toast, this._widgetTextOverrides, this._showContinuousRecording);
-        // Re-initialize templates with new config
-        this.uiManager.setRecorderButtonProps();
-        this.uiManager.setInitialPopoverProps();
-        this.uiManager.setFinalPopoverProps();
-        this.uiManager.setOverlayProps();
-        this.uiManager.setSubmitSessionDialogProps();
-        this.uiManager.setToastProps();
+        this.initUiManager();
         const elements = [this.toast];
         if (options.showWidget) {
             elements.push(this.recorderButton, this.initialPopover, this.finalPopover, this.submitSessionDialog);
@@ -29596,20 +29603,30 @@ __webpack_require__.r(__webpack_exports__);
 /**
  * LocalStorage utility functions
  */
+const hasLocalStorage = typeof window !== 'undefined' && !!window.localStorage;
 const getStoredItem = (key, parse) => {
-    const item = localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem(key);
+    if (!hasLocalStorage) {
+        return parse ? null : null;
+    }
+    const item = window.localStorage.getItem(key);
     return parse ? (item ? JSON.parse(item) : null) : item;
 };
 const setStoredItem = (key, value) => {
+    if (!hasLocalStorage) {
+        return;
+    }
     if (value === null || value === undefined) {
-        localStorage === null || localStorage === void 0 ? void 0 : localStorage.removeItem(key);
+        window.localStorage.removeItem(key);
     }
     else {
-        localStorage === null || localStorage === void 0 ? void 0 : localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value));
+        window.localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value));
     }
 };
 const removeStoredItem = (key) => {
-    localStorage === null || localStorage === void 0 ? void 0 : localStorage.removeItem(key);
+    if (!hasLocalStorage) {
+        return;
+    }
+    window.localStorage.removeItem(key);
 };
 
 
@@ -49256,12 +49273,29 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const SessionRecorderInstance = new _sessionRecorder__WEBPACK_IMPORTED_MODULE_3__.SessionRecorder();
-// Attach the instance to the global object (window in browser)
-if (typeof window !== 'undefined') {
-    window['__SESSION_RECORDER_LOADED'] = true;
-    window['SessionRecorder'] = SessionRecorderInstance;
-    (0,_listeners__WEBPACK_IMPORTED_MODULE_1__.setupListeners)(SessionRecorderInstance);
+// Create or reuse a single global instance, but be safe in non-browser environments
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+// Prefer globalThis when available; fall back to window in browsers
+const globalObj = typeof globalThis !== 'undefined'
+    ? globalThis
+    : (isBrowser ? window : {});
+let SessionRecorderInstance;
+if (isBrowser) {
+    // Reuse existing instance if already injected (e.g., by an extension)
+    const existing = globalObj['SessionRecorder'];
+    SessionRecorderInstance = existing !== null && existing !== void 0 ? existing : new _sessionRecorder__WEBPACK_IMPORTED_MODULE_3__.SessionRecorder();
+    // Attach to the global object for reuse across bundles/loads
+    globalObj['SessionRecorder'] = SessionRecorderInstance;
+    globalObj['__SESSION_RECORDER_LOADED'] = true;
+    // Ensure listeners are set up only once
+    if (!globalObj['__SESSION_RECORDER_LISTENERS_SETUP__']) {
+        (0,_listeners__WEBPACK_IMPORTED_MODULE_1__.setupListeners)(SessionRecorderInstance);
+        globalObj['__SESSION_RECORDER_LISTENERS_SETUP__'] = true;
+    }
+}
+else {
+    // SSR / non-DOM environments: create an instance but don't touch globals or listeners
+    SessionRecorderInstance = new _sessionRecorder__WEBPACK_IMPORTED_MODULE_3__.SessionRecorder();
 }
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SessionRecorderInstance);