humanbehavior-js 0.0.4 → 0.0.7

package/src/tracker.ts

@@ -0,0 +1,349 @@
+import * as rrweb from 'rrweb';
+import { v1 as uuidv1 } from 'uuid';
+import { HumanBehaviorAPI } from './api';
+import { RedactionManager, RedactionOptions } from './redact';
+
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined';
+
+// Add type declaration at the top level
+declare global {
+    interface Window {
+        HumanBehaviorTracker: typeof HumanBehaviorTracker;
+    }
+}
+
+export class HumanBehaviorTracker {
+    private eventIngestionQueue: any[] = [];
+    private queueSizeBytes: number = 0;
+    private rejectedEvents: any[] = [];
+    private isProcessingRejectedEvents: boolean = false;
+
+    private sessionId: string;
+    private userProperties: Record<string, any> = {};
+    private isProcessing: boolean = false;
+    private flushInterval: number | null = null;
+    private readonly FLUSH_INTERVAL_MS = 5000; // Flush every 5 seconds
+    private api: HumanBehaviorAPI;
+    private endUserId: string | null = null;
+    private apiKey: string;
+    private initialized: boolean = false;
+    public initializationPromise: Promise<void> | null = null;
+    private redactionManager: RedactionManager;
+
+    constructor(apiKey: string | undefined, ingestionUrl: string | undefined) {
+        if (!apiKey) {
+            throw new Error('Human Behavior API Key is required');
+        }
+        if (!ingestionUrl) {
+            throw new Error('Human Behavior Ingestion URL is required');
+        }
+        this.api = new HumanBehaviorAPI({ 
+            apiKey: apiKey,
+            ingestionUrl: ingestionUrl
+        });
+        this.apiKey = apiKey;
+        this.redactionManager = new RedactionManager();
+
+        // Check for existing session ID and last activity time in localStorage
+        const existingSessionId = isBrowser ? localStorage.getItem('human_behavior_session_id') : null;
+        const lastActivity = isBrowser ? localStorage.getItem('human_behavior_last_activity') : null;
+
+        // If we have a last activity time, check if it's within 30 minutes
+        const thirtyMinutesAgo = Date.now() - (30 * 60 * 1000);
+        const shouldUseExistingSession = lastActivity && parseInt(lastActivity) > thirtyMinutesAgo;
+        this.sessionId = (existingSessionId && shouldUseExistingSession) ? existingSessionId : uuidv1();
+
+        // Store the session ID if it's new
+        if ((!existingSessionId || !shouldUseExistingSession) && isBrowser) {
+            localStorage.setItem('human_behavior_session_id', this.sessionId);
+        }
+
+        // Start initialization immediately
+        this.initializationPromise = this.init();
+    }
+
+    private async init(): Promise<void> {
+        try {
+            const userId = this.getCookie(`human_behavior_end_user_id_${this.apiKey}`);
+            const { sessionId, endUserId } = await this.api.init(this.sessionId, userId);
+            this.sessionId = sessionId;
+            this.endUserId = endUserId;
+            this.setCookie(`human_behavior_end_user_id_${this.apiKey}`, endUserId, 365);
+
+            // Only setup browser-specific handlers when in browser environment
+            if (isBrowser) {
+                this.setupPageUnloadHandler();
+                this.start();
+                this.processRejectedEvents();
+            } else {
+                console.warn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
+            }
+
+            this.initialized = true;
+            console.log('HumanBehaviorTracker initialized');
+        } catch (error) {
+            console.error('Failed to initialize HumanBehaviorTracker:', error);
+            throw error;
+        }
+    }
+
+    private async ensureInitialized(): Promise<void> {
+        if (!this.initializationPromise) {
+            throw new Error('HumanBehaviorTracker initialization failed');
+        }
+        await this.initializationPromise;
+    }
+
+    public static logToStorage(message: string) {
+        try {
+            const logs = JSON.parse(localStorage.getItem('human_behavior_logs') || '[]');
+            logs.push(`${new Date().toISOString()}: ${message}`);
+            localStorage.setItem('human_behavior_logs', JSON.stringify(logs));
+        } catch (e) {
+            console.error('Failed to log to storage:', e);
+        }
+    }
+
+    private setupPageUnloadHandler() {
+        if (!isBrowser) return;
+        
+        console.log('Setting up page unload handler');
+        
+        // Handle visibility changes for sending events
+        window.addEventListener('visibilitychange', () => {
+            // Only send events when page becomes hidden
+            if (document.visibilityState === 'hidden') {
+                console.log('Page hidden - sending pending events');
+                this.api.sendBeaconEvents(this.eventIngestionQueue, this.sessionId);
+            }
+        });
+
+        // Handle actual page unload/close
+        window.addEventListener('beforeunload', () => {
+            // Update last activity time
+            localStorage.setItem('human_behavior_last_activity', Date.now().toString());
+            
+            // Send final events
+            this.api.sendBeaconEvents(this.eventIngestionQueue, this.sessionId);
+        });
+
+        // Update activity timestamp periodically
+        setInterval(() => {
+            localStorage.setItem('human_behavior_last_activity', Date.now().toString());
+        }, 60000); // Update every minute
+    }
+
+    public viewLogs() {
+        try {
+            const logs = JSON.parse(localStorage.getItem('human_behavior_logs') || '[]');
+            console.log('HumanBehavior Logs:', logs);
+            localStorage.removeItem('human_behavior_logs'); // Clear logs after viewing
+        } catch (e) {
+            console.error('Failed to read logs:', e);
+        }
+    }
+
+    public async addUserInfo(userProperties: Record<string, any>) {
+        await this.ensureInitialized();
+        if (!this.endUserId) {
+            throw new Error('Cannot add user info before tracker initialization');
+        }
+        this.userProperties = userProperties;
+        await this.api.sendUserData(this.endUserId, userProperties, this.sessionId);
+    }
+
+    /**
+     * Authenticate user using existing userInfo data
+     * @param authFields Array of field names to check for existing users (e.g., ['email', 'phoneNumber'])
+     */
+    public async auth(authFields: string[]) {
+        await this.ensureInitialized();
+        if (!this.endUserId) {
+            throw new Error('Cannot authenticate before tracker initialization');
+        }
+        if (!this.userProperties || Object.keys(this.userProperties).length === 0) {
+            throw new Error('No user info available. Call addUserInfo() first.');
+        }
+        await this.api.sendUserAuth(this.endUserId, this.userProperties, this.sessionId, authFields);
+    }
+
+    public async customEvent(eventName: string, eventProperties: Record<string, any> = {}) {
+        await this.ensureInitialized();
+        this.api.sendBeaconCustomEvent(eventName, eventProperties, this.sessionId);
+    }
+
+    public async start() {
+        await this.ensureInitialized();
+        if (!isBrowser) return;
+        
+        // Start periodic flushing
+        this.flushInterval = window.setInterval(() => {
+            this.flush();
+        }, this.FLUSH_INTERVAL_MS);
+
+        // Start recording with redaction enabled
+        rrweb.record({
+            emit: (event) => {
+                this.addEvent(event);
+            },
+            inlineStylesheet: true,
+            recordCanvas: true,
+            collectFonts: true,
+            blockClass: 'rr-block',
+            ignoreClass: 'rr-ignore',
+            maskTextClass: 'rr-ignore'
+        });
+    }
+
+    public async stop() {
+        await this.ensureInitialized();
+        if (!isBrowser) return;
+        
+        if (this.flushInterval) {
+            clearInterval(this.flushInterval);
+            this.flushInterval = null;
+        }
+    }
+
+    public async addEvent(event: any) {
+        await this.ensureInitialized();
+        
+        // Process event through redaction manager if active
+        const processedEvent = this.redactionManager.processEvent(event);
+        
+        const eventSize = new TextEncoder().encode(JSON.stringify(processedEvent)).length;
+        this.eventIngestionQueue.push(processedEvent);
+        this.queueSizeBytes += eventSize;
+    }
+
+    private async processRejectedEvents() {
+        if (this.isProcessingRejectedEvents || this.rejectedEvents.length === 0) return;
+        
+        this.isProcessingRejectedEvents = true;
+        try {
+            // Create a new session ID for rejected events
+            const newSessionId = uuidv1();
+            if (isBrowser) {
+                localStorage.setItem('human_behavior_session_id', newSessionId);
+            }
+            
+            // Try to send rejected events with new session ID using beacon
+            // sendBeacon returns true if the request was queued successfully
+            this.api.sendBeaconEvents(this.rejectedEvents, newSessionId);
+            
+            // Clear rejected events and update session ID
+            // Note: We can't verify if the beacon data was actually sent,
+            // but we clear the events to prevent duplicate sending attempts
+            this.rejectedEvents = [];
+            this.sessionId = newSessionId;
+        } catch (error) {
+            console.error('Failed to process rejected events:', error);
+        } finally {
+            this.isProcessingRejectedEvents = false;
+        }
+    }
+
+    private async flush() {
+        // Prevent concurrent flushes
+        if (this.isProcessing || !this.initialized) {
+            return;
+        }
+
+        this.isProcessing = true;
+        try {
+            // Swap the current queue with an empty one atomically
+            const eventsToProcess = this.eventIngestionQueue;
+            this.eventIngestionQueue = [];
+            this.queueSizeBytes = 0;
+
+            if (eventsToProcess.length > 0) {
+                console.log('Flushing events:', eventsToProcess);
+                try {
+                    await this.api.sendEvents(eventsToProcess, this.sessionId, this.endUserId!);
+                } catch (error: any) {
+                    // If we get a 400 error, store events for retry
+                    if (error.message?.includes('ERROR: Session already completed')) {
+                        console.log('Session expired, storing events for retry');
+                        this.rejectedEvents.push(...eventsToProcess);
+                        this.processRejectedEvents();
+                    } else {
+                        throw error;
+                    }
+                }
+            }
+        } finally {
+            this.isProcessing = false;
+        }
+    }
+
+    // Add helper methods for cookie management
+    private setCookie(name: string, value: string, daysToExpire: number) {
+        if (!isBrowser) return;
+        const date = new Date();
+        date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
+        const expires = `expires=${date.toUTCString()}`;
+        document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
+    }
+
+    private getCookie(name: string): string | null {
+        if (!isBrowser) return null;
+        const nameEQ = name + "=";
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+
+    /**
+     * Start redaction functionality for sensitive input fields
+     * @param options Optional configuration for redaction behavior
+     */
+    public async redact(options?: RedactionOptions): Promise<void> {
+        await this.ensureInitialized();
+        if (!isBrowser) {
+            console.warn('Redaction is only available in browser environments');
+            return;
+        }
+        
+        // Create a new redaction manager with the provided options
+        this.redactionManager = new RedactionManager(options);
+    }
+
+    /**
+     * Set specific fields to be redacted during session recording
+     * @param fields Array of CSS selectors for fields to redact (e.g., ['input[type="password"]', '#email-field'])
+     */
+    public setRedactedFields(fields: string[]): void {
+        if (!isBrowser) {
+            console.warn('Redaction is only available in browser environments');
+            return;
+        }
+        
+        this.redactionManager.setFieldsToRedact(fields);
+    }
+
+    /**
+     * Check if redaction is currently active
+     */
+    public isRedactionActive(): boolean {
+        return this.redactionManager.isActive();
+    }
+
+    /**
+     * Get the currently selected fields for redaction
+     */
+    public getRedactedFields(): string[] {
+        return this.redactionManager.getSelectedFields();
+    }
+}
+
+// Only expose to window object in browser environments
+if (isBrowser) {
+    window.HumanBehaviorTracker = HumanBehaviorTracker;
+}
+
+export default HumanBehaviorTracker;

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "ESNext",
+        "target": "es2015",
+        "downlevelIteration": true,
+        "jsx": "react",
+        "allowJs": true,
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "lib": ["dom", "dom.iterable", "esnext"]
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+     
+    "exclude": ["node_modules", "dist", "test-website"]
+}

package/index.d.ts

@@ -1,2 +0,0 @@
-// This file is auto-generated. Do not edit directly.
-export * from "./dist/types/index";

package/index.js

@@ -1,3 +0,0 @@
-// This file is auto-generated. Do not edit directly.
-export * from './dist/esm/index.js';
-export { default } from './dist/esm/index.js'; 

package/react.d.ts

@@ -1,2 +0,0 @@
-// This file is auto-generated. Do not edit directly.
-export * from "./dist/types/react/index";

package/react.js

@@ -1,2 +0,0 @@
-// This file is auto-generated. Do not edit directly.
-export * from './dist/esm/react/index.js';