humanbehavior-js 0.3.2 → 0.3.4

package/dist/cjs/index.js

@@ -4486,7 +4486,8 @@ class HumanBehaviorAPI {
 }
 
 // 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
 // Check if we're in a browser environment
 const isBrowser$1 = typeof window !== 'undefined';
 class RedactionManager {
@@ -4508,7 +4509,8 @@ 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
      */
     setFieldsToRedact(fields) {
@@ -4543,6 +4545,8 @@ 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
      */
     processEvent(event) {
         // Only process if we have fields selected for redaction
@@ -4862,23 +4866,63 @@ 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
+     */
+    getMaskTextSelector() {
+        if (this.userSelectedFields.size === 0) {
+            return null;
+        }
+        return Array.from(this.userSelectedFields).join(',');
+    }
+    /**
+     * Check if an element should be redacted (for rrweb maskTextFn/maskInputFn)
      */
     shouldRedactElement(element) {
-        // Check if element is excluded from redaction
-        for (const excludeSelector of this.excludeSelectors) {
-            if (element.matches(excludeSelector) || element.closest(excludeSelector)) {
-                return false;
-            }
+        if (this.userSelectedFields.size === 0) {
+            return false;
         }
-        // Check if element matches any of the user-selected fields
+        // 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
+     */
+    applyRedactionClasses() {
+        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)
      */
@@ -4920,6 +4964,8 @@ class HumanBehaviorTracker {
         // Set redacted fields if specified
         if (options === null || options === void 0 ? void 0 : options.redactFields) {
             tracker.setRedactedFields(options.redactFields);
+            // ✅ Apply redaction classes to existing elements
+            tracker.redactionManager.applyRedactionClasses();
         }
         // Setup automatic tracking if enabled
         if ((options === null || options === void 0 ? void 0 : options.enableAutomaticTracking) !== false) {
@@ -4941,7 +4987,6 @@ class HumanBehaviorTracker {
     }
     constructor(apiKey, ingestionUrl) {
         this.eventIngestionQueue = [];
-        this.queueSizeBytes = 0;
         this.userProperties = {};
         this.isProcessing = false;
         this.flushInterval = null;
@@ -4961,7 +5006,6 @@ class HumanBehaviorTracker {
         this.navigationListeners = [];
         this._connectionBlocked = false;
         this.recordInstance = null;
-        this.frequencyUpdateInterval = null;
         this.sessionStartTime = Date.now();
         if (!apiKey) {
             throw new Error('Human Behavior API Key is required');
@@ -5136,9 +5180,6 @@ class HumanBehaviorTracker {
             }
         });
     }
-    /**
-     * Track a page view event (PostHog-style)
-     */
     trackPageView(url) {
         return __awaiter$1(this, void 0, void 0, function* () {
             if (!this.initialized)
@@ -5167,9 +5208,6 @@ class HumanBehaviorTracker {
             }
         });
     }
-    /**
-     * Track a custom event (PostHog-style)
-     */
     customEvent(eventName, properties) {
         return __awaiter$1(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e;
@@ -5500,7 +5538,6 @@ class HumanBehaviorTracker {
             // Send user data with the original endUserId
             yield 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 || '';
         });
     }
@@ -5521,51 +5558,16 @@ class HumanBehaviorTracker {
             }, this.FLUSH_INTERVAL_MS);
             // 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;
-                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
+            // ✅ SIMPLIFIED RECORDING - Use rrweb's proven defaults
+            // No complex adaptive logic - rrweb's defaults work well for most use cases
             const recordInstance = 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');
-                        }
-                    }
+                    // ✅ DIRECT EVENT HANDLING - Let rrweb handle events natively
                     this.addEvent(event);
+                    // ✅ DEBUG FULLSNAPSHOT GENERATION
+                    if (event.type === 2) { // FullSnapshot
+                        logDebug(`🎯 FullSnapshot generated at ${new Date().toISOString()}`);
+                    }
                 },
                 inlineStylesheet: true,
                 recordCanvas: true,
@@ -5573,14 +5575,18 @@ class HumanBehaviorTracker {
                 inlineImages: true,
                 blockClass: 'rr-block',
                 ignoreClass: 'rr-ignore',
-                maskTextClass: 'rr-ignore',
-                // Adaptive configuration
-                checkoutEveryNms: snapshotInterval,
-                checkoutEveryNth: eventThreshold
+                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,
+                // ✅ FULLSNAPSHOT GENERATION - Use reasonable intervals (PostHog-style)
+                checkoutEveryNms: 300000, // Take FullSnapshot every 5 minutes (like PostHog)
+                checkoutEveryNth: 1000, // Take FullSnapshot every 1000 events
+                // ✅ SELECTOR-BASED REDACTION - Users control via CSS selectors
+                // No custom masking functions needed - rrweb handles this natively
             });
-            // Store the record instance and interval for cleanup
+            // Store the record instance for cleanup
             this.recordInstance = recordInstance;
-            this.frequencyUpdateInterval = frequencyUpdateInterval;
         });
     }
     stop() {
@@ -5592,11 +5598,6 @@ class HumanBehaviorTracker {
                 clearInterval(this.flushInterval);
                 this.flushInterval = null;
             }
-            // Cleanup adaptive snapshot intervals
-            if (this.frequencyUpdateInterval) {
-                clearInterval(this.frequencyUpdateInterval);
-                this.frequencyUpdateInterval = null;
-            }
             // Stop rrweb recording
             if (this.recordInstance) {
                 this.recordInstance();
@@ -5608,28 +5609,29 @@ class HumanBehaviorTracker {
             this.cleanupNavigationTracking();
         });
     }
+    /**
+     * Add an event to the ingestion queue
+     * Events are sent directly without processing to avoid corruption
+     */
     addEvent(event) {
         return __awaiter$1(this, void 0, void 0, function* () {
+            var _a, _b;
             yield 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
+            // ✅ 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=${(_b = (_a = event.data) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.type}`);
             }
-            // Process event through redaction manager if active
-            const processedEvent = this.redactionManager.processEvent(event);
-            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
+     */
     flush() {
         return __awaiter$1(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e, _f;
@@ -5642,9 +5644,13 @@ 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
                         yield this.api.sendEventsChunked(eventsToProcess, this.sessionId, this.endUserId);
@@ -5809,14 +5815,23 @@ 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'])
      */
     setRedactedFields(fields) {
-        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();
+        }
+    }
+    restartWithNewRedaction() {
+        if (this.recordInstance) {
+            this.recordInstance(); // Stop current recording
+            this.start(); // Restart with new redaction settings
+        }
     }
     /**
      * Check if redaction is currently active
@@ -5844,29 +5859,15 @@ class HumanBehaviorTracker {
     }
     /**
      * Get current snapshot frequency info
+     * Uses configured values (5 minutes, 1000 events) - PostHog-style
      */
     getSnapshotFrequencyInfo() {
         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: 300000, // Configured - 5 minutes (PostHog-style)
+            currentThreshold: 1000, // Configured - 1000 events
+            phase: 'configured' // Using explicit configuration
         };
     }
     /**