@devskin/browser-sdk 1.0.26 → 1.0.28

package/dist/devskin.esm.js

@@ -511,7 +511,7 @@ class ErrorCollector {
                 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: {
@@ -534,7 +534,7 @@ class ErrorCollector {
                 message: String(error),
                 type: 'Error',
                 timestamp: new Date().toISOString(),
-                session_id: '',
+                sessionId: '',
                 url: window.location.href,
                 breadcrumbs: [...this.breadcrumbs],
                 context,
@@ -13480,8 +13480,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();
                     }
                 },
@@ -13520,13 +13520,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) {
@@ -13584,8 +13584,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();
@@ -13610,8 +13610,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);
@@ -13622,6 +13622,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
@@ -13722,23 +13728,23 @@ 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) {
         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);
@@ -13788,7 +13794,7 @@ class Transport {
     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);
@@ -13972,15 +13978,15 @@ class DevSkinSDK {
             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) {
@@ -13991,7 +13997,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
@@ -14004,10 +14027,10 @@ class DevSkinSDK {
         }
         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);
@@ -14081,7 +14104,7 @@ class DevSkinSDK {
         // 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);
@@ -14122,27 +14145,45 @@ 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;
-                    (_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);
         });
     }
 }