@zaplier/sdk 1.2.6 → 1.3.0

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());
         }
         /**
@@ -7254,7 +7268,7 @@
          */
         sendBatch() {
             if (this.events.length === 0) {
-                console.log('[Zaplier] No events to send in batch');
+                console.log("[Zaplier] No events to send in batch");
                 return;
             }
             const batch = [...this.events];
@@ -7266,44 +7280,35 @@
                 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);
         }
         /**
-         * Set anti-adblock manager for WebRTC transport
+         * Set SDK instance for transport
          */
-        setAntiAdblockManager(manager) {
-            this.antiAdblockManager = manager;
+        setSDKInstance(sdk) {
+            this.sdkInstance = sdk;
         }
         /**
-         * Send data via WebRTC (anti-adblock) or fallback to standard fetch
+         * Send replay batch via SDK's transport system
          */
         async sendToBackend(payload) {
             try {
-                // Try WebRTC first if anti-adblock manager is available
-                if (this.antiAdblockManager) {
-                    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');
+                if (!this.sdkInstance) {
+                    console.error("[Zaplier] No SDK instance available for replay transport");
+                    return;
                 }
-                // Get API endpoint from global config
-                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] Sending replay batch via SDK transport`);
                 console.log(`[Zaplier] Payload:`, {
                     sessionId: payload.sessionId,
                     eventCount: payload.events.length,
-                    hasMetadata: !!payload.metadata
+                    hasMetadata: !!payload.metadata,
                 });
-                const requestBody = {
+                // Use SDK's sendReplayBatch method
+                const result = await this.sdkInstance.sendReplayBatch({
                     sessionId: payload.sessionId,
                     events: payload.events,
                     metadata: {
@@ -7311,29 +7316,18 @@
                         duration: Date.now() - (performance.timeOrigin || Date.now()),
                         funnelSteps: [],
                         hasConversion: false,
-                        ...payload.metadata
-                    }
-                };
-                // Fallback to standard fetch
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(requestBody)
+                        ...payload.metadata,
+                    },
                 });
-                const responseText = await response.text();
-                if (!response.ok) {
-                    console.error('[Zaplier] Session replay batch failed:', {
-                        status: response.status,
-                        statusText: response.statusText,
-                        response: responseText
-                    });
+                if (result && result.success) {
+                    console.log("[Zaplier] Session replay batch sent successfully");
                 }
                 else {
-                    console.log('[Zaplier] Session replay batch sent successfully:', responseText);
+                    console.error("[Zaplier] Session replay batch failed:", result);
                 }
             }
             catch (error) {
-                console.error('[Zaplier] Session replay error:', error);
+                console.error("[Zaplier] Session replay error:", error);
             }
         }
         /**
@@ -7381,7 +7375,7 @@
      */
     class ZaplierSDK {
         constructor(userConfig) {
-            this.version = "3.0.0";
+            this.version = "1.3.0";
             this.isInitialized = false;
             this.eventQueue = [];
             /**
@@ -7451,19 +7445,58 @@
                             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,
                         });
                         // Connect to anti-adblock manager
                         if (this.antiAdblockManager) {
-                            this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
+                            this.replayEngine.setSDKInstance(this);
+                        }
+                        const started = this.replayEngine.start();
+                        if (this.config.debug) {
+                            console.log("[Zaplier] Replay enabled", {
+                                started,
+                                isRecording: this.replayEngine.isRecording(),
+                            });
                         }
-                        this.replayEngine.start();
                     }
-                    if (this.config.debug) {
-                        console.log("[Zaplier] Replay enabled");
+                    else if (this.replayEngine) {
+                        // If engine already exists but isn't recording, recreate it with 100% sample rate
+                        if (!this.replayEngine.isRecording()) {
+                            // Stop and recreate with 100% sample rate
+                            this.replayEngine.stop();
+                            this.replayEngine = undefined;
+                            // Recreate with 100% sample rate
+                            if (!this.sessionId) {
+                                this.sessionId = this.generateSessionId();
+                            }
+                            const sessionId = this.sessionId;
+                            this.replayEngine = new SessionReplayEngine(sessionId, {
+                                sampleRate: 1.0, // Force 100% when explicitly enabled
+                                maskSensitiveFields: this.config.replayMaskInputs,
+                                compressionEnabled: true,
+                            });
+                            // Connect to anti-adblock manager
+                            if (this.antiAdblockManager) {
+                                this.replayEngine.setSDKInstance(this);
+                            }
+                            const started = this.replayEngine.start();
+                            if (this.config.debug) {
+                                console.log("[Zaplier] Replay engine recreated with 100% sample rate", { started, isRecording: this.replayEngine.isRecording() });
+                            }
+                        }
+                        else {
+                            // Already recording, just log
+                            if (this.config.debug) {
+                                console.log("[Zaplier] Replay already recording");
+                            }
+                        }
+                    }
+                    if (this.config.debug && !this.replayEngine) {
+                        console.log("[Zaplier] Replay enabled (will start when SDK initializes)");
                     }
                 },
                 disable: () => {
@@ -7490,7 +7523,7 @@
                         });
                         // Connect to anti-adblock manager
                         if (this.antiAdblockManager) {
-                            this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
+                            this.replayEngine.setSDKInstance(this);
                         }
                         return this.replayEngine.start();
                     }
@@ -7586,18 +7619,23 @@
                 }
                 // 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,
                     });
-                    // Connect to anti-adblock manager for WebRTC transport
-                    if (this.antiAdblockManager) {
-                        this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
-                    }
-                    this.replayEngine.start();
+                    // Connect SDK instance for transport
+                    this.replayEngine.setSDKInstance(this);
+                    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
@@ -7876,6 +7914,46 @@
                 }
             }
         }
+        /**
+         * Send session replay batch to backend
+         */
+        async sendReplayBatch(replayData) {
+            if (!this.isInitialized) {
+                console.error("[Zaplier] SDK not initialized for replay batch sending");
+                return { success: false, error: "SDK not initialized" };
+            }
+            try {
+                const payload = {
+                    sessionId: replayData.sessionId,
+                    userId: this.backendVisitorId,
+                    events: replayData.events,
+                    metadata: {
+                        ...replayData.metadata,
+                        visitorId: this.backendVisitorId,
+                        fingerprintHash: this.fingerprint?.hash,
+                    },
+                };
+                if (this.config.debug) {
+                    console.log("[Zaplier] Sending replay batch:", {
+                        sessionId: payload.sessionId,
+                        eventCount: payload.events.length,
+                        hasMetadata: !!payload.metadata,
+                    });
+                }
+                // Use anti-adblock transport or standard HTTP
+                const result = await this.makeRequest(`/replays/record?token=${encodeURIComponent(this.config.token)}`, payload, "POST");
+                if (this.config.debug) {
+                    console.log("[Zaplier] Replay batch result:", result);
+                }
+                return result;
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.error("[Zaplier] Replay batch sending failed:", error);
+                }
+                return { success: false, error: error instanceof Error ? error.message : "Unknown error" };
+            }
+        }
         /**
          * Make HTTP request to backend using anti-adblock system
          */