@zaplier/sdk 1.2.5 → 1.2.7

package/dist/index.esm.js

@@ -6874,7 +6874,7 @@ class SessionReplayEngine {
             const target = event.target;
             const path = this.getElementPath(target);
             this.addEvent({
-                type: 'click',
+                type: "click",
                 timestamp: Date.now(),
                 data: {
                     x: event.clientX,
@@ -6883,9 +6883,9 @@ class SessionReplayEngine {
                     button: event.button,
                     ctrlKey: event.ctrlKey,
                     shiftKey: event.shiftKey,
-                    altKey: event.altKey
+                    altKey: event.altKey,
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6893,13 +6893,13 @@ class SessionReplayEngine {
          */
         this.handleScroll = () => {
             this.addEvent({
-                type: 'scroll',
+                type: "scroll",
                 timestamp: Date.now(),
                 data: {
                     x: window.pageXOffset || document.documentElement.scrollLeft,
-                    y: window.pageYOffset || document.documentElement.scrollTop
+                    y: window.pageYOffset || document.documentElement.scrollTop,
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6911,17 +6911,17 @@ class SessionReplayEngine {
             let value = target.value;
             // Mask sensitive fields
             if (this.config.maskSensitiveFields && this.isSensitiveField(target)) {
-                value = '*'.repeat(value.length);
+                value = "*".repeat(value.length);
             }
             this.addEvent({
-                type: 'input',
+                type: "input",
                 timestamp: Date.now(),
                 data: {
                     element: path,
                     value: value,
-                    inputType: event.inputType
+                    inputType: event.inputType,
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6932,17 +6932,17 @@ class SessionReplayEngine {
             const path = this.getElementPath(target);
             let value = target.value;
             if (this.config.maskSensitiveFields && this.isSensitiveField(target)) {
-                value = '*'.repeat(value.length);
+                value = "*".repeat(value.length);
             }
             this.addEvent({
-                type: 'input',
+                type: "input",
                 timestamp: Date.now(),
                 data: {
                     element: path,
                     value: value,
-                    type: 'change'
+                    type: "change",
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6955,13 +6955,13 @@ class SessionReplayEngine {
             }
             this.lastMouseMove = now;
             this.addEvent({
-                type: 'mouse',
+                type: "mouse",
                 timestamp: now,
                 data: {
                     x: event.clientX,
-                    y: event.clientY
+                    y: event.clientY,
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6969,13 +6969,13 @@ class SessionReplayEngine {
          */
         this.handleViewportChange = () => {
             this.addEvent({
-                type: 'viewport',
+                type: "viewport",
                 timestamp: Date.now(),
                 data: {
                     width: window.innerWidth,
-                    height: window.innerHeight
+                    height: window.innerHeight,
                 },
-                sequence: this.sequence++
+                sequence: this.sequence++,
             });
         };
         /**
@@ -6997,7 +6997,7 @@ class SessionReplayEngine {
             captureInputs: true,
             captureMouseMoves: false, // Disabled by default for performance
             compressionEnabled: true,
-            ...config
+            ...config,
         };
     }
     /**
@@ -7042,18 +7042,18 @@ class SessionReplayEngine {
      * Setup DOM mutation observer
      */
     setupDOMObserver() {
-        if (typeof MutationObserver === 'undefined')
+        if (typeof MutationObserver === "undefined")
             return;
         this.observer = new MutationObserver((mutations) => {
             const serializedMutations = mutations
-                .map(mutation => this.serializeMutation(mutation))
+                .map((mutation) => this.serializeMutation(mutation))
                 .filter(Boolean);
             if (serializedMutations.length > 0) {
                 this.addEvent({
-                    type: 'mutation',
+                    type: "mutation",
                     timestamp: Date.now(),
                     data: { mutations: serializedMutations },
-                    sequence: this.sequence++
+                    sequence: this.sequence++,
                 });
             }
         });
@@ -7063,7 +7063,7 @@ class SessionReplayEngine {
             attributes: true,
             attributeOldValue: true,
             characterData: true,
-            characterDataOldValue: true
+            characterDataOldValue: true,
         });
     }
     /**
@@ -7071,47 +7071,49 @@ class SessionReplayEngine {
      */
     setupEventListeners() {
         if (this.config.captureClicks) {
-            document.addEventListener('click', this.handleClick, true);
+            document.addEventListener("click", this.handleClick, true);
         }
         if (this.config.captureScrolls) {
-            window.addEventListener('scroll', this.handleScroll, { passive: true });
-            document.addEventListener('scroll', this.handleScroll, { passive: true });
+            window.addEventListener("scroll", this.handleScroll, { passive: true });
+            document.addEventListener("scroll", this.handleScroll, { passive: true });
         }
         if (this.config.captureInputs) {
-            document.addEventListener('input', this.handleInput, true);
-            document.addEventListener('change', this.handleChange, true);
+            document.addEventListener("input", this.handleInput, true);
+            document.addEventListener("change", this.handleChange, true);
         }
         if (this.config.captureMouseMoves) {
-            document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
+            document.addEventListener("mousemove", this.handleMouseMove, {
+                passive: true,
+            });
         }
         // Viewport changes
-        window.addEventListener('resize', this.handleViewportChange);
-        window.addEventListener('orientationchange', this.handleViewportChange);
+        window.addEventListener("resize", this.handleViewportChange);
+        window.addEventListener("orientationchange", this.handleViewportChange);
         // Navigation
-        window.addEventListener('beforeunload', this.handleNavigation);
-        window.addEventListener('pagehide', this.handleNavigation);
+        window.addEventListener("beforeunload", this.handleNavigation);
+        window.addEventListener("pagehide", this.handleNavigation);
     }
     /**
      * Remove event listeners
      */
     removeEventListeners() {
-        document.removeEventListener('click', this.handleClick, true);
-        window.removeEventListener('scroll', this.handleScroll);
-        document.removeEventListener('scroll', this.handleScroll);
-        document.removeEventListener('input', this.handleInput, true);
-        document.removeEventListener('change', this.handleChange, true);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        window.removeEventListener('resize', this.handleViewportChange);
-        window.removeEventListener('orientationchange', this.handleViewportChange);
-        window.removeEventListener('beforeunload', this.handleNavigation);
-        window.removeEventListener('pagehide', this.handleNavigation);
+        document.removeEventListener("click", this.handleClick, true);
+        window.removeEventListener("scroll", this.handleScroll);
+        document.removeEventListener("scroll", this.handleScroll);
+        document.removeEventListener("input", this.handleInput, true);
+        document.removeEventListener("change", this.handleChange, true);
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        window.removeEventListener("resize", this.handleViewportChange);
+        window.removeEventListener("orientationchange", this.handleViewportChange);
+        window.removeEventListener("beforeunload", this.handleNavigation);
+        window.removeEventListener("pagehide", this.handleNavigation);
     }
     /**
      * Record initial DOM state
      */
     recordInitialState() {
         this.addEvent({
-            type: 'navigation',
+            type: "navigation",
             timestamp: Date.now(),
             data: {
                 url: window.location.href,
@@ -7119,14 +7121,14 @@ class SessionReplayEngine {
                 title: document.title,
                 viewport: {
                     width: window.innerWidth,
-                    height: window.innerHeight
+                    height: window.innerHeight,
                 },
                 screen: {
                     width: window.screen?.width || 0,
-                    height: window.screen?.height || 0
-                }
+                    height: window.screen?.height || 0,
+                },
             },
-            sequence: this.sequence++
+            sequence: this.sequence++,
         });
     }
     /**
@@ -7135,25 +7137,25 @@ class SessionReplayEngine {
     serializeMutation(mutation) {
         const result = {
             type: mutation.type,
-            target: this.getElementPath(mutation.target)
+            target: this.getElementPath(mutation.target),
         };
         switch (mutation.type) {
-            case 'childList':
+            case "childList":
                 result.addedNodes = Array.from(mutation.addedNodes)
-                    .filter(node => node.nodeType === Node.ELEMENT_NODE)
-                    .map(node => this.serializeElement(node))
+                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+                    .map((node) => this.serializeElement(node))
                     .slice(0, 10); // Limit to prevent huge payloads
                 result.removedNodes = Array.from(mutation.removedNodes)
-                    .filter(node => node.nodeType === Node.ELEMENT_NODE)
-                    .map(node => this.getElementPath(node))
+                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+                    .map((node) => this.getElementPath(node))
                     .slice(0, 10);
                 break;
-            case 'attributes':
+            case "attributes":
                 result.attributeName = mutation.attributeName;
                 result.oldValue = mutation.oldValue;
                 result.newValue = mutation.target.getAttribute(mutation.attributeName);
                 break;
-            case 'characterData':
+            case "characterData":
                 result.oldValue = mutation.oldValue;
                 result.newValue = mutation.target.textContent;
                 break;
@@ -7174,7 +7176,7 @@ class SessionReplayEngine {
         return {
             tagName: element.tagName.toLowerCase(),
             attributes,
-            textContent: element.textContent?.substring(0, 1000) || '' // Limit text content
+            textContent: element.textContent?.substring(0, 1000) || "", // Limit text content
         };
     }
     /**
@@ -7192,7 +7194,7 @@ class SessionReplayEngine {
             }
             if (current.className) {
                 const classes = current.className.toString().split(/\s+/).slice(0, 2);
-                selector += `.${classes.join('.')}`;
+                selector += `.${classes.join(".")}`;
             }
             // Add nth-child if no unique identifier
             if (!current.id && !current.className) {
@@ -7203,26 +7205,38 @@ class SessionReplayEngine {
             path.unshift(selector);
             current = current.parentElement;
         }
-        return path.join(' > ');
+        return path.join(" > ");
     }
     /**
      * Check if field should be masked
      */
     isSensitiveField(element) {
-        const sensitiveTypes = ['password', 'email', 'tel', 'ssn', 'cc'];
-        const sensitiveNames = ['password', 'email', 'phone', 'credit', 'card', 'ssn', 'social'];
-        const type = element.getAttribute('type')?.toLowerCase();
-        const name = element.getAttribute('name')?.toLowerCase();
+        const sensitiveTypes = ["password", "email", "tel", "ssn", "cc"];
+        const sensitiveNames = [
+            "password",
+            "email",
+            "phone",
+            "credit",
+            "card",
+            "ssn",
+            "social",
+        ];
+        const type = element.getAttribute("type")?.toLowerCase();
+        const name = element.getAttribute("name")?.toLowerCase();
         const className = element.className.toLowerCase();
-        return sensitiveTypes.includes(type || '') ||
-            sensitiveNames.some(term => (name && name.includes(term)) ||
-                className.includes(term));
+        return (sensitiveTypes.includes(type || "") ||
+            sensitiveNames.some((term) => (name && name.includes(term)) || className.includes(term)));
     }
     /**
      * Check if attribute should be masked
      */
     isSensitiveAttribute(attrName) {
-        const sensitiveAttrs = ['data-token', 'data-key', 'data-secret', 'authorization'];
+        const sensitiveAttrs = [
+            "data-token",
+            "data-key",
+            "data-secret",
+            "authorization",
+        ];
         return sensitiveAttrs.includes(attrName.toLowerCase());
     }
     /**
@@ -7247,18 +7261,21 @@ class SessionReplayEngine {
      * Send batch of events
      */
     sendBatch() {
-        if (this.events.length === 0)
+        if (this.events.length === 0) {
+            console.log("[Zaplier] No events to send in batch");
             return;
+        }
         const batch = [...this.events];
         this.events = [];
+        console.log(`[Zaplier] Sending batch with ${batch.length} events for session ${this.sessionId}`);
         const payload = {
             sessionId: this.sessionId,
             events: batch,
             metadata: {
                 userAgent: navigator.userAgent,
                 timestamp: Date.now(),
-                compression: this.config.compressionEnabled
-            }
+                compression: this.config.compressionEnabled,
+            },
         };
         // This will be handled by the anti-adblock manager
         this.sendToBackend(payload);
@@ -7276,39 +7293,55 @@ class SessionReplayEngine {
         try {
             // Try WebRTC first if anti-adblock manager is available
             if (this.antiAdblockManager) {
-                const result = await this.antiAdblockManager.send(payload, '/replays/record');
+                console.log("[Zaplier] Trying WebRTC transport...");
+                const result = await this.antiAdblockManager.send(payload, "/replays/record");
                 if (result.success) {
+                    console.log("[Zaplier] Session replay sent via WebRTC");
                     return; // Success via WebRTC
                 }
+                console.log("[Zaplier] WebRTC failed, falling back to fetch");
             }
             // Get API endpoint from global config
-            const apiEndpoint = window.zaplier_config?.apiEndpoint || 'http://localhost:3001';
-            const token = window.zaplier_config?.token || '';
+            const apiEndpoint = window.zaplier_config?.apiEndpoint || "http://localhost:3001";
+            const token = window.zaplier_config?.token || "ws_demo_token";
+            const url = `${apiEndpoint}/replays/record?token=${token}`;
+            console.log(`[Zaplier] Sending replay batch to ${url}`);
+            console.log(`[Zaplier] Payload:`, {
+                sessionId: payload.sessionId,
+                eventCount: payload.events.length,
+                hasMetadata: !!payload.metadata,
+            });
+            const requestBody = {
+                sessionId: payload.sessionId,
+                events: payload.events,
+                metadata: {
+                    startUrl: window.location.href,
+                    duration: Date.now() - (performance.timeOrigin || Date.now()),
+                    funnelSteps: [],
+                    hasConversion: false,
+                    ...payload.metadata,
+                },
+            };
             // Fallback to standard fetch
-            const response = await fetch(`${apiEndpoint}/replays/record?token=${token}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    sessionId: payload.sessionId,
-                    events: payload.events,
-                    metadata: {
-                        startUrl: window.location.href,
-                        duration: Date.now() - (performance.timeOrigin || Date.now()),
-                        funnelSteps: [],
-                        hasConversion: false,
-                        ...payload.metadata
-                    }
-                })
+            const response = await fetch(url, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(requestBody),
             });
+            const responseText = await response.text();
             if (!response.ok) {
-                console.warn('[Zaplier] Session replay batch failed to send:', response.status);
+                console.error("[Zaplier] Session replay batch failed:", {
+                    status: response.status,
+                    statusText: response.statusText,
+                    response: responseText,
+                });
             }
             else {
-                console.log('[Zaplier] Session replay batch sent successfully');
+                console.log("[Zaplier] Session replay batch sent successfully:", responseText);
             }
         }
         catch (error) {
-            console.warn('[Zaplier] Session replay error:', error);
+            console.error("[Zaplier] Session replay error:", error);
         }
     }
     /**
@@ -7426,8 +7459,9 @@ class ZaplierSDK {
                         this.sessionId = this.generateSessionId();
                     }
                     const sessionId = this.sessionId;
+                    // When explicitly enabled, use 100% sample rate
                     this.replayEngine = new SessionReplayEngine(sessionId, {
-                        sampleRate: this.config.replaySampling,
+                        sampleRate: 1.0, // Force 100% when explicitly enabled
                         maskSensitiveFields: this.config.replayMaskInputs,
                         compressionEnabled: true,
                     });
@@ -7435,10 +7469,23 @@ class ZaplierSDK {
                     if (this.antiAdblockManager) {
                         this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
                     }
-                    this.replayEngine.start();
+                    const started = this.replayEngine.start();
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Replay enabled", {
+                            started,
+                            isRecording: this.replayEngine.isRecording(),
+                        });
+                    }
                 }
-                if (this.config.debug) {
-                    console.log("[Zaplier] Replay enabled");
+                else if (this.replayEngine) {
+                    // If engine already exists, try to start it (might have failed due to sampling before)
+                    const started = this.replayEngine.start();
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Replay engine already exists, attempting start", { started });
+                    }
+                }
+                if (this.config.debug && !this.replayEngine) {
+                    console.log("[Zaplier] Replay enabled (will start when SDK initializes)");
                 }
             },
             disable: () => {
@@ -7561,8 +7608,11 @@ class ZaplierSDK {
             }
             // Initialize Session Replay Engine
             if (this.config.replay) {
+                // When replay is explicitly enabled, use 100% sample rate to ensure recording
+                // The default replaySampling (0.1) is only for automatic/production sampling
+                const sampleRate = this.config.replay === true ? 1.0 : this.config.replaySampling;
                 this.replayEngine = new SessionReplayEngine(this.sessionId, {
-                    sampleRate: this.config.replaySampling,
+                    sampleRate: sampleRate,
                     maskSensitiveFields: this.config.replayMaskInputs,
                     compressionEnabled: true,
                 });
@@ -7570,9 +7620,13 @@ class ZaplierSDK {
                 if (this.antiAdblockManager) {
                     this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
                 }
-                this.replayEngine.start();
+                const started = this.replayEngine.start();
                 if (this.config.debug) {
-                    console.log("[Zaplier] Session Replay started");
+                    console.log("[Zaplier] Session Replay started", {
+                        started,
+                        sampleRate,
+                        isRecording: this.replayEngine.isRecording(),
+                    });
                 }
             }
             // Initialize Heatmap Engine