@devskin/browser-sdk 1.0.25 → 1.0.27

package/dist/devskin.umd.js

@@ -13486,8 +13486,8 @@
                             // 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();
                         }
                     },
@@ -13526,13 +13526,13 @@
                     // 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) {
@@ -13590,8 +13590,8 @@
             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();
@@ -13616,8 +13616,8 @@
             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);
@@ -13628,6 +13628,12 @@
         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
@@ -13728,17 +13734,17 @@
         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) {
@@ -13997,7 +14003,24 @@
          * 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
@@ -14066,11 +14089,32 @@
          * 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 = {};
@@ -14107,17 +14151,45 @@
             });
         }
         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);
             });
         }
     }