@devskin/browser-sdk 1.0.29 → 1.0.31

package/dist/devskin.esm.js

@@ -334,12 +334,12 @@ class PerformanceCollector {
         if (this.config.debug) {
             console.log(`[DevSkin] Web Vital ${metric.name}:`, metric.value);
         }
-        // Send metric to backend
+        // Send metric to backend - match backend schema
         this.transport.sendPerformanceMetric({
-            name: metric.name,
+            metricName: metric.name, // Changed from 'name' to 'metricName'
             value: metric.value,
             rating: metric.rating,
-            delta: metric.delta,
+            url: window.location.href,
             timestamp: new Date().toISOString(),
         });
     }
@@ -362,19 +362,9 @@ class PerformanceCollector {
                     });
                 }
                 this.transport.sendPerformanceMetric({
-                    name: 'Navigation',
+                    metricName: 'Navigation',
                     value: windowLoad,
-                    details: {
-                        domLoad,
-                        windowLoad,
-                        navigationType: navigation.type,
-                        redirectCount: navigation.redirectCount,
-                        dns: timing.domainLookupEnd - timing.domainLookupStart,
-                        tcp: timing.connectEnd - timing.connectStart,
-                        request: timing.responseStart - timing.requestStart,
-                        response: timing.responseEnd - timing.responseStart,
-                        dom: timing.domComplete - timing.domLoading,
-                    },
+                    url: window.location.href,
                     timestamp: new Date().toISOString(),
                 });
             }, 0);
@@ -408,9 +398,9 @@ class PerformanceCollector {
                     console.log('[DevSkin] Resource Timings:', resourceStats);
                 }
                 this.transport.sendPerformanceMetric({
-                    name: 'Resources',
+                    metricName: 'Resources',
                     value: resources.length,
-                    details: resourceStats,
+                    url: window.location.href,
                     timestamp: new Date().toISOString(),
                 });
             }, 1000);
@@ -427,13 +417,9 @@ class PerformanceCollector {
                             console.log('[DevSkin] Long Task detected:', entry);
                         }
                         this.transport.sendPerformanceMetric({
-                            name: 'LongTask',
+                            metricName: 'LongTask',
                             value: entry.duration,
-                            details: {
-                                name: entry.name,
-                                entryType: entry.entryType,
-                                startTime: entry.startTime,
-                            },
+                            url: window.location.href,
                             timestamp: new Date().toISOString(),
                         });
                     }
@@ -673,7 +659,7 @@ class NetworkCollector {
             return;
         const originalFetch = window.fetch;
         window.fetch = (...args) => __awaiter$1(this, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _a, _b;
             const [resource, config] = args;
             const url = typeof resource === 'string'
                 ? resource
@@ -699,26 +685,18 @@ class NetworkCollector {
                 const networkRequest = {
                     url,
                     method,
-                    status: response.status,
-                    duration,
-                    size: yield this.getResponseSize(clonedResponse),
-                    type: 'fetch',
+                    statusCode: response.status,
+                    durationMs: duration,
+                    responseSize: yield this.getResponseSize(clonedResponse),
                     timestamp: new Date().toISOString(),
-                    failed: !response.ok,
                 };
                 // Capture headers if enabled
                 if ((_b = this.config.networkRequestOptions) === null || _b === void 0 ? void 0 : _b.captureHeaders) {
-                    networkRequest.headers = this.headersToObject(response.headers);
+                    networkRequest.responseHeaders = this.headersToObject(response.headers);
                 }
-                // Capture body if enabled (only for failed requests to avoid performance issues)
-                if (((_c = this.config.networkRequestOptions) === null || _c === void 0 ? void 0 : _c.captureBody) && !response.ok) {
-                    try {
-                        const text = yield clonedResponse.text();
-                        networkRequest.body = text.substring(0, 10000); // Limit to 10KB
-                    }
-                    catch (error) {
-                        // Body might not be readable
-                    }
+                // Capture error message for failed requests
+                if (!response.ok) {
+                    networkRequest.errorMessage = `HTTP ${response.status} ${response.statusText}`;
                 }
                 if (this.config.debug) {
                     console.log('[DevSkin] Network request tracked:', networkRequest);
@@ -732,10 +710,9 @@ class NetworkCollector {
                     const networkRequest = {
                         url,
                         method,
-                        duration,
-                        type: 'fetch',
+                        durationMs: duration,
                         timestamp: new Date().toISOString(),
-                        failed: true,
+                        errorMessage: error instanceof Error ? error.message : 'Network request failed',
                     };
                     if (this.config.debug) {
                         console.log('[DevSkin] Network request failed:', networkRequest);
@@ -774,7 +751,7 @@ class NetworkCollector {
             const collector = window.__devskinNetworkCollector;
             // Track when request completes
             const handleLoad = () => {
-                var _a, _b, _c, _d;
+                var _a, _b;
                 const duration = Date.now() - devskin.startTime;
                 // Check if should be ignored
                 if (collector === null || collector === void 0 ? void 0 : collector.shouldIgnoreUrl(devskin.url)) {
@@ -789,25 +766,17 @@ class NetworkCollector {
                 const networkRequest = {
                     url: devskin.url,
                     method: devskin.method,
-                    status: xhr.status,
-                    duration,
-                    type: 'xhr',
+                    statusCode: xhr.status,
+                    durationMs: duration,
                     timestamp: new Date().toISOString(),
-                    failed: xhr.status === 0 || xhr.status >= 400,
                 };
                 // Capture headers if enabled
                 if ((_b = collector === null || collector === void 0 ? void 0 : collector.config.networkRequestOptions) === null || _b === void 0 ? void 0 : _b.captureHeaders) {
-                    networkRequest.headers = collector.parseResponseHeaders(xhr.getAllResponseHeaders());
+                    networkRequest.responseHeaders = collector.parseResponseHeaders(xhr.getAllResponseHeaders());
                 }
-                // Capture body if enabled (only for failed requests)
-                if (((_c = collector === null || collector === void 0 ? void 0 : collector.config.networkRequestOptions) === null || _c === void 0 ? void 0 : _c.captureBody) &&
-                    networkRequest.failed) {
-                    try {
-                        networkRequest.body = (_d = xhr.responseText) === null || _d === void 0 ? void 0 : _d.substring(0, 10000);
-                    }
-                    catch (error) {
-                        // Response might not be readable
-                    }
+                // Capture error message for failed requests
+                if (xhr.status === 0 || xhr.status >= 400) {
+                    networkRequest.errorMessage = `HTTP ${xhr.status} ${xhr.statusText}`;
                 }
                 if (collector === null || collector === void 0 ? void 0 : collector.config.debug) {
                     console.log('[DevSkin] XHR request tracked:', networkRequest);
@@ -820,10 +789,9 @@ class NetworkCollector {
                     const networkRequest = {
                         url: devskin.url,
                         method: devskin.method,
-                        duration,
-                        type: 'xhr',
+                        durationMs: duration,
                         timestamp: new Date().toISOString(),
-                        failed: true,
+                        errorMessage: 'XHR request failed',
                     };
                     if (collector === null || collector === void 0 ? void 0 : collector.config.debug) {
                         console.log('[DevSkin] XHR request failed:', networkRequest);
@@ -13586,6 +13554,7 @@ class Transport {
         this.flushInterval = null;
         this.maxQueueSize = 20; // Reduced from 50
         this.flushIntervalMs = 2000; // 2 seconds (reduced from 5s)
+        this.sessionId = null;
         this.apiUrl = config.apiUrl || 'https://api.devskin.com';
         // Start periodic flush
         this.startPeriodicFlush();
@@ -13602,6 +13571,9 @@ class Transport {
             });
         }
     }
+    setSessionId(sessionId) {
+        this.sessionId = sessionId;
+    }
     sendEvent(event) {
         this.enqueue('event', event);
     }
@@ -13692,7 +13664,7 @@ class Transport {
         }
         const items = [...this.queue];
         this.queue = [];
-        // Group items by type
+        // Group by type
         const grouped = {};
         items.forEach((item) => {
             if (!grouped[item.type]) {
@@ -13700,19 +13672,39 @@ class Transport {
             }
             grouped[item.type].push(item.data);
         });
-        // Send each group
-        Object.entries(grouped).forEach(([type, data]) => {
+        // Send each type appropriately
+        Object.entries(grouped).forEach(([type, dataArray]) => {
             const endpoint = this.getEndpointForType(type);
-            this.sendToBackend(endpoint, { [type + 's']: data }, useBeacon);
+            if (type === 'event' && dataArray.length > 1) {
+                // Events with batch support
+                this.sendToBackend('/v1/rum/events/batch', { events: dataArray }, useBeacon);
+            }
+            else if (type === 'heatmap') {
+                // Heatmap expects array format
+                this.sendToBackend(endpoint, { heatmaps: dataArray }, useBeacon);
+            }
+            else {
+                // Send each item individually (network, performance, error)
+                dataArray.forEach((data) => {
+                    this.sendToBackend(endpoint, data, useBeacon);
+                });
+            }
         });
         if (this.config.debug) {
             console.log(`[DevSkin] Flushed ${items.length} items to backend`);
         }
     }
     enqueue(type, data) {
-        // Add applicationId to RUM events (event, error, network, performance)
+        // Add applicationId and sessionId to RUM events (event, error, network, performance)
         // Heatmap uses apiKey/appId in payload root instead
-        const enrichedData = type !== 'heatmap' ? Object.assign(Object.assign({}, data), { applicationId: this.config.appId }) : data;
+        let enrichedData = data;
+        if (type !== 'heatmap') {
+            enrichedData = Object.assign(Object.assign({}, data), { applicationId: this.config.appId });
+            // Add sessionId to network and performance requests (required by backend)
+            if ((type === 'network' || type === 'performance') && this.sessionId) {
+                enrichedData.sessionId = this.sessionId;
+            }
+        }
         this.queue.push({
             type,
             data: enrichedData,
@@ -14086,7 +14078,7 @@ class DevSkinSDK {
      * Private methods
      */
     startSession() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         // 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');
@@ -14094,7 +14086,9 @@ class DevSkinSDK {
             // Resume existing session
             this.sessionId = existingSessionId;
             this.sessionStartTime = parseInt(existingSessionStart, 10);
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.debug) {
+            // Set sessionId in transport so it can be added to network/performance requests
+            (_a = this.transport) === null || _a === void 0 ? void 0 : _a.setSessionId(this.sessionId);
+            if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
                 console.log('[DevSkin] Resuming existing session:', this.sessionId);
             }
             // Send page view but DON'T create a new session
@@ -14107,9 +14101,11 @@ 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());
+        // Set sessionId in transport so it can be added to network/performance requests
+        (_c = this.transport) === null || _c === void 0 ? void 0 : _c.setSessionId(this.sessionId);
         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) {
+        (_d = this.transport) === null || _d === void 0 ? void 0 : _d.startSession(sessionData);
+        if ((_e = this.config) === null || _e === void 0 ? void 0 : _e.debug) {
             console.log('[DevSkin] New session created:', this.sessionId);
         }
     }