humanbehavior-js 0.0.9 → 0.1.0

package/src/tracker.ts

@@ -11,6 +11,7 @@ const isBrowser = typeof window !== 'undefined';
 declare global {
     interface Window {
         HumanBehaviorTracker: typeof HumanBehaviorTracker;
+        __humanBehaviorGlobalTracker?: HumanBehaviorTracker;
     }
 }
 
@@ -20,17 +21,17 @@ 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: {
@@ -38,33 +39,69 @@ export class HumanBehaviorTracker {
         warn: typeof console.warn;
         error: typeof console.error;
     } | null = null;
-    private originalLogger: {
-        error: typeof logError;
-        warn: typeof logWarn;
-        info: typeof logInfo;
-        debug: typeof logDebug;
-    } | 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
@@ -72,43 +109,62 @@ 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 {
                 logWarn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
             }
 
             this.initialized = true;
-            logInfo('HumanBehaviorTracker initialized');
+            logInfo(`HumanBehaviorTracker initialized with sessionId: ${this.sessionId}, endUserId: ${endUserId}`);
         } catch (error) {
             logError('Failed to initialize HumanBehaviorTracker:', error);
             throw error;
@@ -122,6 +178,196 @@ 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);
     }
@@ -159,13 +405,7 @@ export class HumanBehaviorTracker {
             error: console.error
         };
 
-        // Store original logger methods
-        this.originalLogger = {
-            error: logError,
-            warn: logWarn,
-            info: logInfo,
-            debug: logDebug
-        };
+
 
         // Override console methods to capture ALL console output (including logger output)
         console.log = (...args) => {
@@ -184,50 +424,55 @@ export class HumanBehaviorTracker {
         };
 
         this.consoleTrackingEnabled = true;
-        this.originalLogger!.debug('Console tracking enabled');
+        logDebug('Console tracking enabled');
     }
 
     /**
      * Disable console event tracking
      */
     public disableConsoleTracking(): void {
-        if (!isBrowser || !this.consoleTrackingEnabled || !this.originalConsole) return;
+        if (!isBrowser || !this.consoleTrackingEnabled) return;
 
         // Restore original console methods
-        console.log = this.originalConsole.log;
-        console.warn = this.originalConsole.warn;
-        console.error = this.originalConsole.error;
+        if (this.originalConsole) {
+            console.log = this.originalConsole.log;
+            console.warn = this.originalConsole.warn;
+            console.error = this.originalConsole.error;
+        }
 
         this.consoleTrackingEnabled = false;
-        this.originalConsole = null;
-        this.originalLogger = null;
+        logDebug('Console tracking disabled');
     }
 
-    /**
-     * Track console events
-     */
     private trackConsoleEvent(level: 'log' | 'warn' | 'error', args: any[]): void {
         if (!this.initialized) return;
 
-        const consoleEvent = {
-            type: 5, // Custom event type
-            data: {
-                payload: {
-                    type: 'console',
-                    level: level,
-                    message: args.map(arg => 
-                        typeof arg === 'string' ? arg : 
-                        typeof arg === 'object' ? JSON.stringify(arg) : 
-                        String(arg)
-                    ).join(' '),
-                    timestamp: Date.now(),
-                    url: window.location.href
-                }
-            },
-            timestamp: Date.now()
-        };
-
-        this.addEvent(consoleEvent);
+        try {
+            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() {
@@ -246,17 +491,20 @@ export class HumanBehaviorTracker {
 
         // 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() {
@@ -293,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;
@@ -335,6 +578,9 @@ export class HumanBehaviorTracker {
 
         // Disable console tracking
         this.disableConsoleTracking();
+
+        // Cleanup navigation tracking
+        this.cleanupNavigationTracking();
     }
 
     public async addEvent(event: any) {
@@ -398,6 +644,13 @@ export class HumanBehaviorTracker {
                         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;
                     }
@@ -470,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