@devskin/browser-sdk 1.0.32 → 1.0.34

package/dist/devskin.cjs.js

@@ -13585,11 +13585,12 @@ class Transport {
         // Send user identification immediately (don't queue)
         this.sendToBackend('/v1/analytics/identify', user);
     }
-    startSession(session) {
-        return __awaiter$1(this, void 0, void 0, function* () {
+    startSession(session_1) {
+        return __awaiter$1(this, arguments, void 0, function* (session, useBeacon = false) {
             // Send session start immediately to RUM endpoint
             // MUST await to ensure session is created before other requests
-            yield this.sendToBackend('/v1/rum/sessions', session);
+            // Use beacon for page unload events (more reliable)
+            yield this.sendToBackend('/v1/rum/sessions', session, useBeacon);
         });
     }
     sendError(error) {
@@ -13859,6 +13860,7 @@ class DevSkinSDK {
         this.anonymousId = null;
         this.sessionStartTime = 0;
         this.initialized = false;
+        this.heartbeatInterval = null;
         // Collectors
         this.deviceCollector = null;
         this.locationCollector = null;
@@ -13959,6 +13961,8 @@ class DevSkinSDK {
             }
             // Track initial page view
             this.trackPageView();
+            // Start heartbeat to update session duration every 30 seconds
+            this.startHeartbeat();
         }).catch((err) => {
             console.error('[DevSkin] Failed to create session:', err);
         });
@@ -14178,42 +14182,68 @@ class DevSkinSDK {
         document.addEventListener('visibilitychange', () => {
             var _a, _b;
             if (document.hidden) {
-                // User switched tabs or minimized - flush immediately
+                // User switched tabs or minimized - update duration and flush
+                this.updateSessionDuration();
                 (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.stop(); // Stop recording and flush
                 (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true); // Use beacon
             }
         });
         // 2. pagehide - fires when page is being unloaded
         window.addEventListener('pagehide', (event) => {
-            var _a, _b, _c;
+            var _a, _b;
             const isActualClose = !event.persisted;
             if (isActualClose) {
                 // Tab is closing - end session
                 this.track('page_unload');
-                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(Object.assign({ sessionId: this.sessionId, userId: this.userId || undefined, anonymousId: this.anonymousId, endedAt: endedAt.toISOString(), durationMs: durationMs, platform: 'web' }, this.getContextData()));
-                    // Clear session storage since session is ending
-                    sessionStorage.removeItem('devskin_session_id');
-                    sessionStorage.removeItem('devskin_session_start');
-                }
+                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)
-            (_b = this.rrwebRecorder) === null || _b === void 0 ? void 0 : _b.stop(); // Stop recording and flush remaining events
-            (_c = this.transport) === null || _c === void 0 ? void 0 : _c.flush(true); // Use beacon for reliability
+            (_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);
             (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.stop();
             (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true);
         });
     }
+    /**
+     * Start heartbeat to update session duration periodically
+     */
+    startHeartbeat() {
+        // Update duration every 30 seconds
+        this.heartbeatInterval = setInterval(() => {
+            this.updateSessionDuration();
+        }, 30000); // 30 seconds
+    }
+    /**
+     * Update session duration
+     */
+    updateSessionDuration(isEnding = false) {
+        var _a, _b;
+        if (!this.sessionId || !this.sessionStartTime)
+            return;
+        const durationMs = Date.now() - this.sessionStartTime;
+        const payload = Object.assign({ sessionId: this.sessionId, userId: this.userId || undefined, anonymousId: this.anonymousId, durationMs: durationMs, platform: 'web' }, this.getContextData());
+        if (isEnding) {
+            payload.endedAt = new Date().toISOString();
+        }
+        // Use beacon if ending, otherwise regular request
+        (_a = this.transport) === null || _a === void 0 ? void 0 : _a.startSession(payload, isEnding);
+        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
+            console.log('[DevSkin] Session duration updated:', durationMs, 'ms', isEnding ? '(ending)' : '');
+        }
+    }
 }
 // Create singleton instance
 const DevSkin = new DevSkinSDK();