@zaplier/sdk 1.2.6 → 1.3.0

package/dist/index.d.ts

@@ -769,6 +769,14 @@ declare class ZaplierSDK implements ZaplierSDK$1 {
      * Send event to backend
      */
     private sendEvent;
+    /**
+     * Send session replay batch to backend
+     */
+    sendReplayBatch(replayData: {
+        sessionId: string;
+        events: any[];
+        metadata: any;
+    }): Promise<any>;
     /**
      * Make HTTP request to backend using anti-adblock system
      */

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());
     }
     /**
@@ -7248,7 +7262,7 @@ class SessionReplayEngine {
      */
     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];
@@ -7260,44 +7274,35 @@ class SessionReplayEngine {
             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: {
@@ -7305,29 +7310,18 @@ class SessionReplayEngine {
                     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);
         }
     }
     /**
@@ -7375,7 +7369,7 @@ const DEFAULT_CONFIG = {
  */
 class ZaplierSDK {
     constructor(userConfig) {
-        this.version = "3.0.0";
+        this.version = "1.3.0";
         this.isInitialized = false;
         this.eventQueue = [];
         /**
@@ -7445,19 +7439,58 @@ 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,
                     });
                     // 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: () => {
@@ -7484,7 +7517,7 @@ class ZaplierSDK {
                     });
                     // Connect to anti-adblock manager
                     if (this.antiAdblockManager) {
-                        this.replayEngine.setAntiAdblockManager(this.antiAdblockManager);
+                        this.replayEngine.setSDKInstance(this);
                     }
                     return this.replayEngine.start();
                 }
@@ -7580,18 +7613,23 @@ 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,
                 });
-                // 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
@@ -7870,6 +7908,46 @@ class ZaplierSDK {
             }
         }
     }
+    /**
+     * 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
      */