@zaplier/sdk 1.3.7 → 1.4.1

package/dist/index.esm.js

@@ -19006,35 +19006,25 @@ var n;
 !function(t2) {
   t2[t2.NotStarted = 0] = "NotStarted", t2[t2.Running = 1] = "Running", t2[t2.Stopped = 2] = "Stopped";
 }(n || (n = {}));
-const { takeFullSnapshot } = record;
 
 /**
- * Session Replay Engine
- * Uses rrweb to capture DOM snapshots and events for session replay
+ * Session Replay Engine - Simplified Implementation
+ * Based on official rrweb example for maximum compatibility
  */
 class SessionReplayEngine {
     constructor(sessionId, config = {}) {
         this.events = [];
         this.isActive = false;
-        this.hasFullSnapshot = false;
-        this.startTime = 0;
         this.sessionId = sessionId;
         this.config = {
             enabled: true,
-            sampleRate: 1.0, // 100% for development/testing
-            maskSensitiveFields: true,
-            maxEventBuffer: 1000,
-            batchInterval: 2000, // Send every 2 seconds for faster testing
-            captureClicks: true,
-            captureScrolls: true,
-            captureInputs: true,
-            captureMouseMoves: false, // Disabled by default for performance
-            compressionEnabled: true,
+            sampleRate: 1.0,
+            batchInterval: 10000, // 10 seconds like official example
             ...config,
         };
     }
     /**
-     * Start session replay recording using rrweb
+     * Start session replay recording - Simplified like official example
      */
     start() {
         if (!this.config.enabled || this.isActive) {
@@ -19045,60 +19035,24 @@ class SessionReplayEngine {
             return false;
         }
         try {
-            // Start rrweb recording
-            // Using minimal configuration to avoid known bugs in alpha versions
-            // blockSelector and maskTextSelector removed due to node.matches error
+            // Simple rrweb recording configuration like official example
             this.rrwebStopRecord = record({
                 emit: (event) => {
-                    this.handleRRWebEvent(event);
+                    // CRITICAL: Ensure FullSnapshot is always first event
+                    if (this.events.length === 0 && event.type !== 2) {
+                        console.warn(`[Zaplier] First event is type ${event.type}, not FullSnapshot (2). Skipping until FullSnapshot.`);
+                        return; // Skip non-FullSnapshot events if no FullSnapshot captured yet
+                    }
+                    // Simple event capture
+                    this.events.push(event);
+                    if (event.type === 2) {
+                        console.log(`[Zaplier] ✅ FullSnapshot captured as event #${this.events.length}`);
+                    }
                 },
-                maskAllInputs: this.config.maskSensitiveFields,
-                // maskTextSelector removed - causes node.matches error in some cases
-                // blockSelector removed - causes node.matches error
-                recordCanvas: false, // Disable canvas recording for performance
-                recordCrossOriginIframes: false,
-                inlineStylesheet: true,
-                collectFonts: false, // Disable font collection for smaller payloads
             });
             this.isActive = true;
-            this.hasFullSnapshot = false;
-            this.startTime = Date.now();
             this.startBatchTimer();
-            // WORKAROUND: Force FullSnapshot creation IMMEDIATELY to fix rrweb 2.0.0-alpha bug
-            // where FullSnapshot is sometimes not created as the first event
-            setTimeout(() => {
-                if (!this.hasFullSnapshot) {
-                    console.log("[Zaplier] Forcing immediate FullSnapshot to ensure correct event order...");
-                    try {
-                        takeFullSnapshot(true); // Force a new FullSnapshot immediately
-                        console.log("[Zaplier] FullSnapshot manually triggered");
-                    }
-                    catch (error) {
-                        console.error("[Zaplier] Failed to force FullSnapshot:", error);
-                    }
-                }
-            }, 50); // Very short delay but let natural events come first
-            // Set timeout to check if FullSnapshot was captured
-            this.snapshotTimeout = window.setTimeout(() => {
-                if (!this.hasFullSnapshot) {
-                    console.error("[Zaplier] CRITICAL: FullSnapshot not captured after 5 seconds!", {
-                        eventsReceived: this.events.length,
-                        eventTypes: this.events.map((e) => e.type).slice(0, 10),
-                    });
-                    // Try one more forced snapshot as last resort
-                    try {
-                        console.warn("[Zaplier] Last resort: forcing FullSnapshot...");
-                        takeFullSnapshot(true);
-                    }
-                    catch (error) {
-                        console.error("[Zaplier] Failed to create emergency FullSnapshot:", error);
-                    }
-                }
-                else {
-                    console.log("[Zaplier] ✅ FullSnapshot confirmed captured");
-                }
-            }, 5000);
-            console.log("[Zaplier] Session replay started with rrweb");
+            console.log("[Zaplier] Session replay started - simple mode");
             return true;
         }
         catch (error) {
@@ -19122,87 +19076,9 @@ class SessionReplayEngine {
             clearInterval(this.batchTimer);
             this.batchTimer = undefined;
         }
-        if (this.snapshotTimeout) {
-            clearTimeout(this.snapshotTimeout);
-            this.snapshotTimeout = undefined;
-        }
         // Send final batch
         this.sendBatch();
     }
-    /**
-     * Handle events from rrweb
-     */
-    handleRRWebEvent(event) {
-        try {
-            // Log ALL events until we get FullSnapshot, then log first 5
-            const shouldLog = !this.hasFullSnapshot || this.events.length < 5;
-            if (shouldLog) {
-                const eventTypeNames = {
-                    [EventType.DomContentLoaded]: "DomContentLoaded",
-                    [EventType.Load]: "Load",
-                    [EventType.FullSnapshot]: "FullSnapshot",
-                    [EventType.IncrementalSnapshot]: "IncrementalSnapshot",
-                    [EventType.Meta]: "Meta",
-                    [EventType.Custom]: "Custom",
-                    [EventType.Plugin]: "Plugin",
-                };
-                console.log(`[Zaplier] Received event type ${event.type} (${eventTypeNames[event.type] || "Unknown"})`, {
-                    timestamp: new Date(event.timestamp).toISOString(),
-                    isFirst: this.events.length === 0,
-                    totalEvents: this.events.length + 1,
-                });
-            }
-            // Check if this is a FullSnapshot
-            if (event.type === EventType.FullSnapshot) {
-                this.hasFullSnapshot = true;
-                console.log("[Zaplier] ✅ FullSnapshot captured! Replay will work correctly.");
-                // Clear timeout since we got the snapshot
-                if (this.snapshotTimeout) {
-                    clearTimeout(this.snapshotTimeout);
-                    this.snapshotTimeout = undefined;
-                }
-            }
-            else if (this.events.length === 0) {
-                // First event is NOT a FullSnapshot - this is a problem!
-                console.error(`[Zaplier] ⚠️ WARNING: First event is type ${event.type}, not FullSnapshot! Replay may not work.`);
-            }
-            // Add event to buffer
-            this.addEvent(event);
-            // If we just got the FullSnapshot and have events, try sending immediately
-            if (event.type === EventType.FullSnapshot && this.events.length > 0) {
-                // Small delay to ensure all initial events are captured
-                setTimeout(() => {
-                    this.sendBatch();
-                }, 100);
-            }
-        }
-        catch (error) {
-            // Silently ignore errors from rrweb to prevent breaking the app
-            // The error is likely from rrweb's internal processing
-            console.warn("[Zaplier] Error handling rrweb event:", error);
-        }
-    }
-    /**
-     * Add event to buffer
-     */
-    addEvent(event) {
-        this.events.push(event);
-        // Prevent memory overflow
-        if (this.events.length > this.config.maxEventBuffer) {
-            // Keep FullSnapshot if present
-            const fullSnapshotIndex = this.events.findIndex((e) => e.type === EventType.FullSnapshot);
-            if (fullSnapshotIndex >= 0 &&
-                fullSnapshotIndex < this.events.length - this.config.maxEventBuffer) {
-                // Keep snapshot and recent events
-                const snapshot = this.events[fullSnapshotIndex];
-                const recentEvents = this.events.slice(-this.config.maxEventBuffer + 1);
-                this.events = [snapshot, ...recentEvents];
-            }
-            else {
-                this.events = this.events.slice(-this.config.maxEventBuffer);
-            }
-        }
-    }
     /**
      * Start batch timer
      */
@@ -19212,48 +19088,29 @@ class SessionReplayEngine {
         }, this.config.batchInterval);
     }
     /**
-     * Send batch of events
+     * Send batch of events - Simplified like official example
      */
     sendBatch() {
         if (this.events.length === 0) {
             return;
         }
-        // CRITICAL: Never send batches without FullSnapshot - replay won't work!
-        if (!this.hasFullSnapshot) {
-            const waitTime = Date.now() - this.startTime;
-            // Only log every 2 seconds to avoid spam
-            if (waitTime % 2000 < 100) {
-                console.warn(`[Zaplier] Waiting for FullSnapshot before sending batch... (${Math.floor(waitTime / 1000)}s). Events so far: ${this.events.length}, types:`, this.events.map((e) => e.type).slice(0, 5));
-            }
-            return; // Don't send without FullSnapshot
-        }
-        const batch = [...this.events];
-        this.events = [];
-        // IMPORTANT: Ensure FullSnapshot comes first in the batch
-        const fullSnapshotIndex = batch.findIndex((e) => e.type === EventType.FullSnapshot);
-        if (fullSnapshotIndex > 0) {
-            console.log("[Zaplier] Reordering events - moving FullSnapshot to first position");
-            const fullSnapshot = batch.splice(fullSnapshotIndex, 1)[0];
-            if (fullSnapshot) {
-                batch.unshift(fullSnapshot);
-            }
-        }
-        // Verify batch has FullSnapshot
-        const hasSnapshot = batch.some((e) => e.type === EventType.FullSnapshot);
-        if (!hasSnapshot && this.hasFullSnapshot) {
-            console.warn("[Zaplier] Batch missing FullSnapshot, but one was captured earlier");
-        }
-        console.log(`[Zaplier] Sending batch with ${batch.length} events for session ${this.sessionId}`, { hasSnapshot, firstEventType: batch[0]?.type, eventTypes: batch.slice(0, 5).map(e => e.type) });
+        // Simple payload structure like official example
         const payload = {
             sessionId: this.sessionId,
-            events: batch,
+            events: [...this.events], // Copy events array
             metadata: {
                 userAgent: navigator.userAgent,
                 timestamp: Date.now(),
-                compression: this.config.compressionEnabled,
+                startUrl: window.location.href,
+                duration: Date.now() - (performance.timeOrigin || Date.now()),
+                funnelSteps: [],
+                hasConversion: false,
             },
         };
-        // This will be handled by the anti-adblock manager
+        // Reset events array like official example
+        this.events = [];
+        console.log(`[Zaplier] Sending batch with ${payload.events.length} events`);
+        // Send to backend
         this.sendToBackend(payload);
     }
     /**
@@ -19271,24 +19128,8 @@ class SessionReplayEngine {
                 console.error("[Zaplier] No SDK instance available for replay transport");
                 return;
             }
-            console.log(`[Zaplier] Sending replay batch via SDK transport`);
-            console.log(`[Zaplier] Payload:`, {
-                sessionId: payload.sessionId,
-                eventCount: payload.events.length,
-                hasMetadata: !!payload.metadata,
-            });
-            // Use SDK's sendReplayBatch method
-            const result = await this.sdkInstance.sendReplayBatch({
-                sessionId: payload.sessionId,
-                events: payload.events,
-                metadata: {
-                    startUrl: window.location.href,
-                    duration: Date.now() - (performance.timeOrigin || Date.now()),
-                    funnelSteps: [],
-                    hasConversion: false,
-                    ...payload.metadata,
-                },
-            });
+            // Use SDK's sendReplayBatch method with simplified payload
+            const result = await this.sdkInstance.sendReplayBatch(payload);
             if (result && result.success) {
                 console.log("[Zaplier] Session replay batch sent successfully");
             }
@@ -19418,8 +19259,6 @@ class ZaplierSDK {
                     // When explicitly enabled, use 100% sample rate
                     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) {
@@ -19446,8 +19285,6 @@ class ZaplierSDK {
                         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) {
@@ -19488,8 +19325,6 @@ class ZaplierSDK {
                     const sessionId = this.sessionId;
                     this.replayEngine = new SessionReplayEngine(sessionId, {
                         sampleRate: 1.0, // Force recording when manually started
-                        maskSensitiveFields: this.config.replayMaskInputs,
-                        compressionEnabled: true,
                     });
                     // Connect to anti-adblock manager
                     if (this.antiAdblockManager) {
@@ -19594,8 +19429,6 @@ class ZaplierSDK {
                 const sampleRate = this.config.replay === true ? 1.0 : this.config.replaySampling;
                 this.replayEngine = new SessionReplayEngine(this.sessionId, {
                     sampleRate: sampleRate,
-                    maskSensitiveFields: this.config.replayMaskInputs,
-                    compressionEnabled: true,
                 });
                 // Connect SDK instance for transport
                 this.replayEngine.setSDKInstance(this);