humanbehavior-js 0.3.2 → 0.3.3

package/dist/types/index.d.ts

@@ -9,7 +9,8 @@ declare class RedactionManager {
     private excludeSelectors;
     constructor(options?: RedactionOptions);
     /**
-     * Set specific fields to be redacted
+     * Set specific fields to be redacted using CSS selectors
+     * These selectors are used to configure rrweb's built-in masking
      * @param fields Array of CSS selectors for fields to redact
      */
     setFieldsToRedact(fields: string[]): void;
@@ -23,6 +24,8 @@ declare class RedactionManager {
     getSelectedFields(): string[];
     /**
      * Process an event and redact sensitive data if needed
+     * NOTE: This method is no longer used - events are handled directly by rrweb
+     * Kept for backward compatibility but not called in the current implementation
      */
     processEvent(event: any): any;
     /**
@@ -66,9 +69,20 @@ declare class RedactionManager {
      */
     private isFieldSelected;
     /**
-     * Check if an element should be redacted based on user-selected fields
+     * Get CSS selectors for rrweb masking configuration
+     * Used to configure rrweb's maskTextSelector option
      */
-    private shouldRedactElement;
+    getMaskTextSelector(): string | null;
+    /**
+     * Check if an element should be redacted (for rrweb maskTextFn/maskInputFn)
+     */
+    shouldRedactElement(element: HTMLElement): boolean;
+    /**
+     * Apply rrweb masking classes to DOM elements
+     * Adds 'rr-mask' class to elements that should be redacted
+     * This enables rrweb's built-in masking functionality
+     */
+    applyRedactionClasses(): void;
     /**
      * Get the original value of a redacted element (for debugging)
      */
@@ -88,7 +102,6 @@ declare global {
 }
 declare class HumanBehaviorTracker {
     private eventIngestionQueue;
-    private queueSizeBytes;
     private sessionId;
     private userProperties;
     private isProcessing;
@@ -110,7 +123,6 @@ declare class HumanBehaviorTracker {
     private navigationListeners;
     private _connectionBlocked;
     private recordInstance;
-    private frequencyUpdateInterval;
     private sessionStartTime;
     /**
      * Initialize the HumanBehavior tracker
@@ -140,13 +152,7 @@ declare class HumanBehaviorTracker {
      * Track navigation events and send custom events
      */
     trackNavigationEvent(type: string, fromUrl: string, toUrl: string): Promise<void>;
-    /**
-     * Track a page view event (PostHog-style)
-     */
     trackPageView(url?: string): Promise<void>;
-    /**
-     * Track a custom event (PostHog-style)
-     */
     customEvent(eventName: string, properties?: Record<string, any>): Promise<void>;
     /**
      * Setup automatic tracking for buttons, links, and forms
@@ -203,7 +209,15 @@ declare class HumanBehaviorTracker {
     getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
     stop(): Promise<void>;
+    /**
+     * Add an event to the ingestion queue
+     * Events are sent directly without processing to avoid corruption
+     */
     addEvent(event: any): Promise<void>;
+    /**
+     * Flush events to the ingestion server
+     * Events are sent in chunks to handle large payloads efficiently
+     */
     private flush;
     private setCookie;
     getCookie(name: string): string | null;
@@ -225,9 +239,11 @@ declare class HumanBehaviorTracker {
     redact(options?: RedactionOptions): Promise<void>;
     /**
      * Set specific fields to be redacted during session recording
+     * Uses rrweb's built-in masking instead of custom redaction processing
      * @param fields Array of CSS selectors for fields to redact (e.g., ['input[type="password"]', '#email-field'])
      */
     setRedactedFields(fields: string[]): void;
+    private restartWithNewRedaction;
     /**
      * Check if redaction is currently active
      */
@@ -246,6 +262,7 @@ declare class HumanBehaviorTracker {
     getCurrentUrl(): string;
     /**
      * Get current snapshot frequency info
+     * Uses rrweb's sensible defaults (5 seconds, 100 events)
      */
     getSnapshotFrequencyInfo(): {
         sessionDuration: number;

package/package.json

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

package/src/react/index.tsx

@@ -111,6 +111,17 @@ export const HumanBehaviorProvider = ({ apiKey, client, children, options }: Hum
       apiKeyRef.current.trim(), 
       'https://ingest.humanbehavior.co'
     );
+    
+    // ✅ APPLY LOGGING CONFIGURATION FROM OPTIONS
+    if (options?.logLevel) {
+      HumanBehaviorTracker.configureLogging({ level: options.logLevel });
+    }
+    
+    // ✅ APPLY REDACTION FIELDS FROM OPTIONS
+    if (options?.redactFields && options.redactFields.length > 0) {
+      tracker.setRedactedFields(options.redactFields);
+    }
+    
     setHumanBehavior(tracker);
 
     // Wait for initialization to complete

package/src/redact.ts

@@ -1,5 +1,6 @@
 // Redaction functionality for sensitive input fields
-// This module provides methods to redact sensitive input fields in event recordings
+// This module provides methods to configure rrweb's built-in masking
+// Uses CSS selectors and classes for reliable redaction without event corruption
 
 import { logDebug, logWarn } from './utils/logger';
 
@@ -33,7 +34,8 @@ export class RedactionManager {
     }
 
     /**
-     * Set specific fields to be redacted
+     * Set specific fields to be redacted using CSS selectors
+     * These selectors are used to configure rrweb's built-in masking
      * @param fields Array of CSS selectors for fields to redact
      */
     public setFieldsToRedact(fields: string[]): void {
@@ -72,6 +74,8 @@ export class RedactionManager {
 
     /**
      * Process an event and redact sensitive data if needed
+     * NOTE: This method is no longer used - events are handled directly by rrweb
+     * Kept for backward compatibility but not called in the current implementation
      */
     public processEvent(event: any): any {
         // Only process if we have fields selected for redaction
@@ -431,26 +435,67 @@ export class RedactionManager {
     }
 
     /**
-     * Check if an element should be redacted based on user-selected fields
+     * Get CSS selectors for rrweb masking configuration
+     * Used to configure rrweb's maskTextSelector option
      */
-    private shouldRedactElement(element: HTMLElement): boolean {
-        // Check if element is excluded from redaction
-        for (const excludeSelector of this.excludeSelectors) {
-            if (element.matches(excludeSelector) || element.closest(excludeSelector)) {
-                return false;
-            }
+    public getMaskTextSelector(): string | null {
+        if (this.userSelectedFields.size === 0) {
+            return null;
         }
+        return Array.from(this.userSelectedFields).join(',');
+    }
 
-        // Check if element matches any of the user-selected fields
+    /**
+     * Check if an element should be redacted (for rrweb maskTextFn/maskInputFn)
+     */
+    public shouldRedactElement(element: HTMLElement): boolean {
+        if (this.userSelectedFields.size === 0) {
+            return false;
+        }
+
+        // Check if any selector matches this element
         for (const selector of this.userSelectedFields) {
-            if (element.matches(selector)) {
-                return true;
+            try {
+                if (element.matches(selector)) {
+                    return true;
+                }
+            } catch (e) {
+                // Invalid selector, skip
+                logWarn(`Invalid selector: ${selector}`);
             }
         }
-
         return false;
     }
 
+    /**
+     * Apply rrweb masking classes to DOM elements
+     * Adds 'rr-mask' class to elements that should be redacted
+     * This enables rrweb's built-in masking functionality
+     */
+    public applyRedactionClasses(): void {
+        if (this.userSelectedFields.size === 0) {
+            return;
+        }
+
+        // Remove existing redaction classes
+        document.querySelectorAll('.rr-mask').forEach(element => {
+            element.classList.remove('rr-mask');
+        });
+
+        // Add redaction classes to matching elements
+        this.userSelectedFields.forEach(selector => {
+            try {
+                const elements = document.querySelectorAll(selector);
+                elements.forEach(element => {
+                    element.classList.add('rr-mask');
+                });
+                logDebug(`Applied rr-mask class to ${elements.length} element(s) for selector: ${selector}`);
+            } catch (e) {
+                logWarn(`Invalid selector: ${selector}`);
+            }
+        });
+    }
+
     /**
      * Get the original value of a redacted element (for debugging)
      */

package/src/tracker.ts

@@ -17,8 +17,6 @@ declare global {
 
 export class HumanBehaviorTracker {
     private eventIngestionQueue: any[] = [];
-    private queueSizeBytes: number = 0;
-
     private sessionId!: string;
     private userProperties: Record<string, any> = {};
     private isProcessing: boolean = false;
@@ -48,7 +46,6 @@ export class HumanBehaviorTracker {
     private navigationListeners: Array<() => void> = [];
     private _connectionBlocked: boolean = false;
     private recordInstance: any = null;
-    private frequencyUpdateInterval: any = null;
     private sessionStartTime: number = Date.now();
 
     /**
@@ -85,6 +82,8 @@ export class HumanBehaviorTracker {
         // Set redacted fields if specified
         if (options?.redactFields) {
             tracker.setRedactedFields(options.redactFields);
+            // ✅ Apply redaction classes to existing elements
+            tracker.redactionManager.applyRedactionClasses();
         }
 
         // Setup automatic tracking if enabled
@@ -304,9 +303,6 @@ export class HumanBehaviorTracker {
         }
     }
 
-    /**
-     * Track a page view event (PostHog-style)
-     */
     public async trackPageView(url?: string): Promise<void> {
         if (!this.initialized) return;
 
@@ -338,9 +334,6 @@ export class HumanBehaviorTracker {
         }
     }
 
-    /**
-     * Track a custom event (PostHog-style)
-     */
     public async customEvent(eventName: string, properties?: Record<string, any>): Promise<void> {
         if (!this.initialized) return;
 
@@ -739,7 +732,6 @@ export class HumanBehaviorTracker {
         await this.api.sendUserData(originalEndUserId!, userProperties, this.sessionId);
         
         // Don't update endUserId - keep it as the original UUID
-        // The posthogName will be updated on the server side with the email
         
         return originalEndUserId || '';
     }
@@ -762,70 +754,31 @@ export class HumanBehaviorTracker {
         // Enable console tracking
         this.enableConsoleTracking();
 
-            // Adaptive snapshot configuration based on session duration
-    const sessionStartTime = Date.now();
-    let snapshotInterval = 5000; // Start with 5 seconds
-    let eventThreshold = 100; // Start with 100 events
-    
-    // Function to update snapshot frequency based on session duration
-    const updateSnapshotFrequency = () => {
-        const sessionDuration = Date.now() - sessionStartTime;
-        const thirtyMinutes = 30 * 60 * 1000;
-        const twoHours = 2 * 60 * 60 * 1000;
-        const fourHours = 4 * 60 * 60 * 1000;
+        // ✅ SIMPLIFIED RECORDING - Use rrweb's proven defaults
+        // No complex adaptive logic - rrweb's defaults work well for most use cases
+        const recordInstance = rrweb.record({
+            emit: (event) => {
+                // ✅ DIRECT EVENT HANDLING - Let rrweb handle events natively
+                this.addEvent(event);
+            },
+            inlineStylesheet: true,
+            recordCanvas: true,
+            collectFonts: true,
+            inlineImages: true,
+            blockClass: 'rr-block',
+            ignoreClass: 'rr-ignore',
+            maskTextClass: 'rr-mask',
+            
+            // ✅ RRWEB BUILT-IN MASKING - More reliable than custom redaction
+            maskAllInputs: false, // Let users control this via selectors
+            maskTextSelector: this.redactionManager.getMaskTextSelector() || undefined,
+            
+            // ✅ SELECTOR-BASED REDACTION - Users control via CSS selectors
+            // No custom masking functions needed - rrweb handles this natively
+        });
         
-        if (sessionDuration > twoHours) {
-            // After 2 hours, very infrequent snapshots
-            snapshotInterval = 30000; // 30 seconds
-            eventThreshold = 500; // 500 events
-            logDebug('Reduced snapshot frequency: 30s/500 events (2+ hours)');
-        } else if (sessionDuration > thirtyMinutes) {
-            // After 30 minutes, moderate frequency
-            snapshotInterval = 15000; // 15 seconds
-            eventThreshold = 300; // 300 events
-            logDebug('Reduced snapshot frequency: 15s/300 events (30+ minutes)');
-        }
-        // First 30 minutes: 5s/100 events (default)
-    };
-    
-    // Update frequency every 5 minutes
-    const frequencyUpdateInterval = setInterval(updateSnapshotFrequency, 5 * 60 * 1000);
-    
-    // Start recording with adaptive redaction enabled
-    const recordInstance = rrweb.record({
-        emit: (event) => {
-            // Add additional validation for FullSnapshot events
-            if (event.type === 2) { // FullSnapshot event
-                if (!event.data || !event.data.node) {
-                    logWarn('rrweb generated malformed FullSnapshot event:', {
-                        hasData: !!event.data,
-                        hasNode: !!(event.data && event.data.node),
-                        dataType: typeof event.data,
-                        eventType: event.type,
-                        timestamp: event.timestamp
-                    });
-                    // Don't skip - let the addEvent method handle it
-                } else {
-                    logDebug('Valid FullSnapshot event received from rrweb');
-                }
-            }
-            this.addEvent(event);
-        },
-        inlineStylesheet: true,
-        recordCanvas: true,
-        collectFonts: true,
-        inlineImages: true,
-        blockClass: 'rr-block',
-        ignoreClass: 'rr-ignore',
-        maskTextClass: 'rr-ignore',
-        // Adaptive configuration
-        checkoutEveryNms: snapshotInterval,
-        checkoutEveryNth: eventThreshold
-    });
-    
-    // Store the record instance and interval for cleanup
-    this.recordInstance = recordInstance;
-    this.frequencyUpdateInterval = frequencyUpdateInterval;
+        // Store the record instance for cleanup
+        this.recordInstance = recordInstance;
     }
 
     public async stop() {
@@ -837,12 +790,6 @@ export class HumanBehaviorTracker {
             this.flushInterval = null;
         }
 
-        // Cleanup adaptive snapshot intervals
-        if (this.frequencyUpdateInterval) {
-            clearInterval(this.frequencyUpdateInterval);
-            this.frequencyUpdateInterval = null;
-        }
-
         // Stop rrweb recording
         if (this.recordInstance) {
             this.recordInstance();
@@ -856,30 +803,30 @@ export class HumanBehaviorTracker {
         this.cleanupNavigationTracking();
     }
 
+    /**
+     * Add an event to the ingestion queue
+     * Events are sent directly without processing to avoid corruption
+     */
     public async addEvent(event: any) {
         await this.ensureInitialized();
         
-        // Validate FullSnapshot events before processing
-        if (event.type === 2) { // FullSnapshot event
-            if (!event.data || !event.data.node) {
-                logWarn('Malformed FullSnapshot event detected, skipping:', {
-                    hasData: !!event.data,
-                    hasNode: !!(event.data && event.data.node),
-                    dataType: typeof event.data,
-                    eventType: event.type
-                });
-                return; // Skip malformed FullSnapshot events
-            }
-        }
+        // ✅ DIRECT EVENT HANDLING - No custom processing to avoid corruption
+        // Events flow directly from rrweb to ingestion server
         
-        // Process event through redaction manager if active
-        const processedEvent = this.redactionManager.processEvent(event);
+        // ✅ LOG FULLSNAPSHOT STATUS FOR DEBUGGING
+        if (event.type === 2) { // FullSnapshot
+            const hasData = !!event.data;
+            const hasNode = !!(event.data && event.data.node);
+            logDebug(`[FIXED] FullSnapshot event: hasData=${hasData}, hasNode=${hasNode}, dataType=${event.data?.node?.type}`);
+        }
         
-        const eventSize = new TextEncoder().encode(JSON.stringify(processedEvent)).length;
-        this.eventIngestionQueue.push(processedEvent);
-        this.queueSizeBytes += eventSize;
+        this.eventIngestionQueue.push(event); // Direct event handling
     }
 
+    /**
+     * Flush events to the ingestion server
+     * Events are sent in chunks to handle large payloads efficiently
+     */
     private async flush() {
         // Prevent concurrent flushes
         if (this.isProcessing || !this.initialized) {
@@ -891,10 +838,16 @@ export class HumanBehaviorTracker {
             // Swap the current queue with an empty one atomically
             const eventsToProcess = this.eventIngestionQueue;
             this.eventIngestionQueue = [];
-            this.queueSizeBytes = 0;
 
             if (eventsToProcess.length > 0) {
                 logDebug('Flushing events:', eventsToProcess);
+                
+                // ✅ LOG FULLSNAPSHOT STATUS FOR MONITORING
+                const fullSnapshots = eventsToProcess.filter(e => e.type === 2);
+                if (fullSnapshots.length > 0) {
+                    logDebug(`[FIXED] Sending ${fullSnapshots.length} FullSnapshot(s) with valid data`);
+                }
+                
                 try {
                     // Use chunked sending to handle large payloads
                     await this.api.sendEventsChunked(eventsToProcess, this.sessionId, this.endUserId!);
@@ -1058,15 +1011,26 @@ export class HumanBehaviorTracker {
 
     /**
      * Set specific fields to be redacted during session recording
+     * Uses rrweb's built-in masking instead of custom redaction processing
      * @param fields Array of CSS selectors for fields to redact (e.g., ['input[type="password"]', '#email-field'])
      */
     public setRedactedFields(fields: string[]): void {
-        if (!isBrowser) {
-            logWarn('Redaction is only available in browser environments');
-            return;
-        }
-        
         this.redactionManager.setFieldsToRedact(fields);
+        
+        // ✅ APPLY RRWEB MASKING CLASSES - More reliable than custom processing
+        this.redactionManager.applyRedactionClasses();
+        
+        // ✅ RESTART RECORDING WITH NEW SETTINGS - Ensures masking is applied
+        if (this.recordInstance) {
+            this.restartWithNewRedaction();
+        }
+    }
+
+    private restartWithNewRedaction(): void {
+        if (this.recordInstance) {
+            this.recordInstance(); // Stop current recording
+            this.start(); // Restart with new redaction settings
+        }
     }
 
     /**
@@ -1099,6 +1063,7 @@ export class HumanBehaviorTracker {
 
     /**
      * Get current snapshot frequency info
+     * Uses rrweb's sensible defaults (5 seconds, 100 events)
      */
     public getSnapshotFrequencyInfo(): {
         sessionDuration: number;
@@ -1107,28 +1072,12 @@ export class HumanBehaviorTracker {
         phase: string;
     } {
         const sessionDuration = Date.now() - this.sessionStartTime;
-        const thirtyMinutes = 30 * 60 * 1000;
-        const twoHours = 2 * 60 * 60 * 1000;
-        
-        let phase = 'initial';
-        let interval = 5000;
-        let threshold = 100;
-        
-        if (sessionDuration > twoHours) {
-            phase = 'extended';
-            interval = 30000;
-            threshold = 500;
-        } else if (sessionDuration > thirtyMinutes) {
-            phase = 'moderate';
-            interval = 15000;
-            threshold = 300;
-        }
         
         return {
             sessionDuration,
-            currentInterval: interval,
-            currentThreshold: threshold,
-            phase
+            currentInterval: 5000, // rrweb default - 5 seconds
+            currentThreshold: 100, // rrweb default - 100 events
+            phase: 'default' // Using rrweb's proven defaults
         };
     }