humanbehavior-js 0.0.8 → 0.1.0

package/src/tracker.ts

@@ -2,6 +2,7 @@ import * as rrweb from 'rrweb';
 import { v1 as uuidv1 } from 'uuid';
 import { HumanBehaviorAPI } from './api';
 import { RedactionManager, RedactionOptions } from './redact';
+import { logger, logError, logWarn, logInfo, logDebug } from './utils/logger';
 
 // Check if we're in a browser environment
 const isBrowser = typeof window !== 'undefined';
@@ -10,6 +11,7 @@ const isBrowser = typeof window !== 'undefined';
 declare global {
     interface Window {
         HumanBehaviorTracker: typeof HumanBehaviorTracker;
+        __humanBehaviorGlobalTracker?: HumanBehaviorTracker;
     }
 }
 
@@ -19,37 +21,87 @@ export class HumanBehaviorTracker {
     private rejectedEvents: any[] = [];
     private isProcessingRejectedEvents: boolean = false;
 
-    private sessionId: string;
+    private sessionId!: string;
     private userProperties: Record<string, any> = {};
     private isProcessing: boolean = false;
     private flushInterval: number | null = null;
     private readonly FLUSH_INTERVAL_MS = 5000; // Flush every 5 seconds
-    private api: HumanBehaviorAPI;
+    private api!: HumanBehaviorAPI;
     private endUserId: string | null = null;
-    private apiKey: string;
+    private apiKey!: string;
     private initialized: boolean = false;
     public initializationPromise: Promise<void> | null = null;
-    private redactionManager: RedactionManager;
+    private redactionManager!: RedactionManager;
+    
+    // Console tracking properties
+    private originalConsole: {
+        log: typeof console.log;
+        warn: typeof console.warn;
+        error: typeof console.error;
+    } | null = null;
+    private consoleTrackingEnabled: boolean = false;
+
+    // Navigation tracking properties
+    public navigationTrackingEnabled: boolean = false;
+    private currentUrl: string = '';
+    private previousUrl: string = '';
+    private originalPushState: typeof history.pushState | null = null;
+    private originalReplaceState: typeof history.replaceState | null = null;
+    private navigationListeners: Array<() => void> = [];
+    private _connectionBlocked: boolean = false;
+
+    /**
+     * Initialize the HumanBehavior tracker
+     * This is the main entry point - call this once per page
+     */
+    public static init(apiKey: string, options?: {
+        ingestionUrl?: string;
+        logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+        redactFields?: string[];
+    }): HumanBehaviorTracker {
+        // Return existing instance if already initialized
+        if (isBrowser && window.__humanBehaviorGlobalTracker) {
+            logDebug('Tracker already initialized, returning existing instance');
+            return window.__humanBehaviorGlobalTracker;
+        }
+
+        // Configure logging if specified
+        if (options?.logLevel) {
+            this.configureLogging({ level: options.logLevel });
+        }
+
+        // Create new tracker instance
+        const tracker = new HumanBehaviorTracker(apiKey, options?.ingestionUrl);
+        
+        // Set redacted fields if specified
+        if (options?.redactFields) {
+            tracker.setRedactedFields(options.redactFields);
+        }
+
+        // Test connection (non-blocking)
+        if (isBrowser) {
+            const testUrl = tracker.api['baseUrl'] + '/api/ingestion/health';
+            fetch(testUrl, { method: 'HEAD' })
+                .then(() => logDebug('Connection test successful'))
+                .catch((error) => {
+                    logWarn('Connection test failed - ad blocker may be active:', error.message);
+                    tracker._connectionBlocked = true;
+                });
+        }
+
+        // Start tracking
+        tracker.start();
+        
+        return tracker;
+    }
 
     constructor(apiKey: string | undefined, ingestionUrl?: string) {
         if (!apiKey) {
             throw new Error('Human Behavior API Key is required');
         }
         
-        // ========================================
-        // DEVELOPER: Choose your ingestion server
-        // ========================================
-        // Uncomment ONE of the following lines to select your server:
-        
-        // AWS Development Server
-        const defaultIngestionUrl = 'http://3.137.217.33:3000';
-        
-        // Vercel Production Server
-        // const defaultIngestionUrl = 'https://ingestion-server.vercel.app';
-        
-        // Local Development Server
-        // const defaultIngestionUrl = 'http://localhost:3000';
-        
+        // Initialize API
+        const defaultIngestionUrl = 'http://3.137.217.33:3000'; // AWS Development Server
         this.api = new HumanBehaviorAPI({ 
             apiKey: apiKey,
             ingestionUrl: ingestionUrl || defaultIngestionUrl
@@ -57,45 +109,64 @@ export class HumanBehaviorTracker {
         this.apiKey = apiKey;
         this.redactionManager = new RedactionManager();
 
-        // Check for existing session ID and last activity time in localStorage
-        const existingSessionId = isBrowser ? localStorage.getItem('human_behavior_session_id') : null;
-        const lastActivity = isBrowser ? localStorage.getItem('human_behavior_last_activity') : null;
-
-        // If we have a last activity time, check if it's within 30 minutes
-        const thirtyMinutesAgo = Date.now() - (30 * 60 * 1000);
-        const shouldUseExistingSession = lastActivity && parseInt(lastActivity) > thirtyMinutesAgo;
-        this.sessionId = (existingSessionId && shouldUseExistingSession) ? existingSessionId : uuidv1();
-
-        // Store the session ID if it's new
-        if ((!existingSessionId || !shouldUseExistingSession) && isBrowser) {
-            localStorage.setItem('human_behavior_session_id', this.sessionId);
+        // Handle session restoration
+        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);
+            
+            if (existingSessionId && lastActivity && parseInt(lastActivity) > thirtyMinutesAgo) {
+                this.sessionId = existingSessionId;
+                logDebug(`Reusing existing session: ${this.sessionId}`);
+            } else {
+                this.sessionId = uuidv1();
+                logDebug(`Creating new session: ${this.sessionId}`);
+                localStorage.setItem('human_behavior_session_id', this.sessionId);
+            }
+            
+            this.currentUrl = window.location.href;
+            window.__humanBehaviorGlobalTracker = this;
+        } else {
+            this.sessionId = uuidv1();
         }
 
-        // Start initialization immediately
+        // Start initialization
         this.initializationPromise = this.init();
     }
 
     private async init(): Promise<void> {
         try {
             const userId = this.getCookie(`human_behavior_end_user_id_${this.apiKey}`);
+            logDebug(`Initializing with sessionId: ${this.sessionId}, userId: ${userId}`);
+            
             const { sessionId, endUserId } = await this.api.init(this.sessionId, userId);
-            this.sessionId = sessionId;
+            
+            // Check if server returned a different session ID
+            if (sessionId !== this.sessionId) {
+                logDebug(`Server returned different sessionId: ${sessionId} (client had: ${this.sessionId})`);
+                this.sessionId = sessionId;
+                // Update localStorage with server's session ID
+                if (isBrowser) {
+                    localStorage.setItem('human_behavior_session_id', this.sessionId);
+                }
+            }
+            
             this.endUserId = endUserId;
             this.setCookie(`human_behavior_end_user_id_${this.apiKey}`, endUserId, 365);
 
             // Only setup browser-specific handlers when in browser environment
             if (isBrowser) {
                 this.setupPageUnloadHandler();
-                this.start();
+                this.setupNavigationTracking();
                 this.processRejectedEvents();
             } else {
-                console.warn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
+                logWarn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
             }
 
             this.initialized = true;
-            console.log('HumanBehaviorTracker initialized');
+            logInfo(`HumanBehaviorTracker initialized with sessionId: ${this.sessionId}, endUserId: ${endUserId}`);
         } catch (error) {
-            console.error('Failed to initialize HumanBehaviorTracker:', error);
+            logError('Failed to initialize HumanBehaviorTracker:', error);
             throw error;
         }
     }
@@ -107,52 +178,342 @@ export class HumanBehaviorTracker {
         await this.initializationPromise;
     }
 
+    /**
+     * Setup navigation event tracking for SPA navigation
+     */
+    private setupNavigationTracking(): void {
+        if (!isBrowser || this.navigationTrackingEnabled) return;
+        
+        this.navigationTrackingEnabled = true;
+        logDebug('Setting up navigation tracking');
+
+        // Store original history methods
+        this.originalPushState = history.pushState;
+        this.originalReplaceState = history.replaceState;
+
+        // Override pushState to capture programmatic navigation
+        history.pushState = (...args) => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            
+            // Call original method
+            this.originalPushState!.apply(history, args);
+            
+            // Track navigation event
+            this.trackNavigationEvent('pushState', this.previousUrl, this.currentUrl);
+        };
+
+        // Override replaceState to capture programmatic navigation
+        history.replaceState = (...args) => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            
+            // Call original method
+            this.originalReplaceState!.apply(history, args);
+            
+            // Track navigation event
+            this.trackNavigationEvent('replaceState', this.previousUrl, this.currentUrl);
+        };
+
+        // 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);
+        };
+        
+        window.addEventListener('popstate', popstateListener);
+        this.navigationListeners.push(() => {
+            window.removeEventListener('popstate', popstateListener);
+        });
+
+        // Listen for hashchange events
+        const hashchangeListener = () => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            this.trackNavigationEvent('hashchange', this.previousUrl, this.currentUrl);
+        };
+        
+        window.addEventListener('hashchange', hashchangeListener);
+        this.navigationListeners.push(() => {
+            window.removeEventListener('hashchange', hashchangeListener);
+        });
+
+        // Track initial page load
+        this.trackNavigationEvent('pageLoad', '', this.currentUrl);
+    }
+
+    /**
+     * Track navigation events and send custom events
+     */
+    public async trackNavigationEvent(type: string, fromUrl: string, toUrl: string): Promise<void> {
+        if (!this.initialized) return;
+
+        try {
+            const navigationData = {
+                type: type,
+                from: fromUrl,
+                to: toUrl,
+                timestamp: new Date().toISOString(),
+                pathname: window.location.pathname,
+                search: window.location.search,
+                hash: window.location.hash,
+                referrer: document.referrer
+            };
+
+            // Add navigation event to the main event stream
+            await this.addEvent({
+                type: 5, // Custom event type
+                data: {
+                    payload: {
+                        eventType: 'navigation',
+                        ...navigationData
+                    }
+                },
+                timestamp: Date.now()
+            });
+            
+            logDebug(`Navigation tracked: ${type} from ${fromUrl} to ${toUrl}`);
+        } catch (error) {
+            logError('Failed to track navigation event:', error);
+        }
+    }
+
+    /**
+     * Track a page view event (PostHog-style)
+     */
+    public async trackPageView(url?: string): Promise<void> {
+        if (!this.initialized) return;
+
+        try {
+            const pageViewData = {
+                url: url || window.location.href,
+                pathname: window.location.pathname,
+                search: window.location.search,
+                hash: window.location.hash,
+                referrer: document.referrer,
+                timestamp: new Date().toISOString()
+            };
+
+            // Add pageview event to the main event stream
+            await this.addEvent({
+                type: 5, // Custom event type
+                data: {
+                    payload: {
+                        eventType: 'pageview',
+                        ...pageViewData
+                    }
+                },
+                timestamp: Date.now()
+            });
+            
+            logDebug(`Pageview tracked: ${pageViewData.url}`);
+        } catch (error) {
+            logError('Failed to track pageview event:', error);
+        }
+    }
+
+    /**
+     * Track a custom event (PostHog-style)
+     */
+    public async customEvent(eventName: string, properties?: Record<string, any>): Promise<void> {
+        if (!this.initialized) return;
+
+        try {
+            const customEventData = {
+                eventName: eventName,
+                properties: properties || {},
+                timestamp: new Date().toISOString(),
+                url: window.location.href,
+                pathname: window.location.pathname
+            };
+
+            // Add custom event to the main event stream
+            await this.addEvent({
+                type: 5, // Custom event type
+                data: {
+                    payload: {
+                        eventType: 'custom',
+                        ...customEventData
+                    }
+                },
+                timestamp: Date.now()
+            });
+            
+            logDebug(`Custom event tracked: ${eventName}`, properties);
+        } catch (error) {
+            logError('Failed to track custom event:', error);
+        }
+    }
+
+    /**
+     * Cleanup navigation tracking
+     */
+    private cleanupNavigationTracking(): void {
+        if (!this.navigationTrackingEnabled) return;
+
+        // Restore original history methods
+        if (this.originalPushState) {
+            history.pushState = this.originalPushState;
+        }
+        if (this.originalReplaceState) {
+            history.replaceState = this.originalReplaceState;
+        }
+
+        // Remove event listeners
+        this.navigationListeners.forEach(cleanup => cleanup());
+        this.navigationListeners = [];
+
+        this.navigationTrackingEnabled = false;
+        logDebug('Navigation tracking cleaned up');
+    }
+
     public static logToStorage(message: string) {
+        logInfo(message);
+    }
+
+    /**
+     * Configure logging behavior for the SDK
+     * @param config Logger configuration options
+     */
+    public static configureLogging(config: { level?: 'none' | 'error' | 'warn' | 'info' | 'debug', enableConsole?: boolean, enableStorage?: boolean }) {
+        const levelMap = {
+            'none': 0,
+            'error': 1,
+            'warn': 2,
+            'info': 3,
+            'debug': 4
+        };
+        
+        logger.setConfig({
+            level: levelMap[config.level || 'error'],
+            enableConsole: config.enableConsole !== false,
+            enableStorage: config.enableStorage || false
+        });
+    }
+
+    /**
+     * Enable console event tracking
+     */
+    public enableConsoleTracking(): void {
+        if (!isBrowser || this.consoleTrackingEnabled) return;
+        
+        // Store original console methods
+        this.originalConsole = {
+            log: console.log,
+            warn: console.warn,
+            error: console.error
+        };
+
+
+
+        // Override console methods to capture ALL console output (including logger output)
+        console.log = (...args) => {
+            this.trackConsoleEvent('log', args);
+            this.originalConsole!.log(...args);
+        };
+
+        console.warn = (...args) => {
+            this.trackConsoleEvent('warn', args);
+            this.originalConsole!.warn(...args);
+        };
+
+        console.error = (...args) => {
+            this.trackConsoleEvent('error', args);
+            this.originalConsole!.error(...args);
+        };
+
+        this.consoleTrackingEnabled = true;
+        logDebug('Console tracking enabled');
+    }
+
+    /**
+     * Disable console event tracking
+     */
+    public disableConsoleTracking(): void {
+        if (!isBrowser || !this.consoleTrackingEnabled) return;
+
+        // Restore original console methods
+        if (this.originalConsole) {
+            console.log = this.originalConsole.log;
+            console.warn = this.originalConsole.warn;
+            console.error = this.originalConsole.error;
+        }
+
+        this.consoleTrackingEnabled = false;
+        logDebug('Console tracking disabled');
+    }
+
+    private trackConsoleEvent(level: 'log' | 'warn' | 'error', args: any[]): void {
+        if (!this.initialized) return;
+
         try {
-            const logs = JSON.parse(localStorage.getItem('human_behavior_logs') || '[]');
-            logs.push(`${new Date().toISOString()}: ${message}`);
-            localStorage.setItem('human_behavior_logs', JSON.stringify(logs));
-        } catch (e) {
-            console.error('Failed to log to storage:', e);
+            const consoleData = {
+                level: level,
+                message: args.map(arg => 
+                    typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+                ).join(' '),
+                timestamp: new Date().toISOString(),
+                url: window.location.href
+            };
+
+            // Add console event to the main event stream
+            this.addEvent({
+                type: 5, // Custom event type
+                data: {
+                    payload: {
+                        eventType: 'console',
+                        ...consoleData
+                    }
+                },
+                timestamp: Date.now()
+            }).catch(error => {
+                logError('Failed to track console event:', error);
+            });
+        } catch (error) {
+            logError('Error in trackConsoleEvent:', error);
         }
     }
 
     private setupPageUnloadHandler() {
         if (!isBrowser) return;
         
-        console.log('Setting up page unload handler');
+        logDebug('Setting up page unload handler');
         
         // Handle visibility changes for sending events
         window.addEventListener('visibilitychange', () => {
             // Only send events when page becomes hidden
             if (document.visibilityState === 'hidden') {
-                console.log('Page hidden - sending pending events');
+                logDebug('Page hidden - sending pending events');
                 this.api.sendBeaconEvents(this.eventIngestionQueue, this.sessionId);
             }
         });
 
         // Handle actual page unload/close
         window.addEventListener('beforeunload', () => {
-            // Update last activity time
-            localStorage.setItem('human_behavior_last_activity', Date.now().toString());
-            
             // Send final events
             this.api.sendBeaconEvents(this.eventIngestionQueue, this.sessionId);
         });
 
-        // Update activity timestamp periodically
-        setInterval(() => {
+        // Update activity timestamp on user interaction (not on page load)
+        const updateActivity = () => {
             localStorage.setItem('human_behavior_last_activity', Date.now().toString());
-        }, 60000); // Update every minute
+        };
+
+        // Listen for user interactions to update activity timestamp
+        window.addEventListener('click', updateActivity);
+        window.addEventListener('keydown', updateActivity);
+        window.addEventListener('scroll', updateActivity);
+        window.addEventListener('mousemove', updateActivity);
     }
 
     public viewLogs() {
         try {
-            const logs = JSON.parse(localStorage.getItem('human_behavior_logs') || '[]');
+            const logs = logger.getLogs();
             console.log('HumanBehavior Logs:', logs);
-            localStorage.removeItem('human_behavior_logs'); // Clear logs after viewing
+            logger.clearLogs(); // Clear logs after viewing
         } catch (e) {
-            console.error('Failed to read logs:', e);
+            logError('Failed to read logs:', e);
         }
     }
 
@@ -180,11 +541,6 @@ export class HumanBehaviorTracker {
         await this.api.sendUserAuth(this.endUserId, this.userProperties, this.sessionId, authFields);
     }
 
-    public async customEvent(eventName: string, eventProperties: Record<string, any> = {}) {
-        await this.ensureInitialized();
-        this.api.sendBeaconCustomEvent(eventName, eventProperties, this.sessionId);
-    }
-
     public async start() {
         await this.ensureInitialized();
         if (!isBrowser) return;
@@ -194,6 +550,9 @@ export class HumanBehaviorTracker {
             this.flush();
         }, this.FLUSH_INTERVAL_MS);
 
+        // Enable console tracking
+        this.enableConsoleTracking();
+
         // Start recording with redaction enabled
         rrweb.record({
             emit: (event) => {
@@ -216,6 +575,12 @@ export class HumanBehaviorTracker {
             clearInterval(this.flushInterval);
             this.flushInterval = null;
         }
+
+        // Disable console tracking
+        this.disableConsoleTracking();
+
+        // Cleanup navigation tracking
+        this.cleanupNavigationTracking();
     }
 
     public async addEvent(event: any) {
@@ -250,7 +615,7 @@ export class HumanBehaviorTracker {
             this.rejectedEvents = [];
             this.sessionId = newSessionId;
         } catch (error) {
-            console.error('Failed to process rejected events:', error);
+            logError('Failed to process rejected events:', error);
         } finally {
             this.isProcessingRejectedEvents = false;
         }
@@ -270,15 +635,22 @@ export class HumanBehaviorTracker {
             this.queueSizeBytes = 0;
 
             if (eventsToProcess.length > 0) {
-                console.log('Flushing events:', eventsToProcess);
+                logDebug('Flushing events:', eventsToProcess);
                 try {
                     await this.api.sendEvents(eventsToProcess, this.sessionId, this.endUserId!);
                 } catch (error: any) {
                     // If we get a 400 error, store events for retry
                     if (error.message?.includes('ERROR: Session already completed')) {
-                        console.log('Session expired, storing events for retry');
+                        logInfo('Session expired, storing events for retry');
                         this.rejectedEvents.push(...eventsToProcess);
                         this.processRejectedEvents();
+                    } else if (error.message?.includes('ERR_BLOCKED_BY_CLIENT') || 
+                               error.message?.includes('Failed to fetch') ||
+                               error.message?.includes('NetworkError')) {
+                        // Handle ad blocker or network issues gracefully
+                        logWarn('Request blocked by ad blocker or network issue, storing events for retry');
+                        this.rejectedEvents.push(...eventsToProcess);
+                        // Don't process rejected events immediately to avoid spam
                     } else {
                         throw error;
                     }
@@ -317,7 +689,7 @@ export class HumanBehaviorTracker {
     public async redact(options?: RedactionOptions): Promise<void> {
         await this.ensureInitialized();
         if (!isBrowser) {
-            console.warn('Redaction is only available in browser environments');
+            logWarn('Redaction is only available in browser environments');
             return;
         }
         
@@ -331,7 +703,7 @@ export class HumanBehaviorTracker {
      */
     public setRedactedFields(fields: string[]): void {
         if (!isBrowser) {
-            console.warn('Redaction is only available in browser environments');
+            logWarn('Redaction is only available in browser environments');
             return;
         }
         
@@ -351,6 +723,70 @@ export class HumanBehaviorTracker {
     public getRedactedFields(): string[] {
         return this.redactionManager.getSelectedFields();
     }
+
+    /**
+     * Get the current session ID
+     */
+    public getSessionId(): string {
+        return this.sessionId;
+    }
+
+    /**
+     * Get the current URL being tracked
+     */
+    public getCurrentUrl(): string {
+        return this.currentUrl;
+    }
+
+    /**
+     * Test if the tracker can reach the ingestion server
+     */
+    public async testConnection(): Promise<{ success: boolean; error?: string }> {
+        try {
+            await this.api.init(this.sessionId, this.endUserId);
+            return { success: true };
+        } catch (error: any) {
+            return { 
+                success: false, 
+                error: error.message || 'Unknown error' 
+            };
+        }
+    }
+
+    /**
+     * Get connection status and recommendations
+     */
+    public getConnectionStatus(): { 
+        blocked: boolean; 
+        recommendations: string[] 
+    } {
+        const recommendations: string[] = [];
+        let blocked = false;
+
+        // Check if we have rejected events (might indicate blocking)
+        if (this.rejectedEvents.length > 0) {
+            blocked = true;
+            recommendations.push('Some requests may be blocked by ad blockers');
+        }
+
+        // Check if connection was blocked during initialization
+        if (this._connectionBlocked) {
+            blocked = true;
+            recommendations.push('Initial connection test failed - ad blocker may be active');
+        }
+
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined') {
+            recommendations.push('Not running in browser environment');
+        }
+
+        // Check if navigator.sendBeacon is available
+        if (typeof navigator.sendBeacon === 'undefined') {
+            recommendations.push('sendBeacon not available, using fetch fallback');
+        }
+
+        return { blocked, recommendations };
+    }
 }
 
 // Only expose to window object in browser environments