@devskin/browser-sdk 1.0.26 → 1.0.28

package/dist/devskin.umd.js

@@ -517,7 +517,7 @@
                     stack: error.stack,
                     type: error.name || 'Error',
                     timestamp: new Date().toISOString(),
-                    session_id: '', // Will be set by transport
+                    sessionId: '', // Will be set by transport
                     url: window.location.href,
                     breadcrumbs: [...this.breadcrumbs],
                     context: Object.assign(Object.assign({}, context), { userAgent: navigator.userAgent, viewport: {
@@ -540,7 +540,7 @@
                     message: String(error),
                     type: 'Error',
                     timestamp: new Date().toISOString(),
-                    session_id: '',
+                    sessionId: '',
                     url: window.location.href,
                     breadcrumbs: [...this.breadcrumbs],
                     context,
@@ -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,23 +13734,23 @@
         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) {
             return __awaiter$1(this, void 0, void 0, function* () {
                 const url = `${this.apiUrl}${endpoint}`;
-                const payload = Object.assign(Object.assign({}, data), { apiKey: this.config.apiKey, appId: this.config.appId, environment: this.config.environment, release: this.config.release });
+                const payload = Object.assign(Object.assign({}, data), { apiKey: this.config.apiKey, applicationId: this.config.appId, environment: this.config.environment, release: this.config.release });
                 // Apply beforeSend hook if provided
                 if (this.config.beforeSend) {
                     const processed = this.config.beforeSend(payload);
@@ -13794,7 +13800,7 @@
         sendToBackend(endpoint_1, data_1) {
             return __awaiter$1(this, arguments, void 0, function* (endpoint, data, useBeacon = false) {
                 const url = `${this.apiUrl}${endpoint}`;
-                const payload = Object.assign(Object.assign({}, data), { apiKey: this.config.apiKey, appId: this.config.appId, environment: this.config.environment, release: this.config.release });
+                const payload = Object.assign(Object.assign({}, data), { apiKey: this.config.apiKey, applicationId: this.config.appId, environment: this.config.environment, release: this.config.release });
                 // Apply beforeSend hook if provided
                 if (this.config.beforeSend) {
                     const processed = this.config.beforeSend(payload);
@@ -13978,15 +13984,15 @@
                 return;
             }
             const eventData = {
-                event_name: eventName,
-                event_type: 'track',
+                eventName: eventName,
+                eventType: 'track',
                 timestamp: new Date().toISOString(),
-                session_id: this.sessionId,
-                user_id: this.userId || undefined,
-                anonymous_id: this.anonymousId || undefined,
+                sessionId: this.sessionId,
+                userId: this.userId || undefined,
+                anonymousId: this.anonymousId || undefined,
                 properties: Object.assign(Object.assign({}, properties), this.getContextData()),
-                page_url: window.location.href,
-                page_title: document.title,
+                pageUrl: window.location.href,
+                pageTitle: document.title,
             };
             (_a = this.transport) === null || _a === void 0 ? void 0 : _a.sendEvent(eventData);
             if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
@@ -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
@@ -14010,10 +14033,10 @@
             }
             this.userId = userId;
             const userData = {
-                user_id: userId,
-                anonymous_id: this.anonymousId || undefined,
+                userId: userId,
+                anonymousId: this.anonymousId || undefined,
                 traits: Object.assign(Object.assign({}, traits), this.getContextData()),
-                session_id: this.sessionId,
+                sessionId: this.sessionId,
                 timestamp: new Date().toISOString(),
             };
             (_a = this.transport) === null || _a === void 0 ? void 0 : _a.identifyUser(userData);
@@ -14087,7 +14110,7 @@
             // 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());
+            const sessionData = Object.assign({ sessionId: this.sessionId, userId: this.userId || undefined, anonymousId: this.anonymousId, startedAt: new Date().toISOString(), platform: 'web' }, this.getContextData());
             (_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);
@@ -14128,27 +14151,45 @@
             });
         }
         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;
-                        (_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()));
+                        (_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');
                     }
                 }
-                // 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);
             });
         }
     }