humanbehavior-js 0.1.8 → 0.1.9

package/dist/types/index.d.ts

@@ -89,8 +89,6 @@ declare global {
 declare class HumanBehaviorTracker {
     private eventIngestionQueue;
     private queueSizeBytes;
-    private rejectedEvents;
-    private isProcessingRejectedEvents;
     private sessionId;
     private userProperties;
     private isProcessing;
@@ -197,7 +195,6 @@ declare class HumanBehaviorTracker {
     start(): Promise<void>;
     stop(): Promise<void>;
     addEvent(event: any): Promise<void>;
-    private processRejectedEvents;
     private flush;
     private setCookie;
     getCookie(name: string): string | null;
@@ -260,6 +257,7 @@ declare class HumanBehaviorTracker {
 declare const MAX_CHUNK_SIZE_BYTES: number;
 declare function isChunkSizeExceeded(currentChunk: any[], newEvent: any, sessionId: string): boolean;
 declare function validateSingleEventSize(event: any, sessionId: string): void;
+declare function splitLargeEvent(event: any, sessionId: string): any[];
 declare class HumanBehaviorAPI {
     private apiKey;
     private baseUrl;
@@ -272,7 +270,7 @@ declare class HumanBehaviorAPI {
         endUserId: any;
     }>;
     sendEvents(events: any[], sessionId: string, userId: string): Promise<void>;
-    sendEventsChunked(events: any[], sessionId: string): Promise<any[]>;
+    sendEventsChunked(events: any[], sessionId: string, userId?: string): Promise<any[]>;
     sendUserData(userId: string, userData: Record<string, any>, sessionId: string): Promise<any>;
     sendUserAuth(userId: string, userData: Record<string, any>, sessionId: string, authFields: string[]): Promise<any>;
     sendBeaconEvents(events: any[], sessionId: string): boolean;
@@ -316,5 +314,5 @@ 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 { HumanBehaviorAPI, HumanBehaviorTracker, LogLevel, MAX_CHUNK_SIZE_BYTES, RedactionManager, HumanBehaviorTracker as default, isChunkSizeExceeded, logDebug, logError, logInfo, logWarn, logger, redactionManager, splitLargeEvent, validateSingleEventSize };
 export type { LoggerConfig, RedactionOptions };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "unpkg": "dist/index.min.js",
+  "homepage": "https://documentation.humanbehavior.co",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",

package/readme.md

@@ -2,6 +2,8 @@
 
 A simplified session recording and analytics SDK that maintains session continuity across page navigations.
 
+📖 **[Full Documentation](https://documentation.humanbehavior.co)** - Complete API reference, examples, and integration guides
+
 ## Quick Start
 
 ### Single Page Application (Recommended)

package/simple-spa.html

@@ -280,10 +280,21 @@
                 
                 console.log('Tracker created, waiting for initialization...');
                 
-                // Wait for tracker to initialize
+                // Wait for tracker to initialize with timeout
                 if (tracker.initializationPromise) {
-                    await tracker.initializationPromise;
-                    console.log('Tracker initialized successfully');
+                    try {
+                        await Promise.race([
+                            tracker.initializationPromise,
+                            new Promise((_, reject) => 
+                                setTimeout(() => reject(new Error('Initialization timeout')), 10000)
+                            )
+                        ]);
+                        console.log('Tracker initialized successfully');
+                    } catch (initError) {
+                        console.warn('Tracker initialization failed or timed out:', initError);
+                        addLog('Tracker initialization warning: ' + initError.message);
+                        // Continue anyway - tracker might still work
+                    }
                 } else {
                     console.log('No initialization promise, continuing...');
                 }
@@ -415,30 +426,35 @@
                 const sessionIdElements = document.querySelectorAll('#sessionId, #sessionId-about, #sessionId-status');
                 const sessionId = tracker.getSessionId ? tracker.getSessionId() : 'Not available';
                 sessionIdElements.forEach(el => {
-                    el.textContent = sessionId;
+                    if (el) el.textContent = sessionId;
                 });
                 
                 const endUserIdElements = document.querySelectorAll('#endUserId, #endUserId-status');
                 const endUserId = tracker.endUserId || 'Not set';
                 endUserIdElements.forEach(el => {
-                    el.textContent = endUserId;
+                    if (el) el.textContent = endUserId;
                 });
                 
                 // Update user type (preexisting vs new)
                 const userTypeElements = document.querySelectorAll('#userType, #userType-about, #userType-status');
                 let userType = 'Unknown';
                 if (tracker.isPreexistingUser) {
-                    const isPreexisting = tracker.isPreexistingUser();
-                    userType = isPreexisting ? '🔄 Preexisting User' : '🆕 New User';
+                    try {
+                        const isPreexisting = tracker.isPreexistingUser();
+                        userType = isPreexisting ? '🔄 Preexisting User' : '🆕 New User';
+                    } catch (error) {
+                        console.warn('Error checking preexisting user:', error);
+                        userType = 'Error';
+                    }
                 }
                 userTypeElements.forEach(el => {
-                    el.textContent = userType;
+                    if (el) el.textContent = userType;
                 });
                 
                 const currentUrlElements = document.querySelectorAll('#currentUrl, #currentUrl-status');
                 const currentUrl = window.location.href;
                 currentUrlElements.forEach(el => {
-                    el.textContent = currentUrl;
+                    if (el) el.textContent = currentUrl;
                 });
                 
                 const trackerInitialized = document.getElementById('trackerInitialized');
@@ -448,8 +464,13 @@
                 
                 const connectionStatus = document.getElementById('connectionStatus');
                 if (connectionStatus && tracker.getConnectionStatus) {
-                    const status = tracker.getConnectionStatus();
-                    connectionStatus.textContent = status.blocked ? 'Blocked' : 'Connected';
+                    try {
+                        const status = tracker.getConnectionStatus();
+                        connectionStatus.textContent = status.blocked ? 'Blocked' : 'Connected';
+                    } catch (error) {
+                        console.warn('Error getting connection status:', error);
+                        connectionStatus.textContent = 'Error';
+                    }
                 }
                 
                 const pageLoadTime = document.getElementById('pageLoadTime');
@@ -458,6 +479,7 @@
                 }
             } catch (error) {
                 console.error('Error updating status:', error);
+                // Don't let status update errors crash the app
             }
         }
         
@@ -589,6 +611,48 @@
         
         // Initialize the app when the page loads
         document.addEventListener('DOMContentLoaded', initApp);
+        
+        // Add global error handler to prevent page from going blank
+        window.addEventListener('error', function(event) {
+            console.error('Global error caught:', event.error);
+            addLog('Global error: ' + event.error.message);
+            
+            // Prevent the page from going blank by showing error content
+            const contentDiv = document.getElementById('content');
+            if (contentDiv && contentDiv.innerHTML.trim() === '') {
+                contentDiv.innerHTML = `
+                    <h2>Application Error</h2>
+                    <p>An error occurred but the application is still running:</p>
+                    <div class="status">
+                        <strong>Error:</strong> ${event.error.message}<br>
+                        <strong>File:</strong> ${event.filename}<br>
+                        <strong>Line:</strong> ${event.lineno}
+                    </div>
+                    <button class="button" onclick="loadPage('home')">Go to Home</button>
+                    <button class="button secondary" onclick="location.reload()">Reload Page</button>
+                `;
+            }
+        });
+        
+        // Add unhandled promise rejection handler
+        window.addEventListener('unhandledrejection', function(event) {
+            console.error('Unhandled promise rejection:', event.reason);
+            addLog('Unhandled promise rejection: ' + event.reason);
+            event.preventDefault(); // Prevent the default browser behavior
+        });
+        
+        // Add periodic health check
+        setInterval(() => {
+            try {
+                const contentDiv = document.getElementById('content');
+                if (contentDiv && contentDiv.innerHTML.trim() === '') {
+                    console.warn('Content div is empty, attempting to restore...');
+                    loadPage('home');
+                }
+            } catch (error) {
+                console.error('Health check error:', error);
+            }
+        }, 5000); // Check every 5 seconds
     </script>
 </body>
 </html> 

package/src/api.ts

@@ -1,6 +1,6 @@
 import { logError, logInfo } from './utils/logger';
 
-export const MAX_CHUNK_SIZE_BYTES = 1024 * 1024 * 10; // 10MB chunk size
+export const MAX_CHUNK_SIZE_BYTES = 1024 * 1024; // 1MB chunk size - more conservative
 
 export function isChunkSizeExceeded(currentChunk: any[], newEvent: any, sessionId: string): boolean {
     const nextChunkSize = new TextEncoder().encode(JSON.stringify({
@@ -18,10 +18,62 @@ export function validateSingleEventSize(event: any, sessionId: string): void {
     })).length;
 
     if (singleEventSize > MAX_CHUNK_SIZE_BYTES) {
-        throw new Error(`Single event size (${singleEventSize} bytes) exceeds maximum chunk size (${MAX_CHUNK_SIZE_BYTES} bytes)`);
+        // Instead of throwing, log a warning and suggest reducing event size
+        console.warn(`Single event size (${singleEventSize} bytes) exceeds maximum chunk size (${MAX_CHUNK_SIZE_BYTES} bytes). Consider reducing event data size.`);
     }
 }
 
+export function splitLargeEvent(event: any, sessionId: string): any[] {
+    const eventSize = new TextEncoder().encode(JSON.stringify({
+        sessionId,
+        events: [event]
+    })).length;
+
+    if (eventSize <= MAX_CHUNK_SIZE_BYTES) {
+        return [event];
+    }
+
+    // If event is too large, try to split it by removing large properties
+    const simplifiedEvent = { ...event };
+    
+    // Remove potentially large properties
+    const largeProperties = ['screenshot', 'html', 'dom', 'fullText', 'innerHTML', 'outerHTML'];
+    largeProperties.forEach(prop => {
+        if (simplifiedEvent[prop]) {
+            delete simplifiedEvent[prop];
+        }
+    });
+
+    // Check if simplified event is now small enough
+    const simplifiedSize = new TextEncoder().encode(JSON.stringify({
+        sessionId,
+        events: [simplifiedEvent]
+    })).length;
+
+    if (simplifiedSize <= MAX_CHUNK_SIZE_BYTES) {
+        return [simplifiedEvent];
+    }
+
+    // If still too large, create a minimal event
+    const minimalEvent = {
+        type: event.type,
+        timestamp: event.timestamp,
+        url: event.url,
+        pathname: event.pathname,
+        // Keep only essential properties
+        ...Object.fromEntries(
+            Object.entries(event).filter(([key, value]) => 
+                !largeProperties.includes(key) && 
+                typeof value !== 'object' && 
+                typeof value !== 'string' || 
+                (typeof value === 'string' && value.length < 1000)
+            )
+        )
+    };
+
+    return [minimalEvent];
+}
+
 export class HumanBehaviorAPI {
     private apiKey: string;
     private baseUrl: string;
@@ -98,7 +150,7 @@ export class HumanBehaviorAPI {
         }
     }
     
-    async sendEventsChunked(events: any[], sessionId: string) {
+    async sendEventsChunked(events: any[], sessionId: string, userId?: string) {
         try {
             const results = [];
             let currentChunk: any[] = [];
@@ -115,7 +167,8 @@ export class HumanBehaviorAPI {
                             },
                             body: JSON.stringify({
                                 sessionId,
-                                events: currentChunk
+                                events: currentChunk,
+                                endUserId: userId
                             })
                         });
                         
@@ -127,11 +180,11 @@ export class HumanBehaviorAPI {
                         currentChunk = [];
                     }
 
-                    // Validate single event size
-                    validateSingleEventSize(event, sessionId);
+                    // Handle large events by splitting them
+                    const splitEvents = splitLargeEvent(event, sessionId);
                     
-                    // Start new chunk with this event
-                    currentChunk = [event];
+                    // Start new chunk with the split events
+                    currentChunk = splitEvents;
                 } else {
                     // Add event to current chunk
                     currentChunk.push(event);
@@ -148,7 +201,8 @@ export class HumanBehaviorAPI {
                     },
                     body: JSON.stringify({
                         sessionId,
-                        events: currentChunk
+                        events: currentChunk,
+                        endUserId: userId
                     })
                 });
                 
@@ -256,7 +310,7 @@ export class HumanBehaviorAPI {
             });
             
             if (!response.ok) {
-                throw new Error(`Failed to send custom event: ${response.statusText}`);
+                throw new Error(`Failed to send custom event: ${response.status} ${response.statusText}`);
             }
             
             return await response.json();

package/src/react/index.tsx

@@ -114,7 +114,6 @@ export const HumanBehaviorProvider = ({ apiKey, client, children, options }: Hum
 
     // Wait for initialization to complete
     tracker.initializationPromise?.then(async () => {
-        // Start the tracker to enable event flushing and recording
         await tracker.start();
         setIsInitialized(true);
         

package/src/tracker.ts

@@ -18,8 +18,6 @@ declare global {
 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> = {};
@@ -183,7 +181,6 @@ export class HumanBehaviorTracker {
             if (isBrowser) {
                 this.setupPageUnloadHandler();
                 this.setupNavigationTracking();
-                this.processRejectedEvents();
             } else {
                 logWarn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
             }
@@ -349,10 +346,21 @@ export class HumanBehaviorTracker {
             await this.api.sendCustomEvent(this.sessionId, eventName, properties);
             
             logDebug(`Custom event tracked: ${eventName}`, properties);
-        } catch (error) {
+        } catch (error: any) {
             logError('Failed to track custom event:', error);
             
-            // Fallback: add to event stream if direct API call fails
+            // Handle specific error types - check for any custom event failure
+            if (error.message?.includes('500') || 
+                error.message?.includes('Internal Server Error') ||
+                error.message?.includes('Failed to send custom event')) {
+                logWarn('Custom event endpoint failed, using fallback');
+            } else if (error.message?.includes('ERR_BLOCKED_BY_CLIENT')) {
+                logWarn('Custom event request blocked by ad blocker, using fallback');
+            } else if (error.message?.includes('Failed to fetch')) {
+                logWarn('Custom event network error, using fallback');
+            }
+            
+            // Always try fallback for any custom event error
             try {
                 const customEventData = {
                     eventName: eventName,
@@ -792,33 +800,6 @@ export class HumanBehaviorTracker {
         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) {
-            logError('Failed to process rejected events:', error);
-        } finally {
-            this.isProcessingRejectedEvents = false;
-        }
-    }
-
     private async flush() {
         // Prevent concurrent flushes
         if (this.isProcessing || !this.initialized) {
@@ -835,20 +816,18 @@ export class HumanBehaviorTracker {
             if (eventsToProcess.length > 0) {
                 logDebug('Flushing events:', eventsToProcess);
                 try {
-                    await this.api.sendEvents(eventsToProcess, this.sessionId, this.endUserId!);
+                    // Use chunked sending to handle large payloads
+                    await this.api.sendEventsChunked(eventsToProcess, this.sessionId, this.endUserId!);
                 } catch (error: any) {
-                    // If we get a 400 error, store events for retry
+                    // Handle specific error types with graceful degradation
                     if (error.message?.includes('ERROR: Session already completed')) {
-                        logInfo('Session expired, storing events for retry');
-                        this.rejectedEvents.push(...eventsToProcess);
-                        this.processRejectedEvents();
+                        logWarn('Session expired, events will be lost');
+                    } else if (error.message?.includes('413') || error.message?.includes('Content Too Large')) {
+                        logWarn('Payload too large, events will be lost');
                     } else if (error.message?.includes('ERR_BLOCKED_BY_CLIENT') || 
                                error.message?.includes('Failed to fetch') ||
                                error.message?.includes('NetworkError')) {
-                        // Handle ad blocker or network issues gracefully
-                        logWarn('Request blocked by ad blocker or network issue, storing events for retry');
-                        this.rejectedEvents.push(...eventsToProcess);
-                        // Don't process rejected events immediately to avoid spam
+                        logWarn('Request blocked by ad blocker or network issue, events will be lost');
                     } else {
                         throw error;
                     }
@@ -1005,8 +984,8 @@ export class HumanBehaviorTracker {
         const recommendations: string[] = [];
         let blocked = false;
 
-        // Check if we have rejected events (might indicate blocking)
-        if (this.rejectedEvents.length > 0) {
+        // Check if we have queued events (might indicate blocking)
+        if (this.eventIngestionQueue.length > 0) {
             blocked = true;
             recommendations.push('Some requests may be blocked by ad blockers');
         }