@devskin/browser-sdk 1.0.3 → 1.0.5

package/dist/devskin.cjs.js

@@ -4987,6 +4987,7 @@ class RRWebRecorder {
         this.events = [];
         this.onEventsReady = null;
         this.flushInterval = null;
+        this.hasFullSnapshot = false;
         this.sessionId = sessionId;
         this.config = config;
         this.onEventsReady = onEventsReady;
@@ -5004,9 +5005,15 @@ class RRWebRecorder {
             console.log('[RRWeb] Starting session recording:', this.sessionId);
             this.stopFn = record({
                 emit: (event) => {
+                    // Check if this is a FullSnapshot (type 2)
+                    if (event.type === 2) {
+                        this.hasFullSnapshot = true;
+                        console.log('[RRWeb] FullSnapshot captured! Recording is ready.');
+                    }
                     this.events.push(event);
-                    // Flush events periodically to avoid memory buildup
-                    if (this.events.length >= 50) {
+                    // Only flush if we have the FullSnapshot
+                    // This ensures the first batch always contains the full DOM
+                    if (this.hasFullSnapshot && this.events.length >= 50) {
                         this.flush();
                     }
                 },
@@ -5046,8 +5053,9 @@ class RRWebRecorder {
                 recordCrossOriginIframes: false, // Security: don't record cross-origin iframes
             });
             // Set up periodic flush (every 10 seconds)
+            // Only flush if we have FullSnapshot to ensure first batch is complete
             this.flushInterval = window.setInterval(() => {
-                if (this.events.length > 0) {
+                if (this.hasFullSnapshot && this.events.length > 0) {
                     this.flush();
                 }
             }, 10000);
@@ -5067,8 +5075,11 @@ class RRWebRecorder {
             clearInterval(this.flushInterval);
             this.flushInterval = null;
         }
-        // Flush remaining events
+        // Flush remaining events (even without FullSnapshot, to not lose data)
         if (this.events.length > 0) {
+            if (!this.hasFullSnapshot) {
+                console.warn('[RRWeb] Flushing events without FullSnapshot - recording may not replay correctly');
+            }
             this.flush();
         }
     }
@@ -5133,6 +5144,13 @@ class Transport {
         this.enqueue('performance', metric);
     }
     sendRecordingEvents(sessionId, events) {
+        // DEBUG: Log event types being sent
+        const eventTypes = events.reduce((acc, e) => {
+            acc[e.type] = (acc[e.type] || 0) + 1;
+            return acc;
+        }, {});
+        console.log(`[DevSkin SDK] Sending ${events.length} recording events:`, eventTypes);
+        console.log(`[DevSkin SDK] First 3 events:`, events.slice(0, 3).map(e => ({ type: e.type, timestamp: e.timestamp })));
         // Recording events can be large, send immediately
         this.sendToBackend('/v1/rum/recordings', {
             session_id: sessionId,
@@ -5262,6 +5280,7 @@ class DevSkinSDK {
         this.sessionId = null;
         this.userId = null;
         this.anonymousId = null;
+        this.sessionStartTime = 0;
         this.initialized = false;
         // Collectors
         this.deviceCollector = null;
@@ -5291,12 +5310,12 @@ class DevSkinSDK {
         this.transport = new Transport(this.config);
         // Generate anonymous ID if not exists
         this.anonymousId = this.getOrCreateAnonymousId();
-        // Start session
-        this.startSession();
-        // Initialize collectors
+        // Initialize collectors BEFORE starting session (so getContextData works)
         this.deviceCollector = new DeviceCollector(this.config);
         this.locationCollector = new LocationCollector(this.config);
         this.browserCollector = new BrowserCollector(this.config);
+        // Start session (will now include device/browser/location data)
+        this.startSession();
         if (this.config.captureWebVitals) {
             this.performanceCollector = new PerformanceCollector(this.config, this.transport);
             this.performanceCollector.start();
@@ -5456,6 +5475,7 @@ class DevSkinSDK {
     startSession() {
         var _a;
         this.sessionId = this.generateId();
+        this.sessionStartTime = Date.now();
         const sessionData = Object.assign({ session_id: this.sessionId, user_id: this.userId || undefined, anonymous_id: this.anonymousId, started_at: new Date().toISOString() }, this.getContextData());
         (_a = this.transport) === null || _a === void 0 ? void 0 : _a.startSession(sessionData);
     }
@@ -5495,10 +5515,20 @@ class DevSkinSDK {
     }
     setupUnloadTracking() {
         window.addEventListener('beforeunload', () => {
-            var _a;
+            var _a, _b;
             this.track('page_unload');
+            // Send session end update with duration
+            if (this.sessionId && this.sessionStartTime) {
+                const endedAt = new Date();
+                const durationMs = Date.now() - this.sessionStartTime;
+                (_a = this.transport) === null || _a === void 0 ? void 0 : _a.startSession({
+                    session_id: this.sessionId,
+                    ended_at: endedAt.toISOString(),
+                    duration_ms: durationMs,
+                });
+            }
             // Send any pending data
-            (_a = this.transport) === null || _a === void 0 ? void 0 : _a.flush();
+            (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true); // Use beacon for reliability
         });
     }
 }