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

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.30" || 0;
+const PACKAGE_VERSION_EXPORT = "1.2.32" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -28328,13 +28328,13 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
         this._isStarted = false;
         this._isPaused = false;
         this._isInitialized = false;
-        this._error = '';
         this._recorderPlacement = '';
-        this._finalPopoverVisible = false;
+        this._error = '';
         this._initialPopoverVisible = false;
+        this._finalPopoverVisible = false;
+        this._buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
         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;
@@ -28360,6 +28360,21 @@ 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;
@@ -28430,32 +28445,9 @@ 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;
@@ -28463,7 +28455,15 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
             ...this._widgetTextOverrides,
             ...options.widgetTextOverrides,
         };
-        this.initUiManager();
+        // 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();
         const elements = [this.toast];
         if (options.showWidget) {
             elements.push(this.recorderButton, this.initialPopover, this.finalPopover, this.submitSessionDialog);