@devskin/browser-sdk 1.0.30 → 1.0.32

package/dist/devskin.umd.js

@@ -4,6 +4,38 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DevSkin = factory());
 })(this, (function () { 'use strict';
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+    function __awaiter$1(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
     class DeviceCollector {
         constructor(config) {
             this.config = config;
@@ -121,38 +153,6 @@
         }
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-    function __awaiter$1(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
     class LocationCollector {
         constructor(config) {
             this.config = config;
@@ -340,12 +340,12 @@
             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(),
             });
         }
@@ -368,19 +368,9 @@
                         });
                     }
                     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);
@@ -414,9 +404,9 @@
                         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);
@@ -433,13 +423,9 @@
                                 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(),
                             });
                         }
@@ -679,7 +665,7 @@
                 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
@@ -705,26 +691,18 @@
                     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);
@@ -738,10 +716,9 @@
                         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);
@@ -780,7 +757,7 @@
                 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)) {
@@ -795,25 +772,17 @@
                     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);
@@ -826,10 +795,9 @@
                         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);
@@ -13592,6 +13560,7 @@
             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();
@@ -13608,6 +13577,9 @@
                 });
             }
         }
+        setSessionId(sessionId) {
+            this.sessionId = sessionId;
+        }
         sendEvent(event) {
             this.enqueue('event', event);
         }
@@ -13616,8 +13588,11 @@
             this.sendToBackend('/v1/analytics/identify', user);
         }
         startSession(session) {
-            // Send session start immediately to RUM endpoint
-            this.sendToBackend('/v1/rum/sessions', session);
+            return __awaiter$1(this, void 0, void 0, function* () {
+                // Send session start immediately to RUM endpoint
+                // MUST await to ensure session is created before other requests
+                yield this.sendToBackend('/v1/rum/sessions', session);
+            });
         }
         sendError(error) {
             this.enqueue('error', error);
@@ -13729,9 +13704,16 @@
             }
         }
         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,
@@ -13895,7 +13877,6 @@
          * Initialize the DevSkin SDK
          */
         init(config) {
-            var _a;
             if (this.initialized) {
                 console.warn('[DevSkin] SDK already initialized');
                 return;
@@ -13918,69 +13899,71 @@
             this.locationCollector = new LocationCollector(this.config);
             this.browserCollector = new BrowserCollector(this.config);
             // Start session (will now include device/browser/location data)
-            this.startSession();
-            if (this.config.captureWebVitals) {
-                this.performanceCollector = new PerformanceCollector(this.config, this.transport);
-                this.performanceCollector.start();
-            }
-            if (this.config.captureErrors) {
-                this.errorCollector = new ErrorCollector(this.config, this.transport);
-                this.errorCollector.start();
-            }
-            if (this.config.captureNetworkRequests) {
-                this.networkCollector = new NetworkCollector(this.config, this.transport);
-                this.networkCollector.start();
-            }
-            // Initialize heatmap collector - SEMPRE habilitado
-            // Merge default heatmap config with user config
-            const heatmapConfig = Object.assign({ enabled: true, trackClicks: true, trackScroll: true, trackMouseMovement: true, mouseMoveSampling: 0.1 }, this.config.heatmapOptions);
-            this.config.heatmapOptions = heatmapConfig;
-            this.heatmapCollector = new HeatmapCollector(this.config, this.transport);
-            this.heatmapCollector.start();
-            // Initialize screenshot collector and capture page
-            this.screenshotCollector = new ScreenshotCollector(this.config, this.transport);
-            this.screenshotCollector.captureAndSend(this.sessionId, window.location.href);
-            if (this.config.debug) {
-                console.log('[DevSkin] Heatmap collection enabled (always on)');
-            }
-            // Initialize session recording with rrweb
-            if ((_a = this.config.sessionRecording) === null || _a === void 0 ? void 0 : _a.enabled) {
-                // Use RRWebRecorder for complete DOM recording
-                this.rrwebRecorder = new RRWebRecorder(this.sessionId, {
-                    enabled: true,
-                    sampleRate: this.config.sessionRecording.sampling || 0.5,
-                    blockClass: 'rr-block',
-                    ignoreClass: this.config.sessionRecording.ignoreClass || 'rr-ignore',
-                    maskAllInputs: this.config.sessionRecording.maskAllInputs !== undefined
-                        ? this.config.sessionRecording.maskAllInputs
-                        : true,
-                    maskInputOptions: {
-                        password: true,
-                        email: true,
-                        tel: true,
-                    },
-                    recordCanvas: this.config.sessionRecording.recordCanvas || false,
-                    collectFonts: true,
-                    inlineStylesheet: true,
-                    checkoutEveryNms: 5 * 60 * 1000, // Every 5 minutes
-                    checkoutEveryNth: 200, // Every 200 events
-                }, (events) => {
-                    var _a;
-                    // Send rrweb events to backend
-                    (_a = this.transport) === null || _a === void 0 ? void 0 : _a.sendRecordingEvents(this.sessionId, events);
-                });
-                // Wait 500ms before starting recording to ensure session is created in backend
-                // This prevents race condition where FullSnapshot is sent before session exists
-                setTimeout(() => {
-                    var _a, _b;
-                    (_a = this.rrwebRecorder) === null || _a === void 0 ? void 0 : _a.start();
+            // Wait for session creation to complete before starting collectors
+            this.startSession().then(() => {
+                // Session created, now safe to start collectors that send data
+                var _a, _b;
+                if (this.config.captureWebVitals) {
+                    this.performanceCollector = new PerformanceCollector(this.config, this.transport);
+                    this.performanceCollector.start();
+                }
+                if (this.config.captureErrors) {
+                    this.errorCollector = new ErrorCollector(this.config, this.transport);
+                    this.errorCollector.start();
+                }
+                if (this.config.captureNetworkRequests) {
+                    this.networkCollector = new NetworkCollector(this.config, this.transport);
+                    this.networkCollector.start();
+                }
+                // Initialize heatmap collector - SEMPRE habilitado
+                // Merge default heatmap config with user config
+                const heatmapConfig = Object.assign({ enabled: true, trackClicks: true, trackScroll: true, trackMouseMovement: true, mouseMoveSampling: 0.1 }, this.config.heatmapOptions);
+                this.config.heatmapOptions = heatmapConfig;
+                this.heatmapCollector = new HeatmapCollector(this.config, this.transport);
+                this.heatmapCollector.start();
+                // Initialize screenshot collector and capture page
+                this.screenshotCollector = new ScreenshotCollector(this.config, this.transport);
+                this.screenshotCollector.captureAndSend(this.sessionId, window.location.href);
+                if (this.config.debug) {
+                    console.log('[DevSkin] Heatmap collection enabled (always on)');
+                }
+                // Initialize session recording with rrweb
+                if ((_a = this.config.sessionRecording) === null || _a === void 0 ? void 0 : _a.enabled) {
+                    // Use RRWebRecorder for complete DOM recording
+                    this.rrwebRecorder = new RRWebRecorder(this.sessionId, {
+                        enabled: true,
+                        sampleRate: this.config.sessionRecording.sampling || 0.5,
+                        blockClass: 'rr-block',
+                        ignoreClass: this.config.sessionRecording.ignoreClass || 'rr-ignore',
+                        maskAllInputs: this.config.sessionRecording.maskAllInputs !== undefined
+                            ? this.config.sessionRecording.maskAllInputs
+                            : true,
+                        maskInputOptions: {
+                            password: true,
+                            email: true,
+                            tel: true,
+                        },
+                        recordCanvas: this.config.sessionRecording.recordCanvas || false,
+                        collectFonts: true,
+                        inlineStylesheet: true,
+                        checkoutEveryNms: 5 * 60 * 1000, // Every 5 minutes
+                        checkoutEveryNth: 200, // Every 200 events
+                    }, (events) => {
+                        var _a;
+                        // Send rrweb events to backend
+                        (_a = this.transport) === null || _a === void 0 ? void 0 : _a.sendRecordingEvents(this.sessionId, events);
+                    });
+                    // Start recording immediately (session already created)
+                    this.rrwebRecorder.start();
                     if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
                         console.log('[DevSkin] RRWeb recording started for session:', this.sessionId);
                     }
-                }, 500);
-            }
-            // Track initial page view
-            this.trackPageView();
+                }
+                // Track initial page view
+                this.trackPageView();
+            }).catch((err) => {
+                console.error('[DevSkin] Failed to create session:', err);
+            });
             // Track page visibility changes
             this.setupVisibilityTracking();
             // Track page unload
@@ -14105,32 +14088,39 @@
          * Private methods
          */
         startSession() {
-            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);
+            return __awaiter$1(this, void 0, void 0, function* () {
+                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');
+                if (existingSessionId && existingSessionStart) {
+                    // Resume existing session
+                    this.sessionId = existingSessionId;
+                    this.sessionStartTime = parseInt(existingSessionStart, 10);
+                    // 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
+                    // The session is already created, just continue it
+                    return;
                 }
-                // 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({ 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);
-            }
+                // 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());
+                // 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());
+                // CRITICAL: Await session creation to ensure it exists before sending metrics/requests
+                yield ((_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);
+                }
+            });
         }
         getContextData() {
             var _a, _b, _c, _d;