humanbehavior-js 0.0.8 → 0.1.0

package/src/api.ts

@@ -1,3 +1,5 @@
+import { logError, logInfo } from './utils/logger';
+
 export const MAX_CHUNK_SIZE_BYTES = 1024 * 1024 * 10; // 10MB chunk size
 
 export function isChunkSizeExceeded(currentChunk: any[], newEvent: any, sessionId: string): boolean {
@@ -147,7 +149,7 @@ export class HumanBehaviorAPI {
             
             return results.flat();
         } catch (error) {
-            console.error('Error sending events:', error);
+            logError('Error sending events:', error);
             throw error;
         }
     }
@@ -173,7 +175,7 @@ export class HumanBehaviorAPI {
             
             return await response.json();
         } catch (error) {
-            console.error('Error sending user data:', error);
+            logError('Error sending user data:', error);
             throw error;
         }
     }
@@ -200,111 +202,22 @@ export class HumanBehaviorAPI {
             
             return await response.json();
         } catch (error) {
-            console.error('Error authenticating user:', error);
+            logError('Error authenticating user:', error);
             throw error;
         }
     }
 
-    async sendSessionComplete(sessionId: string) {
-        const response = await fetch(`${this.baseUrl}/api/ingestion/sessionComplete`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${this.apiKey}`
-            },
-            body: JSON.stringify({ sessionId })
-        });
-        
-        if (!response.ok) {
-            throw new Error(`Failed to send session complete: ${response.statusText}`);
-        }
-    }
 
-    async sendCustomEvent(eventName: string, eventProperties: Record<string, any>, sessionId: string) {
-        const maxRetries = 3;
-        let retryCount = 0;
-        
-        while (retryCount < maxRetries) {
-            try {
-                const response = await fetch(`${this.baseUrl}/api/ingestion/customEvent`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${this.apiKey}`
-                    },
-                    body: JSON.stringify({
-                        name: eventName,
-                        properties: eventProperties,
-                        sessionId: sessionId,
-                        timestamp: new Date().toISOString()
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`Failed to send custom event: ${response.statusText}`);
-                }
-                
-                return await response.json();
-            } catch (error) {
-                retryCount++;
-                if (retryCount === maxRetries) {
-                    console.error('Error sending custom event after max retries:', error);
-                    throw error;
-                }
-                // Exponential backoff
-                await new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000));
-            }
-        }
-    }
 
-    async sendCustomEvents(events: any[], sessionId: string) {
-        const maxRetries = 3;
-        let retryCount = 0;
-        
-        while (retryCount < maxRetries) {
-            try {
-                const response = await fetch(`${this.baseUrl}/api/ingestion/customEvent/batch`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${this.apiKey}`
-                    },
-                    body: JSON.stringify({
-                        events: events.map(event => ({
-                            ...event,
-                            sessionId: sessionId
-                        }))
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`Failed to send custom events: ${response.statusText}`);
-                }
-                
-                return await response.json();
-            } catch (error) {
-                retryCount++;
-                if (retryCount === maxRetries) {
-                    console.error('Error sending custom events after max retries:', error);
-                    throw error;
-                }
-                // Exponential backoff
-                await new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000));
-            }
-        }
-    }
 
-    public sendBeaconEvents(events: any[], sessionId: string, isSessionComplete: boolean = false) {
+
+    public sendBeaconEvents(events: any[], sessionId: string) {
         const data = new URLSearchParams()
         data.append('events', encodeURIComponent(JSON.stringify(events)))
         data.append('sessionId', encodeURIComponent(sessionId))
         data.append('timestamp', encodeURIComponent(Date.now().toString()))
         data.append('apiKey', encodeURIComponent(this.apiKey))
-        if (isSessionComplete) {
-            console.log('Session complete beacon sending');
-            localStorage.setItem('koalaware_session_complete', Date.now().toString());
-            data.append('sessionComplete', encodeURIComponent('true'))
-        }
+
 
         const success = navigator.sendBeacon(
             `${this.baseUrl}/api/ingestion/events`, 
@@ -314,47 +227,6 @@ export class HumanBehaviorAPI {
         // KoalawareTracker.logToStorage(`Sending events beacon: ${this.baseUrl}/api/ingestion/events`);
         // KoalawareTracker.logToStorage(`Events beacon success: ${success}`);
     }
+    
 
-    public sendBeaconSessionComplete(sessionId: string) {
-        const data = new URLSearchParams()
-        data.append('sessionId', sessionId)
-        data.append('apiKey', this.apiKey)
-        data.append('sessionComplete', 'true')
-        
-        const success = navigator.sendBeacon(
-            `${this.baseUrl}/api/ingestion/sessionComplete`, 
-            data
-        );
-
-        // KoalawareTracker.logToStorage(`Sending completion beacon: ${this.baseUrl}/api/ingestion/sessionComplete`);
-        // KoalawareTracker.logToStorage(`Complete beacon success: ${success}`);
-    }
-
-    public sendBeaconCustomEvent(eventName: string, eventProperties: Record<string, any>, sessionId: string) {
-        const data = new URLSearchParams()
-        data.append('name', encodeURIComponent(eventName))
-        data.append('properties', encodeURIComponent(JSON.stringify(eventProperties)))
-        data.append('sessionId', encodeURIComponent(sessionId))
-        data.append('timestamp', encodeURIComponent(new Date().toISOString()))
-        data.append('apiKey', encodeURIComponent(this.apiKey))
-
-        return navigator.sendBeacon(
-            `${this.baseUrl}/api/ingestion/customEvent`,
-            data
-        );
-    }
-
-    public sendBeaconCustomEvents(events: any[], sessionId: string) {
-        const data = new URLSearchParams()
-        data.append('events', encodeURIComponent(JSON.stringify(events.map(event => ({
-            ...event,
-            sessionId: sessionId
-        })))))
-        data.append('apiKey', encodeURIComponent(this.apiKey))
-
-        return navigator.sendBeacon(
-            `${this.baseUrl}/api/ingestion/customEvent/batch`,
-            data
-        );
-    }
 }

package/src/index.ts

@@ -13,6 +13,9 @@ export * from './api';
 // Export redaction functionality
 export * from './redact';
 
+// Export logger functionality
+export * from './utils/logger';
+
 // Also export the tracker as the default export
 export { HumanBehaviorTracker as default } from './tracker';
 

package/src/react/index.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState, createContext, useContext, ReactNode } from "react";
+import React, { useEffect, useState, createContext, useContext, ReactNode, useCallback, useMemo, useRef } from "react";
 import { HumanBehaviorTracker } from "..";
+import { logError, logWarn, logDebug } from "../utils/logger";
 
 // Check if we're in a browser environment
 const isBrowser = () => typeof window !== 'undefined';
@@ -23,8 +24,14 @@ interface HumanBehaviorProviderProps {
   apiKey?: string;
   client?: HumanBehaviorTracker;
   children: ReactNode;
+  options?: {
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+  };
 }
 
+// Default context to prevent unnecessary re-renders
 const defaultContext: HumanBehaviorContextType = {
   humanBehavior: null,
   queueEvent: (event: any) => {
@@ -32,22 +39,38 @@ const defaultContext: HumanBehaviorContextType = {
     if (typeof window === 'undefined') {
       return;
     }
-    console.warn('HumanBehavior not initialized yet, event queued:', event);
+    logWarn('HumanBehavior not initialized yet, event queued:', event);
   }
 };
 
-const HumanBehaviorContext = createContext<HumanBehaviorContextType>(defaultContext);
+const HumanBehaviorContext = createContext<HumanBehaviorTracker | null>(null);
 
-export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehaviorProviderProps) => {
+export const HumanBehaviorProvider = ({ apiKey, client, children, options }: HumanBehaviorProviderProps) => {
   const [humanBehavior, setHumanBehavior] = useState<HumanBehaviorTracker | null>(client || null);
   const [eventQueue, setEventQueue] = useState<any[]>([]);
   const [isMounted, setIsMounted] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
+  
+  // Use refs to avoid dependency issues in useEffect
+  const apiKeyRef = useRef(apiKey);
+  const clientRef = useRef(client);
+  const eventQueueRef = useRef(eventQueue);
+  
+  // Update refs when props change
+  useEffect(() => {
+    apiKeyRef.current = apiKey;
+    clientRef.current = client;
+  }, [apiKey, client]);
+  
+  // Update eventQueue ref when queue changes
+  useEffect(() => {
+    eventQueueRef.current = eventQueue;
+  }, [eventQueue]);
 
-  // Function to queue events before initialization
-  const queueEvent = (event: any) => {
+  // Memoized queueEvent function to prevent unnecessary re-renders
+  const queueEvent = useCallback((event: any) => {
     setEventQueue(prev => [...prev, event]);
-  };
+  }, []);
 
   // Handle mounting state
   useEffect(() => {
@@ -66,15 +89,15 @@ export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehavio
     }
 
     // If client is provided, use that
-    if (client) {
-      setHumanBehavior(client);
+    if (clientRef.current) {
+      setHumanBehavior(clientRef.current);
       setIsInitialized(true);
       return;
     }
 
     // If no client is provided, apiKey is required
-    if (!apiKey || apiKey.trim() === '') {
-      console.error("An apiKey is required when no client is provided");
+    if (!apiKeyRef.current || apiKeyRef.current.trim() === '') {
+      logError("An apiKey is required when no client is provided");
       return;
     }
 
@@ -83,7 +106,10 @@ export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehavio
     }
 
     // Create new tracker instance with the validated apiKey
-    const tracker = new HumanBehaviorTracker(apiKey.trim(), process.env.NEXT_PUBLIC_INGESTION_URL || 'https://ingestion.humanbehavior.ai');
+    const tracker = new HumanBehaviorTracker(
+      apiKeyRef.current.trim(), 
+      process.env.NEXT_PUBLIC_INGESTION_URL || 'https://ingestion.humanbehavior.ai'
+    );
     setHumanBehavior(tracker);
 
     // Wait for initialization to complete
@@ -91,10 +117,11 @@ export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehavio
       setIsInitialized(true);
       
       // Process any queued events
-      if (eventQueue.length > 0) {
-        eventQueue.forEach(event => {
+      const currentQueue = eventQueueRef.current;
+      if (currentQueue.length > 0) {
+        currentQueue.forEach(event => {
           if (event.type === 'identify') {
-            console.log('Processing queued identify event', event.userProperties);
+            logDebug('Processing queued identify event', event.userProperties);
             tracker.addUserInfo(event.userProperties);
           } else {
             tracker.addEvent(event);
@@ -103,87 +130,116 @@ export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehavio
         setEventQueue([]); // Clear the queue
       }
     }).catch(error => {
-      console.error('Failed to initialize HumanBehaviorTracker:', error);
+      logError('Failed to initialize HumanBehaviorTracker:', error);
     });
-  }, [apiKey, client, eventQueue, isMounted]);
+  }, [isMounted, humanBehavior]); // Removed apiKey, client, eventQueue from dependencies
+
+  // Memoized context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => {
+    if (!isMounted) {
+      return null;
+    }
+    
+    if (!isInitialized) {
+      return null;
+    }
+    
+    return humanBehavior;
+  }, [isMounted, isInitialized, humanBehavior]);
 
   // If not in browser, render children without context
   if (!(isBrowser())) {
     return <>{children}</>;
   }
 
-  // If not mounted yet, render children with queuing context
-  if (!isMounted) {
-    return (
-      <HumanBehaviorContext.Provider value={{ humanBehavior: null, queueEvent }}>
-        {children}
-      </HumanBehaviorContext.Provider>
-    );
-  }
-
-  // If not initialized yet, render children with queuing context
-  if (!isInitialized) {
-    return (
-      <HumanBehaviorContext.Provider value={{ humanBehavior: null, queueEvent }}>
-        {children}
-      </HumanBehaviorContext.Provider>
-    );
-  }
-
   return (
-    <HumanBehaviorContext.Provider value={{ humanBehavior, queueEvent }}>
+    <HumanBehaviorContext.Provider value={contextValue}>
+      <HumanBehaviorPageView />
       {children}
     </HumanBehaviorContext.Provider>
   );
 };
 
-export const useHumanBehavior = (): HumanBehaviorInterface => {
-  const context = useContext(HumanBehaviorContext);
-  
-  // Only throw if the hook is used outside of a provider entirely
-  if (context === null) {
-    throw new Error("useHumanBehavior must be used within a HumanBehaviorProvider");
-  }
+// No-op implementation for server-side
+const serverSideImplementation: HumanBehaviorInterface = {
+  addEvent: () => {},
+  addUserInfo: async () => {},
+  start: () => {},
+  stop: () => {},
+  viewLogs: () => {},
+};
 
-  // If we're in the server-side, return a no-op implementation
-  if (typeof window === 'undefined') {
-    console.warn('HumanBehavior is being used before being initialized');
-    return {
-      addEvent: () => {},
-      addUserInfo: async () => {},
-      start: () => {},
-      stop: () => {},
-      viewLogs: () => {},
-    };
+// Memoized queuing implementation for initialization period
+const createQueuingImplementation = (queueEvent: (event: any) => void): HumanBehaviorInterface => ({
+  addEvent: (event: any) => {
+    queueEvent(event);
+  },
+  addUserInfo: async (userProperties: Record<string, any>) => {
+    queueEvent({
+      type: 'identify',
+      userProperties,
+    });
+  },
+  start: () => {
+    // Start will be called automatically when initialized
+  },
+  stop: () => {
+    // Stop is a no-op when not initialized
+  },
+  viewLogs: () => {
+    logWarn('Logs are not available until HumanBehaviorTracker is initialized');
   }
-  
-  // If we have an initialized tracker, return it as the interface
-  if (context.humanBehavior) {
-    return context.humanBehavior;
+});
+
+export const useHumanBehavior = () => {
+  const tracker = useContext(HumanBehaviorContext);
+  if (!tracker) {
+    throw new Error('useHumanBehavior must be used within a HumanBehaviorProvider');
   }
+  return tracker;
+};
+
+// Automatic page tracking component (similar to PostHog's PostHogPageView)
+function HumanBehaviorPageView() {
+  const tracker = useContext(HumanBehaviorContext);
 
-  // If we reach here, we're in the initialization period where:
-  // - context.humanBehavior is null
-  // - context.queueEvent is available
-  // - we need to queue all operations until initialization completes
-  return {
-    addEvent: (event: any) => {
-      context.queueEvent(event);
-    },
-    addUserInfo: async (userProperties: Record<string, any>) => {
-      context.queueEvent({
-        type: 'identify',
-        userProperties,
-      });
-    },
-    start: () => {
-      // Start will be called automatically when initialized
-    },
-    stop: () => {
-      // Stop is a no-op when not initialized
-    },
-    viewLogs: () => {
-      console.warn('Logs are not available until HumanBehaviorTracker is initialized');
+  useEffect(() => {
+    if (tracker && typeof window !== 'undefined') {
+      // Track initial page load
+      tracker.trackPageView();
+
+      // Listen for route changes (for SPAs)
+      const handleRouteChange = () => {
+        tracker.trackPageView();
+      };
+
+      // Listen for popstate (back/forward navigation)
+      window.addEventListener('popstate', handleRouteChange);
+
+      // Listen for pushstate/replacestate (programmatic navigation)
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+
+      history.pushState = function(...args) {
+        originalPushState.apply(this, args);
+        handleRouteChange();
+      };
+
+      history.replaceState = function(...args) {
+        originalReplaceState.apply(this, args);
+        handleRouteChange();
+      };
+
+      return () => {
+        window.removeEventListener('popstate', handleRouteChange);
+        history.pushState = originalPushState;
+        history.replaceState = originalReplaceState;
+      };
     }
-  };
-};
+  }, [tracker]);
+
+  return null;
+}
+
+// Export the tracker class for direct use
+export { HumanBehaviorTracker };

package/src/redact.ts

@@ -1,6 +1,8 @@
 // Redaction functionality for sensitive input fields
 // This module provides methods to redact sensitive input fields in event recordings
 
+import { logDebug, logWarn } from './utils/logger';
+
 // Check if we're in a browser environment
 const isBrowser = typeof window !== 'undefined';
 
@@ -39,18 +41,18 @@ export class RedactionManager {
         fields.forEach(field => this.userSelectedFields.add(field));
         
         if (fields.length > 0) {
-            console.log(`Redaction: Active for ${fields.length} field(s):`, fields);
+            logDebug(`Redaction: Active for ${fields.length} field(s):`, fields);
             
             // Debug: Check if elements exist
             fields.forEach(selector => {
                 const elements = document.querySelectorAll(selector);
-                console.log(`Redaction: Found ${elements.length} element(s) for selector '${selector}'`);
+                logDebug(`Redaction: Found ${elements.length} element(s) for selector '${selector}'`);
                 elements.forEach((el, index) => {
-                    console.log(`Redaction: Element ${index} for '${selector}':`, el);
+                    logDebug(`Redaction: Element ${index} for '${selector}':`, el);
                 });
             });
         } else {
-            console.log('Redaction: Disabled - no fields selected');
+            logDebug('Redaction: Disabled - no fields selected');
         }
     }
 
@@ -85,7 +87,7 @@ export class RedactionManager {
             if (processedEvent.data.source === 5) { // Input event
                 const shouldRedact = this.isFieldSelected(processedEvent.data);
                 if (shouldRedact) {
-                    console.log('Redaction: Processing input event for redaction');
+                    logDebug('Redaction: Processing input event for redaction');
                     this.redactInputEvent(processedEvent.data);
                 }
             }
@@ -114,14 +116,14 @@ export class RedactionManager {
             return;
         }
         
-        console.log('Redaction: Redacting input event with text:', inputData.text);
+        logDebug('Redaction: Redacting input event with text:', inputData.text);
         
         // Redact all text-related properties that could contain input data
         const textProperties = ['text', 'value', 'content', 'data', 'input', 'textContent'];
         textProperties.forEach(prop => {
             if (inputData[prop] !== undefined && typeof inputData[prop] === 'string') {
                 inputData[prop] = this.redactedText;
-                console.log(`Redaction: Redacted property '${prop}'`);
+                logDebug(`Redaction: Redacted property '${prop}'`);
             }
         });
         
@@ -129,7 +131,7 @@ export class RedactionManager {
         Object.keys(inputData).forEach(key => {
             if (typeof inputData[key] === 'string' && inputData[key].length > 0) {
                 inputData[key] = this.redactedText;
-                console.log(`Redaction: Redacted additional property '${key}'`);
+                logDebug(`Redaction: Redacted additional property '${key}'`);
             }
         });
 
@@ -137,11 +139,11 @@ export class RedactionManager {
         if (inputData.attributes && typeof inputData.attributes === 'object') {
             if (inputData.attributes.value && typeof inputData.attributes.value === 'string') {
                 inputData.attributes.value = this.redactedText;
-                console.log('Redaction: Redacted nested value attribute');
+                logDebug('Redaction: Redacted nested value attribute');
             }
         }
         
-        console.log('Redaction: Input event redaction complete');
+        logDebug('Redaction: Input event redaction complete');
     }
 
     /**
@@ -209,7 +211,7 @@ export class RedactionManager {
             
             return false;
         } catch (e) {
-            console.warn('Error checking if DOM change should be redacted:', e);
+            logWarn('Error checking if DOM change should be redacted:', e);
             return false;
         }
     }
@@ -373,10 +375,10 @@ export class RedactionManager {
                         if (matchingElements.length > 0) {
                             // Check if any of these elements are currently focused
                             for (const el of matchingElements) {
-                                if (el === document.activeElement) {
-                                    console.log('Redaction: Found focused element matching selector:', selector);
-                                    return true;
-                                }
+                                                            if (el === document.activeElement) {
+                                logDebug('Redaction: Found focused element matching selector:', selector);
+                                return true;
+                            }
                             }
                         }
                     }
@@ -385,7 +387,7 @@ export class RedactionManager {
                     // Look for any input element that might be the active one
                     const activeElement = document.activeElement;
                     if (activeElement && this.shouldRedactElement(activeElement as HTMLElement)) {
-                        console.log('Redaction: Active element should be redacted');
+                        logDebug('Redaction: Active element should be redacted');
                         return true;
                     }
                     
@@ -423,7 +425,7 @@ export class RedactionManager {
             
             return false;
         } catch (e) {
-            console.warn('Error checking if field should be redacted:', e);
+            logWarn('Error checking if field should be redacted:', e);
             return false;
         }
     }