@devskin/browser-sdk 1.0.3 → 1.0.5

package/dist/devskin.umd.js

@@ -4989,6 +4989,7 @@
             this.events = [];
             this.onEventsReady = null;
             this.flushInterval = null;
+            this.hasFullSnapshot = false;
             this.sessionId = sessionId;
             this.config = config;
             this.onEventsReady = onEventsReady;
@@ -5006,9 +5007,15 @@
                 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();
                         }
                     },
@@ -5048,8 +5055,9 @@
                     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);
@@ -5069,8 +5077,11 @@
                 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();
             }
         }
@@ -5135,6 +5146,13 @@
             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,
@@ -5264,6 +5282,7 @@
             this.sessionId = null;
             this.userId = null;
             this.anonymousId = null;
+            this.sessionStartTime = 0;
             this.initialized = false;
             // Collectors
             this.deviceCollector = null;
@@ -5293,12 +5312,12 @@
             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();
@@ -5458,6 +5477,7 @@
         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);
         }
@@ -5497,10 +5517,20 @@
         }
         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
             });
         }
     }