@devskin/browser-sdk 1.0.40 → 1.0.42

package/dist/devskin.umd.js

@@ -13475,11 +13475,12 @@
                     },
                     // Configuration options
                     sampling: {
-                        // Mouse interactions
-                        mousemove: this.config.sampleRate !== undefined
-                            ? Math.floor(100 / this.config.sampleRate)
-                            : true,
-                        // Mouse interactions
+                        // Mouse movement sampling - throttle to reduce bandwidth
+                        // e.g. 0.1 = capture 10% of mouse movements (Math.floor(1/0.1) = 10, meaning capture 1 every 10 events)
+                        mousemove: this.config.mouseMoveSampleRate !== undefined
+                            ? Math.max(1, Math.floor(1 / this.config.mouseMoveSampleRate))
+                            : 10, // Default: capture 1 every 10 mouse movements (10%)
+                        // Mouse interactions (clicks, etc) - always capture
                         mouseInteraction: true,
                         // Scroll events
                         scroll: 150, // Throttle scroll events to every 150ms
@@ -13880,6 +13881,7 @@
             this.anonymousId = null;
             this.sessionStartTime = 0;
             this.initialized = false;
+            this.initializing = false;
             this.heartbeatInterval = null;
             // Collectors
             this.deviceCollector = null;
@@ -13893,14 +13895,83 @@
             // private sessionRecorder: SessionRecorder | null = null; // Replaced by RRWebRecorder
             this.rrwebRecorder = null;
         }
+        /**
+         * Detect if the current visitor is a bot/crawler
+         */
+        isBot() {
+            if (typeof navigator === 'undefined')
+                return true;
+            const botPatterns = [
+                /bot/i,
+                /crawler/i,
+                /spider/i,
+                /crawling/i,
+                /google/i,
+                /bing/i,
+                /yahoo/i,
+                /duckduckgo/i,
+                /baiduspider/i,
+                /yandex/i,
+                /facebookexternalhit/i,
+                /twitterbot/i,
+                /rogerbot/i,
+                /linkedinbot/i,
+                /embedly/i,
+                /quora link preview/i,
+                /showyoubot/i,
+                /outbrain/i,
+                /pinterest/i,
+                /slackbot/i,
+                /vkShare/i,
+                /W3C_Validator/i,
+                /redditbot/i,
+                /Applebot/i,
+                /WhatsApp/i,
+                /flipboard/i,
+                /tumblr/i,
+                /bitlybot/i,
+                /SkypeUriPreview/i,
+                /nuzzel/i,
+                /Discordbot/i,
+                /Google Page Speed/i,
+                /Qwantify/i,
+                /pinterestbot/i,
+                /Bitrix link preview/i,
+                /XING-contenttabreceiver/i,
+                /Chrome-Lighthouse/i,
+                /telegrambot/i,
+                /Lighthouse/i,
+                /GTmetrix/i,
+                /PageSpeed/i,
+                /HeadlessChrome/i,
+                /PhantomJS/i,
+            ];
+            const userAgent = navigator.userAgent;
+            // Check user agent against bot patterns
+            if (botPatterns.some(pattern => pattern.test(userAgent))) {
+                return true;
+            }
+            // Check for headless browsers
+            if ('webdriver' in navigator && navigator.webdriver === true) {
+                return true;
+            }
+            // Check for headless Chrome
+            if (userAgent.includes('HeadlessChrome')) {
+                return true;
+            }
+            return false;
+        }
         /**
          * 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,
@@ -13910,99 +13981,135 @@
             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.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);
+            // 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, _c;
+                    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) {
+                        // Skip recording for bots/crawlers to avoid impacting SEO
+                        const isBot = this.isBot();
+                        // Apply session sampling - decide if this session should be recorded
+                        const samplingRate = this.config.sessionRecording.sampling || 1.0;
+                        const shouldRecord = !isBot && Math.random() < samplingRate;
+                        if (shouldRecord) {
+                            // Use RRWebRecorder for complete DOM recording
+                            // Pass sessionStartTime to ensure timestamp continuity across page navigations
+                            this.rrwebRecorder = new RRWebRecorder(this.sessionId, {
+                                enabled: true,
+                                mouseMoveSampleRate: 0.5, // Sample 10% of mouse movements to reduce bandwidth
+                                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} (sampling: ${samplingRate * 100}%)`);
+                            }
+                        }
+                        else {
+                            if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.debug) {
+                                if (isBot) {
+                                    console.log(`[DevSkin] Session ${this.sessionId} skipped recording (bot/crawler detected for SEO optimization)`);
+                                }
+                                else {
+                                    console.log(`[DevSkin] Session ${this.sessionId} not sampled for recording (sampling: ${samplingRate * 100}%)`);
+                                }
+                            }
+                        }
+                    }
+                    // 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;
             }
@@ -14010,15 +14117,15 @@
                 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);
             }
         }
@@ -14047,23 +14154,24 @@
         }
         /**
          * 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);
             }
         }