@devskin/browser-sdk 1.0.39 → 1.0.41

package/dist/collectors/heatmap.d.ts

@@ -3,13 +3,15 @@ import { Transport } from '../transport';
 export declare class HeatmapCollector {
     private config;
     private transport;
+    private anonymousId;
+    private sessionId;
     private clickData;
     private scrollData;
     private mouseMoveData;
     private maxScrollDepth;
     private flushInterval;
     private mouseMoveSampling;
-    constructor(config: DevSkinConfig, transport: Transport);
+    constructor(config: DevSkinConfig, transport: Transport, anonymousId: string, sessionId: string);
     start(): void;
     stop(): void;
     private trackClicks;

package/dist/collectors/heatmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../src/collectors/heatmap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkCzC,qBAAa,gBAAgB;IASzB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,SAAS;IATnB,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,aAAa,CAA+C;IACpE,OAAO,CAAC,iBAAiB,CAAO;gBAGtB,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,SAAS;IAG9B,KAAK,IAAI,IAAI;IAoCb,IAAI,IAAI,IAAI;IAQZ,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,gBAAgB;IA2CxB,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,KAAK;IAmCb,OAAO,CAAC,kBAAkB;CAc3B"}
+{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../src/collectors/heatmap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkCzC,qBAAa,gBAAgB;IASzB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,SAAS;IAXnB,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,aAAa,CAA+C;IACpE,OAAO,CAAC,iBAAiB,CAAO;gBAGtB,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM;IAG3B,KAAK,IAAI,IAAI;IAoCb,IAAI,IAAI,IAAI;IAQZ,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,gBAAgB;IA2CxB,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,KAAK;IAyCb,OAAO,CAAC,kBAAkB;CAc3B"}

package/dist/devskin.cjs.js

@@ -861,9 +861,11 @@ class NetworkCollector {
 }
 
 class HeatmapCollector {
-    constructor(config, transport) {
+    constructor(config, transport, anonymousId, sessionId) {
         this.config = config;
         this.transport = transport;
+        this.anonymousId = anonymousId;
+        this.sessionId = sessionId;
         this.clickData = [];
         this.scrollData = [];
         this.mouseMoveData = [];
@@ -1007,21 +1009,21 @@ class HeatmapCollector {
         // Send clicks individually (backend expects one click event per item)
         if (this.clickData.length > 0) {
             this.clickData.forEach(click => {
-                this.transport.sendHeatmapData(Object.assign({ type: 'click' }, click));
+                this.transport.sendHeatmapData(Object.assign({ type: 'click', anonymousId: this.anonymousId, sessionId: this.sessionId }, click));
             });
             this.clickData = [];
         }
         // Send scroll data individually
         if (this.scrollData.length > 0) {
             this.scrollData.forEach(scroll => {
-                this.transport.sendHeatmapData(Object.assign({ type: 'scroll' }, scroll));
+                this.transport.sendHeatmapData(Object.assign({ type: 'scroll', anonymousId: this.anonymousId, sessionId: this.sessionId }, scroll));
             });
             this.scrollData = [];
         }
         // Send mouse moves individually
         if (this.mouseMoveData.length > 0) {
             this.mouseMoveData.forEach(move => {
-                this.transport.sendHeatmapData(Object.assign({ type: 'mousemove' }, move));
+                this.transport.sendHeatmapData(Object.assign({ type: 'mousemove', anonymousId: this.anonymousId, sessionId: this.sessionId }, move));
             });
             this.mouseMoveData = [];
         }
@@ -13876,6 +13878,7 @@ class DevSkinSDK {
         this.anonymousId = null;
         this.sessionStartTime = 0;
         this.initialized = false;
+        this.initializing = false;
         this.heartbeatInterval = null;
         // Collectors
         this.deviceCollector = null;
@@ -13891,12 +13894,15 @@ class DevSkinSDK {
     }
     /**
      * Initialize the DevSkin SDK
+     * Uses requestIdleCallback to defer heavy initialization without blocking the page
      */
     init(config) {
-        if (this.initialized) {
-            console.warn('[DevSkin] SDK already initialized');
+        if (this.initialized || this.initializing) {
+            console.warn('[DevSkin] SDK already initialized or initializing');
             return;
         }
+        // Mark as initializing to prevent duplicate init() calls
+        this.initializing = true;
         this.config = Object.assign({ debug: false, captureWebVitals: true, captureNetworkRequests: true, captureErrors: true, captureUserAgent: true, captureLocation: true, captureDevice: true, heatmapOptions: {
                 enabled: true,
                 trackClicks: true,
@@ -13906,99 +13912,118 @@ class DevSkinSDK {
         if (this.config.debug) {
             console.log('[DevSkin] Initializing SDK with config:', this.config);
         }
-        // Initialize transport
+        // Initialize lightweight components immediately (needed for session context)
         this.transport = new Transport(this.config);
-        // Generate anonymous ID if not exists
         this.anonymousId = this.getOrCreateAnonymousId();
-        // Initialize collectors BEFORE starting session (so getContextData works)
         this.deviceCollector = new DeviceCollector(this.config);
         this.locationCollector = new LocationCollector(this.config);
         this.browserCollector = new BrowserCollector(this.config);
-        // Start session (will now include device/browser/location data)
-        // 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
-                // Pass sessionStartTime to ensure timestamp continuity across page navigations
-                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);
-                }, this.sessionStartTime // Pass session start time for timestamp continuity
-                );
-                // 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);
+        // Defer heavy initialization to avoid blocking page load/rendering
+        const initHeavyCollectors = () => {
+            // Start session (will now include device/browser/location data)
+            // 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.anonymousId, this.sessionId);
+                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
+                    // Pass sessionStartTime to ensure timestamp continuity across page navigations
+                    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);
+                    }, this.sessionStartTime // Pass session start time for timestamp continuity
+                    );
+                    // 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);
+                    }
                 }
+                // Track initial page view
+                this.trackPageView();
+                // Start heartbeat to update session duration every 30 seconds
+                this.startHeartbeat();
+            }).catch((err) => {
+                console.error('[DevSkin] Failed to create session:', err);
+            });
+            // Track page visibility changes
+            this.setupVisibilityTracking();
+            // Track page unload
+            this.setupUnloadTracking();
+            // Mark as fully initialized only after everything is loaded
+            this.initialized = true;
+            this.initializing = false;
+        };
+        // Use requestIdleCallback to defer heavy initialization (non-blocking)
+        // Falls back to setTimeout for browsers that don't support it
+        if (typeof window !== 'undefined') {
+            if ('requestIdleCallback' in window) {
+                window.requestIdleCallback(initHeavyCollectors, { timeout: 2000 });
             }
-            // Track initial page view
-            this.trackPageView();
-            // Start heartbeat to update session duration every 30 seconds
-            this.startHeartbeat();
-        }).catch((err) => {
-            console.error('[DevSkin] Failed to create session:', err);
-        });
-        // Track page visibility changes
-        this.setupVisibilityTracking();
-        // Track page unload
-        this.setupUnloadTracking();
-        this.initialized = true;
+            else {
+                // Fallback for older browsers
+                setTimeout(initHeavyCollectors, 1);
+            }
+        }
+        else {
+            // Node.js environment (SSR)
+            initHeavyCollectors();
+        }
         if (this.config.debug) {
-            console.log('[DevSkin] SDK initialized successfully');
+            console.log('[DevSkin] SDK initialization started (heavy collectors loading in background)');
         }
     }
     /**
      * Track a custom event
+     * Works immediately after init() even if heavy collectors are still loading
      */
     track(eventName, properties) {
-        var _a, _b;
-        if (!this.initialized) {
+        var _a, _b, _c, _d;
+        if (!this.transport) {
             console.warn('[DevSkin] SDK not initialized. Call init() first.');
             return;
         }
@@ -14006,15 +14031,15 @@ class DevSkinSDK {
             eventName: eventName,
             eventType: 'track',
             timestamp: new Date().toISOString(),
-            sessionId: this.sessionId,
-            userId: this.userId || undefined,
-            anonymousId: this.anonymousId || undefined,
+            sessionId: (_a = this.sessionId) !== null && _a !== void 0 ? _a : undefined,
+            userId: (_b = this.userId) !== null && _b !== void 0 ? _b : undefined,
+            anonymousId: (_c = this.anonymousId) !== null && _c !== void 0 ? _c : undefined,
             properties: Object.assign(Object.assign({}, properties), this.getContextData()),
             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) {
+        this.transport.sendEvent(eventData);
+        if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.debug) {
             console.log('[DevSkin] Event tracked:', eventData);
         }
     }
@@ -14043,23 +14068,24 @@ class DevSkinSDK {
     }
     /**
      * Identify a user
+     * Works immediately after init() even if heavy collectors are still loading
      */
     identify(userId, traits) {
-        var _a, _b;
-        if (!this.initialized) {
+        var _a, _b, _c;
+        if (!this.transport) {
             console.warn('[DevSkin] SDK not initialized. Call init() first.');
             return;
         }
         this.userId = userId;
         const userData = {
             userId: userId,
-            anonymousId: this.anonymousId || undefined,
+            anonymousId: (_a = this.anonymousId) !== null && _a !== void 0 ? _a : undefined,
             traits: Object.assign(Object.assign({}, traits), this.getContextData()),
-            sessionId: this.sessionId,
+            sessionId: (_b = this.sessionId) !== null && _b !== void 0 ? _b : undefined,
             timestamp: new Date().toISOString(),
         };
-        (_a = this.transport) === null || _a === void 0 ? void 0 : _a.identifyUser(userData);
-        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.debug) {
+        this.transport.identifyUser(userData);
+        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.debug) {
             console.log('[DevSkin] User identified:', userData);
         }
     }