@devskin/browser-sdk 1.0.26 → 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
@@ -14126,16 +14149,23 @@ class DevSkinSDK {
         });
     }
     setupUnloadTracking() {
-        // Use pagehide event which is more reliable than beforeunload
-        window.addEventListener('pagehide', (event) => {
+        // 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;
-            // Only end session if tab is actually closing (not just navigating)
-            // persisted = false means the page is going into bfcache (navigation)
-            // persisted = true OR event doesn't exist means actual close
+            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');
-                // Only send session end if tab is actually closing
                 if (this.sessionId && this.sessionStartTime) {
                     const endedAt = new Date();
                     const durationMs = Date.now() - this.sessionStartTime;
@@ -14145,8 +14175,19 @@ class DevSkinSDK {
                     sessionStorage.removeItem('devskin_session_start');
                 }
             }
-            // Always flush pending data (whether navigation or close)
-            (_b = this.transport) === null || _b === void 0 ? void 0 : _b.flush(true); // Use beacon for reliability
+            else {
+                // Navigation - track page change
+                this.track('page_navigation');
+            }
+            // 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);
         });
     }
 }