humanbehavior-js 0.0.7 → 0.0.9

package/dist/types/index.d.ts

@@ -101,10 +101,34 @@ declare class HumanBehaviorTracker {
     private initialized;
     initializationPromise: Promise<void> | null;
     private redactionManager;
-    constructor(apiKey: string | undefined, ingestionUrl: string | undefined);
+    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.7",
+  "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/readme.md

@@ -1,57 +1,145 @@
-To build, run `npm run build`
+# HumanBehavior SDK
 
+A JavaScript SDK for session recording and user behavior analytics.
 
-Usage:
+## Installation
 
-NextJS
+```bash
+npm install humanbehavior-js
+```
+
+## Usage
+
+### Vanilla JavaScript
+
+```html
+<script src="https://unpkg.com/humanbehavior-js@0.0.7/dist/index.min.js"></script>
+<script>
+    const tracker = new HumanBehaviorTracker("your-api-key-here");
+    tracker.start();
+    
+    // Set up redaction for sensitive fields
+    tracker.setRedactedFields(['#password', 'input[type="password"]']);
+</script>
+```
 
-Add the following to your `providers.tsx` file.
-```ts
+### Next.js
+
+Add the following to your `providers.tsx` file:
+
+```tsx
 "use client"
 
-import { KoalawareTracker } from "koalaware-js";
-import { KoalawareProvider as KoalawareProviderJS } from "koalaware-js/react";
+import { HumanBehaviorTracker } from "humanbehavior-js";
+import { HumanBehaviorProvider } from "humanbehavior-js/react";
 import { useEffect, useState } from "react";
 
-export function KoalawareProvider({ children }: { children: React.ReactNode }) {
-    const [koalaware, setKoalaware] = useState<KoalawareTracker | null>(null);
+export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
+    const [tracker, setTracker] = useState<HumanBehaviorTracker | null>(null);
 
     useEffect(() => {
-        const apiKey = "kw_1c8969a408ea2eb333fd174a7684c7c943e82ea1df8349b43640e4b608f35e68";
-        const koalaware = new KoalawareTracker(apiKey);
-        setKoalaware(koalaware);
+        const apiKey = process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY;
+        if (apiKey) {
+            const tracker = new HumanBehaviorTracker(apiKey);
+            setTracker(tracker);
+        }
     }, []);
 
     return (
-        <KoalawareProviderJS client={koalaware}>
+        <HumanBehaviorProvider client={tracker}>
+            {children}
+        </HumanBehaviorProvider>  
+    )
+}
+```
+
+Or use the simpler approach with just an API key:
+
+```tsx
+"use client"
+
+import { HumanBehaviorProvider } from "humanbehavior-js/react";
+
+export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
+    return (
+        <HumanBehaviorProvider apiKey={process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY}>
             {children}
-        </KoalawareProviderJS>  
+        </HumanBehaviorProvider>  
     )
 }
 ```
 
-Next, add the provider to your root app layout.
-```ts
+Next, add the provider to your root app layout:
+
+```tsx
 export default async function RootLayout({
   children
 }: {
   children: React.ReactNode;
 }) {
-  const session = await auth();
   return (
-    <html lang='en' className={`${lato.className}`} suppressHydrationWarning>
-      <body className={'overflow-hidden'}>
-        <NextTopLoader showSpinner={false} />
-        <KoalawareProvider>
-          <NuqsAdapter>
-            <Providers session={session}>
-              <Toaster />
-              {children}
-            </Providers>
-          </NuqsAdapter>
-        </KoalawareProvider>
+    <html lang='en' suppressHydrationWarning>
+      <body>
+        <HumanBehaviorProviderWrapper>
+          {children}
+        </HumanBehaviorProviderWrapper>
       </body>
     </html>
   );
 }
+```
+
+### Using the Hook
+
+In any component within the provider:
+
+```tsx
+import { useHumanBehavior } from "humanbehavior-js/react";
+
+export function MyComponent() {
+    const humanBehavior = useHumanBehavior();
+    
+    const handleUserAction = async () => {
+        // Add user information
+        await humanBehavior.addUserInfo({
+            email: "user@example.com",
+            name: "John Doe"
+        });
+        
+        // Track custom events
+        humanBehavior.addEvent({
+            type: "custom",
+            name: "button_clicked",
+            data: { buttonId: "submit" }
+        });
+    };
+    
+    return <button onClick={handleUserAction}>Click me</button>;
+}
+```
+
+## Environment Variables
+
+For security, store your API key in environment variables:
+
+```bash
+# .env.local
+NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY=your-api-key-here
+NEXT_PUBLIC_INGESTION_URL=https://ingestion.humanbehavior.ai
+```
+
+## Features
+
+- **Session Recording**: Automatic recording of user interactions
+- **Data Redaction**: Protect sensitive information in recordings
+- **User Identification**: Track users across sessions
+- **Custom Events**: Send custom analytics events
+- **React Integration**: Hooks and providers for React applications
+
+## Build
+
+To build the SDK locally:
+
+```bash
+npm run build
 ```

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 {
@@ -30,15 +32,27 @@ export class HumanBehaviorAPI {
     }
 
     public async init(sessionId: string, userId: string | null) {
+        // Get current page URL and referrer if in browser environment
+        let entryURL = null;
+        let referrer = null;
+        
+        if (typeof window !== 'undefined') {
+            entryURL = window.location.href;
+            referrer = document.referrer;
+        }
+
         const response = await fetch(`${this.baseUrl}/api/ingestion/init`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                'Authorization': `Bearer ${this.apiKey}`
+                'Authorization': `Bearer ${this.apiKey}`,
+                'Referer': referrer || ''
             },
             body: JSON.stringify({
                 sessionId: sessionId,
-                endUserId: userId
+                endUserId: userId,
+                entryURL: entryURL,
+                referrer: referrer
             })
         });
 
@@ -135,7 +149,7 @@ export class HumanBehaviorAPI {
             
             return results.flat();
         } catch (error) {
-            console.error('Error sending events:', error);
+            logError('Error sending events:', error);
             throw error;
         }
     }
@@ -161,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;
         }
     }
@@ -188,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;
         }
     }
@@ -236,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
@@ -273,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
@@ -289,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]);
 };