@devskin/browser-sdk 1.0.31 → 1.0.33

package/dist/devskin.esm.js

@@ -1,3 +1,35 @@
+/******************************************************************************
+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;
@@ -115,38 +147,6 @@ class DeviceCollector {
     }
 }
 
-/******************************************************************************
-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;
@@ -13581,9 +13581,13 @@ class Transport {
         // Send user identification immediately (don't queue)
         this.sendToBackend('/v1/analytics/identify', user);
     }
-    startSession(session) {
-        // Send session start immediately to RUM endpoint
-        this.sendToBackend('/v1/rum/sessions', session);
+    startSession(session_1) {
+        return __awaiter$1(this, arguments, void 0, function* (session, useBeacon = false) {
+            // Send session start immediately to RUM endpoint
+            // MUST await to ensure session is created before other requests
+            // Use beacon for page unload events (more reliable)
+            yield this.sendToBackend('/v1/rum/sessions', session, useBeacon);
+        });
     }
     sendError(error) {
         this.enqueue('error', error);
@@ -13868,7 +13872,6 @@ class DevSkinSDK {
      * Initialize the DevSkin SDK
      */
     init(config) {
-        var _a;
         if (this.initialized) {
             console.warn('[DevSkin] SDK already initialized');
             return;
@@ -13891,69 +13894,71 @@ class DevSkinSDK {
         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
@@ -14078,36 +14083,39 @@ class DevSkinSDK {
      * Private methods
      */
     startSession() {
-        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);
+        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;
+            }
+            // 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
-            (_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);
+            (_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);
             }
-            // 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());
-        // 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());
-        (_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;
@@ -14182,7 +14190,8 @@ class DevSkinSDK {
                 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({ sessionId: this.sessionId, userId: this.userId || undefined, anonymousId: this.anonymousId, endedAt: endedAt.toISOString(), durationMs: durationMs, platform: 'web' }, this.getContextData()));
+                    // Use beacon for reliable delivery during page unload
+                    (_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()), true); // true = use sendBeacon
                     // Clear session storage since session is ending
                     sessionStorage.removeItem('devskin_session_id');
                     sessionStorage.removeItem('devskin_session_start');