humanbehavior-js 0.4.5 → 0.4.7

package/dist/types/angular/index.d.ts

@@ -34,6 +34,8 @@ declare class HumanBehaviorTracker {
     private _connectionBlocked;
     private recordInstance;
     private sessionStartTime;
+    private rrwebRecord;
+    private fullSnapshotTimeout;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -117,6 +119,11 @@ declare class HumanBehaviorTracker {
      */
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot;
     stop(): Promise<void>;
     /**
      * Add an event to the ingestion queue

package/dist/types/index.d.ts

@@ -124,6 +124,8 @@ declare class HumanBehaviorTracker {
     private _connectionBlocked;
     private recordInstance;
     private sessionStartTime;
+    private rrwebRecord;
+    private fullSnapshotTimeout;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -207,6 +209,11 @@ declare class HumanBehaviorTracker {
      */
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot;
     stop(): Promise<void>;
     /**
      * Add an event to the ingestion queue

package/dist/types/react/index.d.ts

@@ -36,6 +36,8 @@ declare class HumanBehaviorTracker {
     private _connectionBlocked;
     private recordInstance;
     private sessionStartTime;
+    private rrwebRecord;
+    private fullSnapshotTimeout;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -119,6 +121,11 @@ declare class HumanBehaviorTracker {
      */
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot;
     stop(): Promise<void>;
     /**
      * Add an event to the ingestion queue

package/dist/types/remix/index.d.ts

@@ -37,6 +37,8 @@ declare class HumanBehaviorTracker {
     private _connectionBlocked;
     private recordInstance;
     private sessionStartTime;
+    private rrwebRecord;
+    private fullSnapshotTimeout;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -120,6 +122,11 @@ declare class HumanBehaviorTracker {
      */
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot;
     stop(): Promise<void>;
     /**
      * Add an event to the ingestion queue

package/dist/types/svelte/index.d.ts

@@ -34,6 +34,8 @@ declare class HumanBehaviorTracker {
     private _connectionBlocked;
     private recordInstance;
     private sessionStartTime;
+    private rrwebRecord;
+    private fullSnapshotTimeout;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -117,6 +119,11 @@ declare class HumanBehaviorTracker {
      */
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot;
     stop(): Promise<void>;
     /**
      * Add an event to the ingestion queue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/tracker.ts

@@ -1,4 +1,5 @@
 import { record } from '@rrweb/record';
+import type { listenerHandler } from '@rrweb/types';
 import { v1 as uuidv1 } from 'uuid';
 import { HumanBehaviorAPI } from './api';
 import { RedactionManager, RedactionOptions } from './redact';
@@ -45,8 +46,10 @@ export class HumanBehaviorTracker {
     private originalReplaceState: typeof history.replaceState | null = null;
     private navigationListeners: Array<() => void> = [];
     private _connectionBlocked: boolean = false;
-    private recordInstance: any = null;
+    private recordInstance: listenerHandler | null = null;
     private sessionStartTime: number = Date.now();
+    private rrwebRecord: any = null;
+    private fullSnapshotTimeout: number | null = null;
 
     /**
      * Initialize the HumanBehavior tracker
@@ -225,6 +228,9 @@ export class HumanBehaviorTracker {
             
             // 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
@@ -237,6 +243,9 @@ export class HumanBehaviorTracker {
             
             // 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)
@@ -244,6 +253,9 @@ export class HumanBehaviorTracker {
             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);
@@ -751,8 +763,8 @@ export class HumanBehaviorTracker {
             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
@@ -760,6 +772,7 @@ export class HumanBehaviorTracker {
             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
@@ -784,13 +797,13 @@ export class HumanBehaviorTracker {
             // ✅ 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
@@ -809,6 +822,37 @@ export class HumanBehaviorTracker {
         }
     }
 
+    /**
+     * Manually trigger a FullSnapshot (for navigation events)
+     * Delays snapshot to avoid capturing mid-animation states
+     */
+    private takeFullSnapshot(): void {
+        // 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
+    }
+
     public async stop() {
         await this.ensureInitialized();
         if (!isBrowser) return;
@@ -823,6 +867,14 @@ export 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();