humanbehavior-js 0.4.5 → 0.4.7

package/dist/cjs/react/index.cjs

@@ -13230,6 +13230,8 @@ class HumanBehaviorTracker {
         this._connectionBlocked = false;
         this.recordInstance = null;
         this.sessionStartTime = Date.now();
+        this.rrwebRecord = null;
+        this.fullSnapshotTimeout = null;
         if (!apiKey) {
             throw new Error('Human Behavior API Key is required');
         }
@@ -13337,6 +13339,8 @@ class HumanBehaviorTracker {
             this.originalPushState.apply(history, args);
             // Track navigation event
             this.trackNavigationEvent('pushState', this.previousUrl, this.currentUrl);
+            // Take FullSnapshot on navigation (like PostHog does)
+            this.takeFullSnapshot();
         };
         // Override replaceState to capture programmatic navigation
         history.replaceState = (...args) => {
@@ -13346,12 +13350,16 @@ class HumanBehaviorTracker {
             this.originalReplaceState.apply(history, args);
             // Track navigation event
             this.trackNavigationEvent('replaceState', this.previousUrl, this.currentUrl);
+            // Take FullSnapshot on navigation (like PostHog does)
+            this.takeFullSnapshot();
         };
         // Listen for popstate events (back/forward navigation)
         const popstateListener = () => {
             this.previousUrl = this.currentUrl;
             this.currentUrl = window.location.href;
             this.trackNavigationEvent('popstate', this.previousUrl, this.currentUrl);
+            // Take FullSnapshot on navigation (like PostHog does)
+            this.takeFullSnapshot();
         };
         window.addEventListener('popstate', popstateListener);
         this.navigationListeners.push(() => {
@@ -13779,13 +13787,14 @@ class HumanBehaviorTracker {
             this.flushInterval = window.setInterval(() => {
                 this.flush();
             }, this.FLUSH_INTERVAL_MS);
-            // Enable console tracking
-            this.enableConsoleTracking();
+            // Disable console tracking to reduce event pollution
+            // this.enableConsoleTracking();
             // ✅ DOM READY DETECTION
             // Wait for DOM to be ready before starting recording
             const startRecording = () => {
                 logDebug('🎯 DOM ready, starting session recording');
                 // ✅ HUMANBEHAVIOR RRWEB CONFIGURATION
+                this.rrwebRecord = record;
                 const recordInstance = record({
                     emit: (event) => {
                         // ✅ DIRECT EVENT HANDLING - Let rrweb handle events natively
@@ -13807,12 +13816,12 @@ class HumanBehaviorTracker {
                     recordCrossOriginIframes: false, // HumanBehavior default
                     // ✅ CANVAS RECORDING - Disabled to prevent large data URIs
                     recordCanvas: false, // Disabled to prevent large data URIs
-                    // ✅ FULLSNAPSHOT GENERATION - Use reasonable intervals
-                    checkoutEveryNms: 300000, // Take FullSnapshot every 5 minutes
-                    checkoutEveryNth: 1000, // Take FullSnapshot every 1000 events
+                    // ✅ FULLSNAPSHOT GENERATION - Following PostHog's approach (no periodic snapshots)
+                    // PostHog doesn't use checkoutEveryNms or checkoutEveryNth to avoid animation issues
+                    // They rely on initial FullSnapshot + navigation-triggered ones only
                 });
-                // Store the record instance for cleanup
-                this.recordInstance = recordInstance;
+                // Store the record instance for cleanup 
+                this.recordInstance = recordInstance || null;
             };
             // ✅ DOM READY DETECTION
             logDebug(`🎯 DOM ready state: ${document.readyState}`);
@@ -13831,6 +13840,37 @@ class HumanBehaviorTracker {
             }
         });
     }
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    takeFullSnapshot() {
+        // Clear any existing timeout to avoid multiple snapshots
+        if (this.fullSnapshotTimeout) {
+            clearTimeout(this.fullSnapshotTimeout);
+        }
+        // Delay FullSnapshot to let animations settle
+        this.fullSnapshotTimeout = window.setTimeout(() => {
+            try {
+                // Wait for any pending animations/transitions to complete
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        // Access takeFullSnapshot from the rrweb record function
+                        if (this.rrwebRecord && typeof this.rrwebRecord.takeFullSnapshot === 'function') {
+                            this.rrwebRecord.takeFullSnapshot();
+                            logDebug('✅ FullSnapshot taken for navigation (delayed for animations)');
+                        }
+                        else {
+                            logWarn('⚠️ takeFullSnapshot not available on record function');
+                        }
+                    });
+                });
+            }
+            catch (error) {
+                logError('❌ Failed to take FullSnapshot for navigation:', error);
+            }
+        }, 1000); // Wait 1 second for animations to settle
+    }
     stop() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.ensureInitialized();
@@ -13845,6 +13885,12 @@ class HumanBehaviorTracker {
                 this.recordInstance();
                 this.recordInstance = null;
             }
+            // Clear any pending FullSnapshot timeouts
+            if (this.fullSnapshotTimeout) {
+                clearTimeout(this.fullSnapshotTimeout);
+                this.fullSnapshotTimeout = null;
+            }
+            this.rrwebRecord = null;
             // Disable console tracking
             this.disableConsoleTracking();
             // Cleanup navigation tracking