@devskin/browser-sdk 1.0.34 → 1.0.36

package/dist/devskin.esm.js

@@ -13419,15 +13419,20 @@ record.takeFullSnapshot = (isCheckout) => {
 record.mirror = mirror;
 
 class RRWebRecorder {
-    constructor(sessionId, config, onEventsReady) {
+    constructor(sessionId, config, onEventsReady, sessionStartTime = 0) {
         this.stopFn = null;
         this.events = [];
         this.onEventsReady = null;
         this.flushInterval = null;
         this.hasFullSnapshot = false;
+        this.sessionStartTime = 0; // Session start time (for relative timestamps)
+        this.recordingStartTime = 0; // When this recorder instance started
         this.sessionId = sessionId;
         this.config = config;
         this.onEventsReady = onEventsReady;
+        this.sessionStartTime = sessionStartTime || Date.now();
+        this.recordingStartTime = Date.now();
+        console.log(`[RRWeb] Recording initialized - session started at ${this.sessionStartTime}, recording started at ${this.recordingStartTime}`);
     }
     start() {
         if (!this.config.enabled) {
@@ -13441,6 +13446,13 @@ class RRWebRecorder {
         try {
             this.stopFn = record({
                 emit: (event) => {
+                    // Convert absolute timestamps to relative to session start
+                    // This ensures continuity across page navigations within same session
+                    const originalTimestamp = event.timestamp;
+                    event.timestamp = event.timestamp - this.sessionStartTime;
+                    if (this.config.enabled && event.type === 2) {
+                        console.log(`[RRWeb] FullSnapshot - original: ${originalTimestamp}, relative: ${event.timestamp}, session start: ${this.sessionStartTime}`);
+                    }
                     this.events.push(event);
                     // Check if this is a FullSnapshot (type 2)
                     if (event.type === 2) {
@@ -13926,6 +13938,7 @@ class DevSkinSDK {
             // Initialize session recording with rrweb
             if ((_a = this.config.sessionRecording) === null || _a === void 0 ? void 0 : _a.enabled) {
                 // Use RRWebRecorder for complete DOM recording
+                // Pass sessionStartTime to ensure timestamp continuity across page navigations
                 this.rrwebRecorder = new RRWebRecorder(this.sessionId, {
                     enabled: true,
                     sampleRate: this.config.sessionRecording.sampling || 0.5,
@@ -13948,7 +13961,8 @@ class DevSkinSDK {
                     var _a;
                     // Send rrweb events to backend
                     (_a = this.transport) === null || _a === void 0 ? void 0 : _a.sendRecordingEvents(this.sessionId, events);
-                });
+                }, this.sessionStartTime // Pass session start time for timestamp continuity
+                );
                 // Start recording immediately (session already created)
                 this.rrwebRecorder.start();
                 if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
@@ -14174,6 +14188,7 @@ class DevSkinSDK {
     }
     setupUnloadTracking() {
         // CRITICAL: Flush data BEFORE page unloads to avoid losing final events
+        // IMPORTANT: NEVER clear sessionStorage - it expires naturally when tab closes
         // 1. visibilitychange - fires when tab is hidden (most reliable)
         document.addEventListener('visibilitychange', () => {
             var _a, _b;
@@ -14185,30 +14200,23 @@ class DevSkinSDK {
             }
         });
         // 2. pagehide - fires when page is being unloaded
-        window.addEventListener('pagehide', (event) => {
+        window.addEventListener('pagehide', () => {
             var _a, _b;
-            const isActualClose = !event.persisted;
-            if (isActualClose) {
-                // Tab is closing - end session
-                this.track('page_unload');
-                this.updateSessionDuration(true); // true = session ending
-                // Clear session storage since session is ending
-                sessionStorage.removeItem('devskin_session_id');
-                sessionStorage.removeItem('devskin_session_start');
-            }
-            else {
-                // Navigation - track page change
-                this.track('page_navigation');
-                this.updateSessionDuration();
-            }
-            // ALWAYS flush (whether navigation or close)
+            // Track navigation (we can't distinguish between page navigation and tab close reliably)
+            this.track('page_navigation');
+            // Update duration but DON'T mark as ending (let heartbeat timeout handle session expiry)
+            this.updateSessionDuration(false);
+            // NEVER clear sessionStorage - it persists across navigations in same tab
+            // and expires automatically when tab actually closes
+            // Flush data before page unloads
             (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.stop(); // Stop recording and flush remaining events
             (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true); // Use beacon for reliability
         });
         // 3. beforeunload - backup for older browsers
         window.addEventListener('beforeunload', () => {
             var _a, _b;
-            this.updateSessionDuration(true);
+            // Update duration but DON'T mark as ending
+            this.updateSessionDuration(false);
             (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.stop();
             (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true);
         });