@zaplier/sdk 1.2.5 → 1.2.7

package/dist/sdk.js

@@ -6880,7 +6880,7 @@
                 const target = event.target;
                 const path = this.getElementPath(target);
                 this.addEvent({
-                    type: 'click',
+                    type: "click",
                     timestamp: Date.now(),
                     data: {
                         x: event.clientX,
@@ -6889,9 +6889,9 @@
                         button: event.button,
                         ctrlKey: event.ctrlKey,
                         shiftKey: event.shiftKey,
-                        altKey: event.altKey
+                        altKey: event.altKey,
                     },
-                    sequence: this.sequence++
+                    sequence: this.sequence++,
                 });
             };
             /**
@@ -6899,13 +6899,13 @@
              */
             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++,
                 });
             };
             /**
@@ -6917,17 +6917,17 @@
                 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++,
                 });
             };
             /**
@@ -6938,17 +6938,17 @@
                 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++,
                 });
             };
             /**
@@ -6961,13 +6961,13 @@
                 }
                 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++,
                 });
             };
             /**
@@ -6975,13 +6975,13 @@
              */
             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++,
                 });
             };
             /**
@@ -7003,7 +7003,7 @@
                 captureInputs: true,
                 captureMouseMoves: false, // Disabled by default for performance
                 compressionEnabled: true,
-                ...config
+                ...config,
             };
         }
         /**
@@ -7048,18 +7048,18 @@
          * 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++,
                     });
                 }
             });
@@ -7069,7 +7069,7 @@
                 attributes: true,
                 attributeOldValue: true,
                 characterData: true,
-                characterDataOldValue: true
+                characterDataOldValue: true,
             });
         }
         /**
@@ -7077,47 +7077,49 @@
          */
         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,
@@ -7125,14 +7127,14 @@
                     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++,
             });
         }
         /**
@@ -7141,25 +7143,25 @@
         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;
@@ -7180,7 +7182,7 @@
             return {
                 tagName: element.tagName.toLowerCase(),
                 attributes,
-                textContent: element.textContent?.substring(0, 1000) || '' // Limit text content
+                textContent: element.textContent?.substring(0, 1000) || "", // Limit text content
             };
         }
         /**
@@ -7198,7 +7200,7 @@
                 }
                 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) {
@@ -7209,26 +7211,38 @@
                 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());
         }
         /**
@@ -7253,18 +7267,21 @@
          * 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);
@@ -7282,39 +7299,55 @@
             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);
             }
         }
         /**
@@ -7432,8 +7465,9 @@
                             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,
                         });
@@ -7441,10 +7475,23 @@
                         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: () => {
@@ -7567,8 +7614,11 @@
                 }
                 // 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,
                     });
@@ -7576,9 +7626,13 @@
                     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