humanbehavior-js 0.4.16 → 0.4.18

package/package/src/react/index.tsx

@@ -0,0 +1,308 @@
+import React, { useEffect, useState, createContext, useContext, ReactNode, useCallback, useMemo, useRef } from "react";
+import { HumanBehaviorTracker, logError, logWarn, logDebug } from "./browser";
+
+// Check if we're in a browser environment
+const isBrowser = () => typeof window !== 'undefined';
+
+// Define the public interface that components will interact with
+interface HumanBehaviorInterface {
+  addEvent: (event: any) => void;
+  identifyUser: ({ userProperties }: { userProperties: Record<string, any> }) => Promise<string>;
+  start: () => void;
+  stop: () => void;
+  logout: () => void;
+  viewLogs: () => void;
+}
+
+interface HumanBehaviorContextType {
+  humanBehavior: HumanBehaviorTracker | null;
+  queueEvent: (event: any) => void;
+}
+
+interface HumanBehaviorProviderProps {
+  // Either provide an apiKey to create a new client, or provide an existing client
+  apiKey?: string;
+  client?: HumanBehaviorTracker;
+  children: ReactNode;
+  options?: {
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  };
+}
+
+// Default context to prevent unnecessary re-renders
+const defaultContext: HumanBehaviorContextType = {
+  humanBehavior: null,
+  queueEvent: (event: any) => {
+    // In server-side, just no-op
+    if (typeof window === 'undefined') {
+      return;
+    }
+    logWarn('HumanBehavior not initialized yet, event queued:', event);
+  }
+};
+
+const HumanBehaviorContext = createContext<HumanBehaviorTracker | null>(null);
+
+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]);
+
+  // Memoized queueEvent function to prevent unnecessary re-renders
+  const queueEvent = useCallback((event: any) => {
+    setEventQueue(prev => [...prev, event]);
+  }, []);
+
+  // Handle mounting state
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    // Only run in browser
+    if (!(isBrowser())) {
+      return;
+    }
+
+    // Skip if not mounted yet (handles Next.js hydration)
+    if (!isMounted) {
+      return;
+    }
+
+    // If client is provided, use that
+    if (clientRef.current) {
+      setHumanBehavior(clientRef.current);
+      setIsInitialized(true);
+      return;
+    }
+
+    // If no client is provided, apiKey is required
+    if (!apiKeyRef.current || apiKeyRef.current.trim() === '') {
+      logError("An apiKey is required when no client is provided");
+      return;
+    }
+
+    if (humanBehavior !== null) {
+      return;
+    }
+
+    // Create new tracker instance with the validated apiKey and options
+    const tracker = HumanBehaviorTracker.init(
+      apiKeyRef.current.trim(),
+      {
+        ingestionUrl: options?.ingestionUrl,
+        logLevel: options?.logLevel,
+        redactFields: options?.redactFields,
+        suppressConsoleErrors: options?.suppressConsoleErrors,
+        recordCanvas: options?.recordCanvas, // Pass canvas recording option
+      }
+    );
+    
+    setHumanBehavior(tracker);
+
+    // Wait for initialization to complete
+    tracker.initializationPromise?.then(async () => {
+        await tracker.start();
+        setIsInitialized(true);
+        
+      // Process any queued events
+      const currentQueue = eventQueueRef.current;
+      if (currentQueue.length > 0) {
+        for (const event of currentQueue) {
+          if (event.type === 'identify') {
+            logDebug('Processing queued identify event', event);
+            try {
+              await tracker.identifyUser({ userProperties: event.userProperties });
+            } catch (error) {
+              logError('Failed to process queued user info:', error);
+            }
+          } else {
+            tracker.addEvent(event);
+          }
+        }
+        setEventQueue([]); // Clear the queue
+      }
+    }).catch(error => {
+      logError('Failed to initialize HumanBehaviorTracker:', error);
+    });
+  }, [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}</>;
+  }
+
+  return (
+    <HumanBehaviorContext.Provider value={contextValue}>
+      <HumanBehaviorPageView />
+      {children}
+    </HumanBehaviorContext.Provider>
+  );
+};
+
+// Default implementation for when tracker is not available
+const defaultImplementation: HumanBehaviorInterface = {
+  addEvent: () => {},
+  identifyUser: async ({ userProperties }: { userProperties: Record<string, any> }) => {
+    return '';
+  },
+  start: () => {},
+  stop: () => {},
+  logout: () => {},
+  viewLogs: () => {},
+};
+
+// Memoized queuing implementation for initialization period
+const createQueuingImplementation = (queueEvent: (event: any) => void): HumanBehaviorInterface => ({
+  addEvent: (event: any) => {
+    queueEvent(event);
+  },
+  identifyUser: async ({ userProperties }: { userProperties: Record<string, any> }) => {
+    queueEvent({
+      type: 'identify',
+      userProperties,
+    });
+    return ''; // Return empty string to match interface
+  },
+  start: () => {
+    // Start will be called automatically when initialized
+  },
+  stop: () => {
+    // Stop is a no-op when not initialized
+  },
+  logout: () => {
+    // Logout is a no-op when not initialized
+  },
+  viewLogs: () => {
+    logWarn('Logs are not available until HumanBehaviorTracker is initialized');
+  }
+});
+
+export const useHumanBehavior = () => {
+  const tracker = useContext(HumanBehaviorContext);
+  if (!tracker) {
+    throw new Error('useHumanBehavior must be used within a HumanBehaviorProvider');
+  }
+  return tracker;
+};
+
+// Custom hook for managing redaction fields dynamically
+export const useRedaction = () => {
+  const tracker = useHumanBehavior();
+  
+  const setRedactedFields = useCallback((fields: string[]) => {
+    tracker.setRedactedFields(fields);
+  }, [tracker]);
+  
+  const isRedactionActive = useCallback(() => {
+    return tracker.isRedactionActive();
+  }, [tracker]);
+  
+  const getRedactedFields = useCallback(() => {
+    return tracker.getRedactedFields();
+  }, [tracker]);
+  
+  return {
+    setRedactedFields,
+    isRedactionActive,
+    getRedactedFields
+  };
+};
+
+// Custom hook for managing user info
+export const useUserTracking = () => {
+  const tracker = useHumanBehavior();
+  
+  const identifyUser = useCallback(async ({ userProperties }: { userProperties: Record<string, any> }) => {
+    try {
+      await tracker.identifyUser({ userProperties });
+      return { success: true };
+    } catch (error) {
+      logError('Failed to identify user:', error);
+      return { success: false, error };
+    }
+  }, [tracker]);
+  
+  return {
+    identifyUser
+  };
+};
+
+// Automatic page tracking component (similar to PostHog's PostHogPageView)
+function HumanBehaviorPageView() {
+  const tracker = useContext(HumanBehaviorContext);
+
+  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 };