humanbehavior-js 0.0.5 → 0.0.7

package/src/react/index.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useState, createContext, useContext, ReactNode } from "react";
+import { HumanBehaviorTracker } from "..";
+
+// 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;
+  addUserInfo: (userProperties: Record<string, any>) => Promise<void>;
+  start: () => void;
+  stop: () => 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;
+}
+
+const defaultContext: HumanBehaviorContextType = {
+  humanBehavior: null,
+  queueEvent: (event: any) => {
+    // In server-side, just no-op
+    if (typeof window === 'undefined') {
+      return;
+    }
+    console.warn('HumanBehavior not initialized yet, event queued:', event);
+  }
+};
+
+const HumanBehaviorContext = createContext<HumanBehaviorContextType>(defaultContext);
+
+export const HumanBehaviorProvider = ({ apiKey, client, children }: HumanBehaviorProviderProps) => {
+  const [humanBehavior, setHumanBehavior] = useState<HumanBehaviorTracker | null>(client || null);
+  const [eventQueue, setEventQueue] = useState<any[]>([]);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Function to queue events before initialization
+  const queueEvent = (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 (client) {
+      setHumanBehavior(client);
+      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");
+      return;
+    }
+
+    if (humanBehavior !== null) {
+      return;
+    }
+
+    // Create new tracker instance with the validated apiKey
+    const tracker = new HumanBehaviorTracker(apiKey.trim(), process.env.NEXT_PUBLIC_INGESTION_URL || 'https://ingestion.humanbehavior.ai');
+    setHumanBehavior(tracker);
+
+    // Wait for initialization to complete
+    tracker.initializationPromise?.then(() => {
+      setIsInitialized(true);
+      
+      // Process any queued events
+      if (eventQueue.length > 0) {
+        eventQueue.forEach(event => {
+          if (event.type === 'identify') {
+            console.log('Processing queued identify event', event.userProperties);
+            tracker.addUserInfo(event.userProperties);
+          } else {
+            tracker.addEvent(event);
+          }
+        });
+        setEventQueue([]); // Clear the queue
+      }
+    }).catch(error => {
+      console.error('Failed to initialize HumanBehaviorTracker:', error);
+    });
+  }, [apiKey, client, eventQueue, isMounted]);
+
+  // 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 }}>
+      {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");
+  }
+
+  // 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: () => {},
+    };
+  }
+  
+  // If we have an initialized tracker, return it as the interface
+  if (context.humanBehavior) {
+    return context.humanBehavior;
+  }
+
+  // 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');
+    }
+  };
+};

package/src/redact.ts

@@ -0,0 +1,474 @@
+// Redaction functionality for sensitive input fields
+// This module provides methods to redact sensitive input fields in event recordings
+
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined';
+
+export interface RedactionOptions {
+    redactedText?: string;
+    excludeSelectors?: string[];
+    userFields?: string[]; // Fields that the user wants to redact
+}
+
+export class RedactionManager {
+    private redactedText: string = '[REDACTED]';
+    private userSelectedFields: Set<string> = new Set(); // User-selected fields to redact
+    private excludeSelectors: string[] = [
+        '[data-no-redact="true"]',
+        '.human-behavior-no-redact'
+    ];
+
+    constructor(options?: RedactionOptions) {
+        if (options?.redactedText) {
+            this.redactedText = options.redactedText;
+        }
+        if (options?.excludeSelectors) {
+            this.excludeSelectors = [...this.excludeSelectors, ...options.excludeSelectors];
+        }
+        if (options?.userFields) {
+            this.setFieldsToRedact(options.userFields);
+        }
+    }
+
+    /**
+     * Set specific fields to be redacted
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    public setFieldsToRedact(fields: string[]): void {
+        this.userSelectedFields.clear();
+        fields.forEach(field => this.userSelectedFields.add(field));
+        
+        if (fields.length > 0) {
+            console.log(`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}'`);
+                elements.forEach((el, index) => {
+                    console.log(`Redaction: Element ${index} for '${selector}':`, el);
+                });
+            });
+        } else {
+            console.log('Redaction: Disabled - no fields selected');
+        }
+    }
+
+    /**
+     * Check if redaction is currently active (has fields selected)
+     */
+    public isActive(): boolean {
+        return this.userSelectedFields.size > 0;
+    }
+
+    /**
+     * Get the currently selected fields for redaction
+     */
+    public getSelectedFields(): string[] {
+        return Array.from(this.userSelectedFields);
+    }
+
+    /**
+     * Process an event and redact sensitive data if needed
+     */
+    public processEvent(event: any): any {
+        // Only process if we have fields selected for redaction
+        if (this.userSelectedFields.size === 0) {
+            return event;
+        }
+
+        // Clone the event to avoid modifying the original
+        const processedEvent = JSON.parse(JSON.stringify(event));
+
+        // Handle different event types
+        if (processedEvent.type === 3) { // IncrementalSnapshot
+            if (processedEvent.data.source === 5) { // Input event
+                const shouldRedact = this.isFieldSelected(processedEvent.data);
+                if (shouldRedact) {
+                    console.log('Redaction: Processing input event for redaction');
+                    this.redactInputEvent(processedEvent.data);
+                }
+            }
+            // Also check for other sources that might contain text changes
+            else if (processedEvent.data.source === 0) { // DOM mutations
+                this.redactDOMEvent(processedEvent.data);
+            }
+            // Handle other sources that might contain text
+            else if (processedEvent.data.source === 2) { // Mouse/Touch interaction
+                this.redactMouseEvent(processedEvent.data);
+            }
+        }
+        else if (processedEvent.type === 2) { // FullSnapshot
+            this.redactFullSnapshot(processedEvent.data);
+        }
+
+        return processedEvent;
+    }
+
+    /**
+     * Redact sensitive data in input events
+     */
+    private redactInputEvent(inputData: any): void {
+        // Check if this input event is from a field we want to redact
+        if (!this.isFieldSelected(inputData)) {
+            return;
+        }
+        
+        console.log('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}'`);
+            }
+        });
+        
+        // Also check for any other string properties that might contain input data
+        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}'`);
+            }
+        });
+
+        // Handle nested objects that might contain text data
+        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');
+            }
+        }
+        
+        console.log('Redaction: Input event redaction complete');
+    }
+
+    /**
+     * Redact sensitive data in DOM mutation events
+     */
+    private redactDOMEvent(domData: any): void {
+        // Check for text changes in DOM mutations
+        if (domData.texts && Array.isArray(domData.texts)) {
+            domData.texts.forEach((textChange: any) => {
+                if (textChange.text && typeof textChange.text === 'string' && 
+                    this.shouldRedactDOMChange(textChange)) {
+                    textChange.text = this.redactedText;
+                }
+            });
+        }
+        
+        // Also check for attribute changes that might contain input data
+        if (domData.attributes && Array.isArray(domData.attributes)) {
+            domData.attributes.forEach((attrChange: any) => {
+                if (attrChange.attributes && attrChange.attributes.value && 
+                    typeof attrChange.attributes.value === 'string' &&
+                    this.shouldRedactDOMChange(attrChange)) {
+                    attrChange.attributes.value = this.redactedText;
+                }
+            });
+        }
+
+        // Check for any other properties that might contain text data
+        if (domData.adds && Array.isArray(domData.adds)) {
+            domData.adds.forEach((add: any) => {
+                if (add.node && add.node.textContent && typeof add.node.textContent === 'string' &&
+                    this.shouldRedactDOMChange(add)) {
+                    add.node.textContent = this.redactedText;
+                }
+            });
+        }
+    }
+
+    /**
+     * Check if a DOM change should be redacted based on its ID
+     */
+    private shouldRedactDOMChange(changeData: any): boolean {
+        if (!isBrowser) return false;
+        
+        try {
+            // Check if this change has an ID that we can use to find the element
+            const elementId = changeData.id;
+            if (elementId !== undefined) {
+                // Try to find the element by data-rrweb-id attribute
+                let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
+                
+                if (element) {
+                    return this.shouldRedactElement(element);
+                }
+            }
+            
+            // Also check for nodeId which is another way rrweb identifies elements
+            const nodeId = changeData.nodeId;
+            if (nodeId !== undefined) {
+                const element = document.querySelector(`[data-rrweb-id="${nodeId}"]`) as HTMLElement;
+                if (element) {
+                    return this.shouldRedactElement(element);
+                }
+            }
+            
+            return false;
+        } catch (e) {
+            console.warn('Error checking if DOM change should be redacted:', e);
+            return false;
+        }
+    }
+
+    /**
+     * Redact sensitive data in mouse/touch interaction events
+     */
+    private redactMouseEvent(mouseData: any): void {
+        // Mouse events typically don't contain text data, but check for any text properties
+        if (mouseData.text && typeof mouseData.text === 'string' && 
+            this.isFieldSelected(mouseData)) {
+            mouseData.text = this.redactedText;
+        }
+    }
+
+    /**
+     * Redact sensitive data in full snapshot events
+     */
+    private redactFullSnapshot(snapshotData: any): void {
+        if (snapshotData.node && snapshotData.node.type === 2) { // Element node
+            this.redactNode(snapshotData.node);
+        }
+    }
+
+    /**
+     * Recursively redact sensitive data in DOM nodes
+     */
+    private redactNode(node: any): void {
+        if (!node) return;
+
+        // Check if this node should be redacted
+        if (node.type === 2 && node.tagName && 
+            (node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea')) {
+            
+            // Check if this input/textarea should be redacted
+            if (this.shouldRedactNode(node)) {
+                // Redact value attribute
+                if (node.attributes && node.attributes.value) {
+                    node.attributes.value = this.redactedText;
+                }
+                // Redact text content
+                if (node.textContent) {
+                    node.textContent = this.redactedText;
+                }
+            }
+        }
+
+        // Recursively process child nodes
+        if (node.childNodes && Array.isArray(node.childNodes)) {
+            node.childNodes.forEach((childNode: any) => {
+                this.redactNode(childNode);
+            });
+        }
+    }
+
+    /**
+     * Check if a node should be redacted based on its attributes
+     */
+    private shouldRedactNode(node: any): boolean {
+        if (!node.attributes) return false;
+
+        // Check if any of our selectors would match this node
+        for (const selector of this.userSelectedFields) {
+            if (this.selectorMatchesNode(selector, node)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Check if a CSS selector would match a node based on its attributes
+     */
+    private selectorMatchesNode(selector: string, node: any): boolean {
+        if (!node.attributes) return false;
+
+        // Create a temporary element to test the selector
+        try {
+            const tempElement = document.createElement(node.tagName || 'div');
+            
+            // Copy attributes from the node to the temp element
+            if (node.attributes) {
+                Object.keys(node.attributes).forEach(key => {
+                    tempElement.setAttribute(key, node.attributes[key]);
+                });
+            }
+            
+            // Test if the selector matches this element
+            return tempElement.matches(selector);
+        } catch (e) {
+            // If matches() is not supported or fails, fall back to basic attribute checking
+            return this.basicSelectorMatch(selector, node);
+        }
+    }
+
+    /**
+     * Basic selector matching for environments where matches() is not available
+     */
+    private basicSelectorMatch(selector: string, node: any): boolean {
+        if (!node.attributes) return false;
+
+        // Handle simple selectors like 'input[type="password"]'
+        if (selector.includes('input[type=')) {
+            const typeMatch = selector.match(/input\[type="([^"]+)"\]/);
+            if (typeMatch && node.tagName === 'input' && node.attributes.type === typeMatch[1]) {
+                return true;
+            }
+        }
+
+        // Handle ID selectors like '#email'
+        if (selector.startsWith('#')) {
+            const id = selector.substring(1);
+            return node.attributes.id === id;
+        }
+
+        // Handle class selectors like '.sensitive-field'
+        if (selector.startsWith('.')) {
+            const className = selector.substring(1);
+            return node.attributes.class && node.attributes.class.includes(className);
+        }
+
+        // Handle tag selectors like 'input'
+        if (!selector.includes('[') && !selector.includes('.')) {
+            return node.tagName && node.tagName.toLowerCase() === selector.toLowerCase();
+        }
+
+        return false;
+    }
+
+    /**
+     * Check if an event is from a field that should be redacted
+     */
+    private isFieldSelected(eventData: any): boolean {
+        if (!isBrowser) return false;
+        
+        try {
+            // For input events (source 5), we need to determine if this is a sensitive field
+            if (eventData.source === 5) { // Input event
+                const elementId = eventData.id;
+                if (elementId !== undefined) {
+                    // Try to find the element by data-rrweb-id attribute
+                    let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
+                    
+                    if (element) {
+                        return this.shouldRedactElement(element);
+                    }
+                    
+                    // Fallback: Try to find by nodeId if available
+                    if (eventData.nodeId !== undefined) {
+                        element = document.querySelector(`[data-rrweb-id="${eventData.nodeId}"]`) as HTMLElement;
+                        if (element) {
+                            return this.shouldRedactElement(element);
+                        }
+                    }
+                    
+                    // More aggressive approach: Check all elements that match our selectors
+                    // and see if any of them are currently focused or have the same ID
+                    for (const selector of this.userSelectedFields) {
+                        const matchingElements = document.querySelectorAll(selector);
+                        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 we still can't find it, try a more direct approach
+                    // 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');
+                        return true;
+                    }
+                    
+                    return false;
+                }
+            }
+            
+            // For other event types, try to find the element
+            const elementId = eventData.id;
+            if (elementId !== undefined) {
+                // First try to find by data-rrweb-id attribute
+                let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
+                
+                if (element) {
+                    return this.shouldRedactElement(element);
+                }
+            }
+            
+            // Also check for nodeId which is another way rrweb identifies elements
+            const nodeId = eventData.nodeId;
+            if (nodeId !== undefined) {
+                const element = document.querySelector(`[data-rrweb-id="${nodeId}"]`) as HTMLElement;
+                if (element) {
+                    return this.shouldRedactElement(element);
+                }
+            }
+            
+            // For DOM mutations, check if the target element should be redacted
+            if (eventData.target && eventData.target.id) {
+                const element = document.querySelector(`[data-rrweb-id="${eventData.target.id}"]`) as HTMLElement;
+                if (element) {
+                    return this.shouldRedactElement(element);
+                }
+            }
+            
+            return false;
+        } catch (e) {
+            console.warn('Error checking if field should be redacted:', e);
+            return false;
+        }
+    }
+
+    /**
+     * Check if an element should be redacted based on user-selected fields
+     */
+    private shouldRedactElement(element: HTMLElement): boolean {
+        // Check if element is excluded from redaction
+        for (const excludeSelector of this.excludeSelectors) {
+            if (element.matches(excludeSelector) || element.closest(excludeSelector)) {
+                return false;
+            }
+        }
+
+        // Check if element matches any of the user-selected fields
+        for (const selector of this.userSelectedFields) {
+            if (element.matches(selector)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the original value of a redacted element (for debugging)
+     */
+    public getOriginalValue(element: HTMLElement): string | undefined {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+            return element.value;
+        }
+        return undefined;
+    }
+
+    /**
+     * Check if an element is currently being redacted
+     */
+    public isElementRedacted(element: HTMLElement): boolean {
+        return this.shouldRedactElement(element);
+    }
+}
+
+// Export a default instance
+export const redactionManager = new RedactionManager();
+
+// Export the class for custom instances
+export default RedactionManager;