humanbehavior-js 0.0.8 → 0.0.9

package/dist/types/index.d.ts

@@ -101,10 +101,34 @@ declare class HumanBehaviorTracker {
     private initialized;
     initializationPromise: Promise<void> | null;
     private redactionManager;
+    private originalConsole;
+    private originalLogger;
+    private consoleTrackingEnabled;
     constructor(apiKey: string | undefined, ingestionUrl?: string);
     private init;
     private ensureInitialized;
     static logToStorage(message: string): void;
+    /**
+     * Configure logging behavior for the SDK
+     * @param config Logger configuration options
+     */
+    static configureLogging(config: {
+        level?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+        enableConsole?: boolean;
+        enableStorage?: boolean;
+    }): void;
+    /**
+     * Enable console event tracking
+     */
+    enableConsoleTracking(): void;
+    /**
+     * Disable console event tracking
+     */
+    disableConsoleTracking(): void;
+    /**
+     * Track console events
+     */
+    private trackConsoleEvent;
     private setupPageUnloadHandler;
     viewLogs(): void;
     addUserInfo(userProperties: Record<string, any>): Promise<void>;
@@ -168,5 +192,38 @@ declare class HumanBehaviorAPI {
     sendBeaconCustomEvents(events: any[], sessionId: string): boolean;
 }
 
-export { HumanBehaviorAPI, HumanBehaviorTracker, MAX_CHUNK_SIZE_BYTES, RedactionManager, HumanBehaviorTracker as default, isChunkSizeExceeded, redactionManager, validateSingleEventSize };
-export type { RedactionOptions };
+declare enum LogLevel {
+    NONE = 0,
+    ERROR = 1,
+    WARN = 2,
+    INFO = 3,
+    DEBUG = 4
+}
+interface LoggerConfig {
+    level: LogLevel;
+    enableConsole: boolean;
+    enableStorage: boolean;
+}
+declare class Logger {
+    private config;
+    private isBrowser;
+    constructor(config?: Partial<LoggerConfig>);
+    setConfig(config: Partial<LoggerConfig>): void;
+    private shouldLog;
+    private formatMessage;
+    error(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    info(message: string, ...args: any[]): void;
+    debug(message: string, ...args: any[]): void;
+    private logToStorage;
+    getLogs(): any[];
+    clearLogs(): void;
+}
+declare const logger: Logger;
+declare const logError: (message: string, ...args: any[]) => void;
+declare const logWarn: (message: string, ...args: any[]) => void;
+declare const logInfo: (message: string, ...args: any[]) => void;
+declare const logDebug: (message: string, ...args: any[]) => void;
+
+export { HumanBehaviorAPI, HumanBehaviorTracker, LogLevel, MAX_CHUNK_SIZE_BYTES, RedactionManager, HumanBehaviorTracker as default, isChunkSizeExceeded, logDebug, logError, logInfo, logWarn, logger, redactionManager, validateSingleEventSize };
+export type { LoggerConfig, RedactionOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -49,7 +49,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/humanbehavior-gh/HumanBehavior.git"
+    "url": "git+https://github.com/humanbehavior-gh/HumanBehavior.git"
   },
   "keywords": [
     "session-recording",

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,7 +202,7 @@ export class HumanBehaviorAPI {
             
             return await response.json();
         } catch (error) {
-            console.error('Error authenticating user:', error);
+            logError('Error authenticating user:', error);
             throw error;
         }
     }
@@ -248,7 +250,7 @@ export class HumanBehaviorAPI {
             } catch (error) {
                 retryCount++;
                 if (retryCount === maxRetries) {
-                    console.error('Error sending custom event after max retries:', error);
+                    logError('Error sending custom event after max retries:', error);
                     throw error;
                 }
                 // Exponential backoff
@@ -285,7 +287,7 @@ export class HumanBehaviorAPI {
             } catch (error) {
                 retryCount++;
                 if (retryCount === maxRetries) {
-                    console.error('Error sending custom events after max retries:', error);
+                    logError('Error sending custom events after max retries:', error);
                     throw error;
                 }
                 // Exponential backoff
@@ -301,7 +303,7 @@ export class HumanBehaviorAPI {
         data.append('timestamp', encodeURIComponent(Date.now().toString()))
         data.append('apiKey', encodeURIComponent(this.apiKey))
         if (isSessionComplete) {
-            console.log('Session complete beacon sending');
+            logInfo('Session complete beacon sending');
             localStorage.setItem('koalaware_session_complete', Date.now().toString());
             data.append('sessionComplete', encodeURIComponent('true'))
         }

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';
@@ -25,6 +26,7 @@ interface HumanBehaviorProviderProps {
   children: ReactNode;
 }
 
+// Default context to prevent unnecessary re-renders
 const defaultContext: HumanBehaviorContextType = {
   humanBehavior: null,
   queueEvent: (event: any) => {
@@ -32,7 +34,7 @@ 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);
   }
 };
 
@@ -43,11 +45,27 @@ export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehavio
   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 +84,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 +101,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 +112,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,40 +125,66 @@ 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 { humanBehavior: null, queueEvent };
+    }
+    
+    if (!isInitialized) {
+      return { humanBehavior: null, queueEvent };
+    }
+    
+    return { humanBehavior, queueEvent };
+  }, [isMounted, isInitialized, humanBehavior, queueEvent]);
 
   // 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}>
       {children}
     </HumanBehaviorContext.Provider>
   );
 };
 
+// No-op implementation for server-side
+const serverSideImplementation: HumanBehaviorInterface = {
+  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');
+  }
+});
+
 export const useHumanBehavior = (): HumanBehaviorInterface => {
   const context = useContext(HumanBehaviorContext);
   
@@ -147,14 +195,8 @@ export const useHumanBehavior = (): HumanBehaviorInterface => {
 
   // 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: () => {},
-    };
+    logWarn('HumanBehavior is being used before being initialized');
+    return serverSideImplementation;
   }
   
   // If we have an initialized tracker, return it as the interface
@@ -166,24 +208,5 @@ export const useHumanBehavior = (): HumanBehaviorInterface => {
   // - 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');
-    }
-  };
+  return useMemo(() => createQueuingImplementation(context.queueEvent), [context.queueEvent]);
 };

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;
         }
     }