humanbehavior-js 0.3.6 → 0.3.8

package/src/tracker.ts

@@ -1,4 +1,4 @@
-import * as rrweb from 'rrweb';
+import { record } from '@rrweb/record';
 import { v1 as uuidv1 } from 'uuid';
 import { HumanBehaviorAPI } from './api';
 import { RedactionManager, RedactionOptions } from './redact';
@@ -128,10 +128,10 @@ export class HumanBehaviorTracker {
         if (isBrowser) {
             const existingSessionId = localStorage.getItem('human_behavior_session_id');
             const lastActivity = localStorage.getItem('human_behavior_last_activity');
-            const thirtyMinutesAgo = Date.now() - (30 * 60 * 1000);
+            const fifteenMinutesAgo = Date.now() - (15 * 60 * 1000);
             
             // Check if we have an existing session that's still within the activity window
-            if (existingSessionId && lastActivity && parseInt(lastActivity) > thirtyMinutesAgo) {
+            if (existingSessionId && lastActivity && parseInt(lastActivity) > fifteenMinutesAgo) {
                 this.sessionId = existingSessionId;
                 logDebug(`Reusing existing session: ${this.sessionId}`);
                 // Update activity timestamp to extend the session window
@@ -754,9 +754,13 @@ export class HumanBehaviorTracker {
         // Enable console tracking
         this.enableConsoleTracking();
 
-        // ✅ SIMPLIFIED RECORDING - Use rrweb's proven defaults
-        // No complex adaptive logic - rrweb's defaults work well for most use cases
-        const recordInstance = rrweb.record({
+        // ✅ DOM READY DETECTION
+        // Wait for DOM to be ready before starting recording
+        const startRecording = () => {
+            logDebug('🎯 DOM ready, starting session recording');
+            
+            // ✅ HUMANBEHAVIOR RRWEB CONFIGURATION
+            const recordInstance = record({
             emit: (event) => {
                 // ✅ DIRECT EVENT HANDLING - Let rrweb handle events natively
                 this.addEvent(event);
@@ -766,28 +770,43 @@ export class HumanBehaviorTracker {
                     logDebug(`🎯 FullSnapshot generated at ${new Date().toISOString()}`);
                 }
             },
-            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
+            // ✅ HUMANBEHAVIOR'S CUSTOM SETTINGS
             maskTextSelector: this.redactionManager.getMaskTextSelector() || undefined,
+            maskTextFn: undefined,
+            maskAllInputs: true, // HumanBehavior default
+            maskInputOptions: { password: true }, // HumanBehavior default
+            maskInputFn: undefined,
+            slimDOMOptions: {},
+            collectFonts: false, // HumanBehavior default
+            inlineStylesheet: true, // HumanBehavior default
+            recordCrossOriginIframes: false, // HumanBehavior default
             
-            // ✅ FULLSNAPSHOT GENERATION - Use reasonable intervals (PostHog-style)
-            checkoutEveryNms: 300000, // Take FullSnapshot every 5 minutes (like PostHog)
-            checkoutEveryNth: 1000,   // Take FullSnapshot every 1000 events
+            // ✅ CANVAS RECORDING - Disabled to prevent large data URIs
+            recordCanvas: false, // Disabled to prevent large data URIs
             
-            // ✅ SELECTOR-BASED REDACTION - Users control via CSS selectors
-            // No custom masking functions needed - rrweb handles this natively
+            // ✅ FULLSNAPSHOT GENERATION - Use reasonable intervals
+            checkoutEveryNms: 300000, // Take FullSnapshot every 5 minutes
+            checkoutEveryNth: 1000,   // Take FullSnapshot every 1000 events
         });
         
         // Store the record instance for cleanup
         this.recordInstance = recordInstance;
+        };
+
+        // ✅ DOM READY DETECTION
+        logDebug(`🎯 DOM ready state: ${document.readyState}`);
+        if (document.readyState === 'complete') {
+            // DOM already ready, start immediately
+            logDebug('🎯 DOM already complete, starting recording immediately');
+            startRecording();
+        } else {
+            // Wait for DOM to be ready
+            logDebug('🎯 DOM not ready, waiting for DOMContentLoaded event');
+            document.addEventListener('DOMContentLoaded', () => {
+                logDebug('🎯 DOMContentLoaded fired, starting recording');
+                startRecording();
+            }, { once: true });
+        }
     }
 
     public async stop() {
@@ -822,11 +841,22 @@ export class HumanBehaviorTracker {
         // ✅ DIRECT EVENT HANDLING - No custom processing to avoid corruption
         // Events flow directly from rrweb to ingestion server
         
+        // ✅ EVENT VALIDATION
+        if (!event || typeof event !== 'object') {
+            logDebug('⚠️ Skipping invalid event:', event);
+            return;
+        }
+        
         // ✅ 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}`);
+            
+            if (!hasData || !hasNode) {
+                logDebug(`⚠️ Empty FullSnapshot detected: hasData=${hasData}, hasNode=${hasNode} - continuing session`);
+            } else {
+                logDebug(`✅ Valid FullSnapshot: hasData=${hasData}, hasNode=${hasNode}, dataType=${event.data?.node?.type}`);
+            }
         }
         
         this.eventIngestionQueue.push(event); // Direct event handling
@@ -1072,7 +1102,7 @@ export class HumanBehaviorTracker {
 
     /**
      * Get current snapshot frequency info
-     * Uses configured values (5 minutes, 1000 events) - PostHog-style
+     * Uses configured values (5 minutes, 1000 events)
      */
     public getSnapshotFrequencyInfo(): {
         sessionDuration: number;
@@ -1084,7 +1114,7 @@ export class HumanBehaviorTracker {
         
         return {
             sessionDuration,
-            currentInterval: 300000, // Configured - 5 minutes (PostHog-style)
+            currentInterval: 300000, // Configured - 5 minutes
             currentThreshold: 1000,  // Configured - 1000 events
             phase: 'configured' // Using explicit configuration
         };

package/src/vue/index.ts

@@ -0,0 +1,18 @@
+import { HumanBehaviorTracker } from '../index';
+import type { App } from 'vue';
+
+interface HumanBehaviorPluginOptions {
+  apiKey: string;
+}
+
+export const HumanBehaviorPlugin = {
+  install: (app: App, options: HumanBehaviorPluginOptions) => {
+    const tracker = HumanBehaviorTracker.init(options.apiKey);
+    
+    // Make tracker available globally
+    app.config.globalProperties.$humanBehavior = tracker;
+    
+    // Also provide it via inject/provide
+    app.provide('humanBehavior', tracker);
+  }
+};