@devskin/browser-sdk 1.0.25 → 1.0.27

package/dist/devskin.cjs.js

@@ -13484,8 +13484,8 @@ class RRWebRecorder {
                         // Send immediately to ensure FullSnapshot reaches backend first
                         this.flush();
                     }
-                    else if (this.hasFullSnapshot && this.events.length >= 50) {
-                        // After FullSnapshot, batch other events
+                    else if (this.hasFullSnapshot && this.events.length >= 20) {
+                        // After FullSnapshot, batch other events (reduced from 50 to 20)
                         this.flush();
                     }
                 },
@@ -13524,13 +13524,13 @@ class RRWebRecorder {
                 // Capture iframe content
                 recordCrossOriginIframes: false, // Security: don't record cross-origin iframes
             });
-            // Set up periodic flush (every 10 seconds)
+            // Set up periodic flush (every 2 seconds)
             // Only flush if we have FullSnapshot to ensure first batch is complete
             this.flushInterval = window.setInterval(() => {
                 if (this.hasFullSnapshot && this.events.length > 0) {
                     this.flush();
                 }
-            }, 10000);
+            }, 2000); // Reduced from 10s to 2s
             // Safety check: After 2 seconds, force a full snapshot if none captured
             setTimeout(() => {
                 if (!this.hasFullSnapshot) {
@@ -13588,8 +13588,8 @@ class Transport {
         this.config = config;
         this.queue = [];
         this.flushInterval = null;
-        this.maxQueueSize = 50;
-        this.flushIntervalMs = 5000; // 5 seconds
+        this.maxQueueSize = 20; // Reduced from 50
+        this.flushIntervalMs = 2000; // 2 seconds (reduced from 5s)
         this.apiUrl = config.apiUrl || 'https://api.devskin.com';
         // Start periodic flush
         this.startPeriodicFlush();
@@ -13614,8 +13614,8 @@ class Transport {
         this.sendToBackend('/v1/analytics/identify', user);
     }
     startSession(session) {
-        // Send session start immediately
-        this.sendToBackend('/v1/analytics/session', session);
+        // Send session start immediately to RUM endpoint
+        this.sendToBackend('/v1/rum/sessions', session);
     }
     sendError(error) {
         this.enqueue('error', error);
@@ -13626,6 +13626,12 @@ class Transport {
     sendPerformanceMetric(metric) {
         this.enqueue('performance', metric);
     }
+    sendPageView(pageViewData) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            // Send page view immediately to RUM endpoint (don't queue)
+            this.sendToBackend('/v1/rum/page-views', pageViewData);
+        });
+    }
     sendRecordingEvents(sessionId, events) {
         return __awaiter$1(this, void 0, void 0, function* () {
             // Calculate payload size
@@ -13726,17 +13732,17 @@ class Transport {
     getEndpointForType(type) {
         switch (type) {
             case 'event':
-                return '/v1/analytics/events';
+                return '/v1/rum/events';
             case 'error':
-                return '/v1/analytics/errors';
+                return '/v1/errors/errors';
             case 'network':
-                return '/v1/analytics/network';
+                return '/v1/rum/network-requests';
             case 'performance':
-                return '/v1/analytics/performance';
+                return '/v1/rum/web-vitals';
             case 'heatmap':
                 return '/v1/sdk/heatmap';
             default:
-                return '/v1/analytics/events';
+                return '/v1/rum/events';
         }
     }
     sendToBackendXHR(endpoint, data) {
@@ -13995,7 +14001,24 @@ class DevSkinSDK {
      * Track a page view
      */
     trackPageView(properties) {
+        var _a, _b;
+        if (!this.initialized) {
+            console.warn('[DevSkin] SDK not initialized. Call init() first.');
+            return;
+        }
+        // Generate unique page view ID
+        const pageViewId = this.generateId();
+        // Send to RUM page-views endpoint
+        (_a = this.transport) === null || _a === void 0 ? void 0 : _a.sendPageView(Object.assign({ sessionId: this.sessionId, pageViewId: pageViewId, url: window.location.href, path: window.location.pathname, queryParams: window.location.search, referrer: document.referrer, title: document.title, timestamp: new Date().toISOString() }, properties));
+        // Also track as analytics event for backwards compatibility
         this.track('page_view', Object.assign({ path: window.location.pathname, search: window.location.search, hash: window.location.hash, referrer: document.referrer }, properties));
+        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
+            console.log('[DevSkin] Page view tracked:', {
+                sessionId: this.sessionId,
+                pageViewId: pageViewId,
+                url: window.location.href,
+            });
+        }
     }
     /**
      * Identify a user
@@ -14064,11 +14087,32 @@ class DevSkinSDK {
      * Private methods
      */
     startSession() {
-        var _a;
+        var _a, _b, _c;
+        // Check if there's an active session (stored in sessionStorage to persist across page navigations)
+        const existingSessionId = sessionStorage.getItem('devskin_session_id');
+        const existingSessionStart = sessionStorage.getItem('devskin_session_start');
+        if (existingSessionId && existingSessionStart) {
+            // Resume existing session
+            this.sessionId = existingSessionId;
+            this.sessionStartTime = parseInt(existingSessionStart, 10);
+            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.debug) {
+                console.log('[DevSkin] Resuming existing session:', this.sessionId);
+            }
+            // Send page view but DON'T create a new session
+            // The session is already created, just continue it
+            return;
+        }
+        // Create new session
         this.sessionId = this.generateId();
         this.sessionStartTime = Date.now();
+        // Store in sessionStorage (persists across page navigations in same tab)
+        sessionStorage.setItem('devskin_session_id', this.sessionId);
+        sessionStorage.setItem('devskin_session_start', this.sessionStartTime.toString());
         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);
+        (_b = this.transport) === null || _b === void 0 ? void 0 : _b.startSession(sessionData);
+        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.debug) {
+            console.log('[DevSkin] New session created:', this.sessionId);
+        }
     }
     getContextData() {
         const context = {};
@@ -14105,17 +14149,45 @@ class DevSkinSDK {
         });
     }
     setupUnloadTracking() {
-        window.addEventListener('beforeunload', () => {
+        // CRITICAL: Flush data BEFORE page unloads to avoid losing final events
+        // 1. visibilitychange - fires when tab is hidden (most reliable)
+        document.addEventListener('visibilitychange', () => {
             var _a, _b;
-            this.track('page_unload');
-            // Send session end update with duration AND context data
-            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({ session_id: this.sessionId, user_id: this.userId || undefined, anonymous_id: this.anonymousId, ended_at: endedAt.toISOString(), duration_ms: durationMs }, this.getContextData()));
+            if (document.hidden) {
+                // User switched tabs or minimized - flush immediately
+                (_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;
+            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({ session_id: this.sessionId, user_id: this.userId || undefined, anonymous_id: this.anonymousId, ended_at: endedAt.toISOString(), duration_ms: durationMs }, this.getContextData()));
+                    // 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');
             }
-            // Send any pending data
-            (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true); // Use beacon for reliability
+            // 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
+        });
+        // 3. beforeunload - backup for older browsers
+        window.addEventListener('beforeunload', () => {
+            var _a, _b;
+            (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.stop();
+            (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true);
         });
     }
 }