humanbehavior-js 0.4.11 → 0.4.13

package/dist/types/angular/index.d.ts

@@ -36,6 +36,7 @@ declare class HumanBehaviorTracker {
     private sessionStartTime;
     private rrwebRecord;
     private fullSnapshotTimeout;
+    private recordCanvas;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -46,6 +47,7 @@ declare class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -220,6 +222,11 @@ declare class HumanBehaviorTracker {
 declare class HumanBehaviorModule {
     static forRoot(config: {
         apiKey: string;
+        ingestionUrl?: string;
+        logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+        redactFields?: string[];
+        suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
     }): {
         ngModule: typeof HumanBehaviorModule;
         providers: ({
@@ -237,12 +244,24 @@ declare class HumanBehaviorModule {
 }
 declare class HumanBehaviorService {
     private tracker;
-    constructor(apiKey: string);
+    constructor(apiKey: string, options?: {
+        ingestionUrl?: string;
+        logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+        redactFields?: string[];
+        suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
+    });
     identifyUser(userProperties: Record<string, any>): Promise<string>;
     getSessionId(): string;
     setRedactedFields(fields: string[]): void;
     getRedactedFields(): string[];
 }
-declare function initializeHumanBehavior(apiKey: string): HumanBehaviorTracker;
+declare function initializeHumanBehavior(apiKey: string, options?: {
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean;
+}): HumanBehaviorTracker;
 
 export { HumanBehaviorModule, HumanBehaviorService, initializeHumanBehavior };

package/dist/types/index.d.ts

@@ -126,6 +126,7 @@ declare class HumanBehaviorTracker {
     private sessionStartTime;
     private rrwebRecord;
     private fullSnapshotTimeout;
+    private recordCanvas;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -136,6 +137,7 @@ declare class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;

package/dist/types/react/index.d.ts

@@ -38,6 +38,7 @@ declare class HumanBehaviorTracker {
     private sessionStartTime;
     private rrwebRecord;
     private fullSnapshotTimeout;
+    private recordCanvas;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -48,6 +49,7 @@ declare class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -227,6 +229,8 @@ interface HumanBehaviorProviderProps {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
     };
 }
 declare const HumanBehaviorProvider: ({ apiKey, client, children, options }: HumanBehaviorProviderProps) => React.JSX.Element;

package/dist/types/remix/index.d.ts

@@ -39,6 +39,7 @@ declare class HumanBehaviorTracker {
     private sessionStartTime;
     private rrwebRecord;
     private fullSnapshotTimeout;
+    private recordCanvas;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -49,6 +50,7 @@ declare class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -228,6 +230,8 @@ interface HumanBehaviorProviderProps {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
     };
 }
 declare const HumanBehaviorProvider: ({ apiKey, client, children, options }: HumanBehaviorProviderProps) => React.JSX.Element;

package/dist/types/svelte/index.d.ts

@@ -36,6 +36,7 @@ declare class HumanBehaviorTracker {
     private sessionStartTime;
     private rrwebRecord;
     private fullSnapshotTimeout;
+    private recordCanvas;
     /**
      * Initialize the HumanBehavior tracker
      * This is the main entry point - call this once per page
@@ -46,6 +47,7 @@ declare class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -218,7 +220,13 @@ declare class HumanBehaviorTracker {
 }
 
 declare const humanBehaviorStore: {
-    init: (apiKey: string) => HumanBehaviorTracker;
+    init: (apiKey: string, options?: {
+        ingestionUrl?: string;
+        logLevel?: "none" | "error" | "warn" | "info" | "debug";
+        redactFields?: string[];
+        suppressConsoleErrors?: boolean;
+        recordCanvas?: boolean;
+    }) => HumanBehaviorTracker;
 };
 
 export { humanBehaviorStore };

package/dist/types/vue/index.d.ts

@@ -2,6 +2,11 @@ import { App } from 'vue';
 
 interface HumanBehaviorPluginOptions {
     apiKey: string;
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean;
 }
 declare const HumanBehaviorPlugin: {
     install: (app: App, options: HumanBehaviorPluginOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/readme.md

@@ -38,7 +38,8 @@ For the best session continuity experience, use the SPA approach:
         const tracker = HumanBehaviorTracker.init('your-api-key', {
             logLevel: 'warn', // Reduce console noise
             redactFields: ['password', 'credit_card'],
-            suppressConsoleErrors: true // Suppress common rrweb errors (default)
+            suppressConsoleErrors: true, // Suppress common rrweb errors (default)
+            recordCanvas: false // Enable canvas recording with protection (default: false)
         });
         
         // Your SPA navigation logic here
@@ -86,6 +87,7 @@ const tracker = HumanBehaviorTracker.init(apiKey, options);
 - `logLevel`: 'none' | 'error' | 'warn' | 'info' | 'debug'
 - `redactFields`: Array of CSS selectors to redact
 - `suppressConsoleErrors`: Boolean to suppress common rrweb errors (default: true)
+- `recordCanvas`: Boolean to enable canvas recording with PostHog-style protection (default: false)
 
 ### Session Management
 
@@ -155,6 +157,23 @@ const tracker = HumanBehaviorTracker.init('your-api-key', {
 - CORS policy violations
 - Ad blocker interference warnings
 
+### Canvas Recording
+
+The SDK supports canvas recording with PostHog-style protection against overwhelming events:
+
+```javascript
+// Enable canvas recording with protection
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    recordCanvas: true // Enables canvas recording with 4 FPS throttle and 40% quality
+});
+```
+
+**Protection Features:**
+- **4 FPS Throttling**: Prevents canvas overwhelm (vs 60 FPS default)
+- **40% Quality**: WebP format with compression
+- **Opt-in Only**: Disabled by default for safety
+- **Smart Sampling**: Only captures when canvas changes
+
 ## Session Continuity
 
 The SDK automatically handles session continuity:

package/src/angular/index.ts

@@ -2,7 +2,14 @@ import { HumanBehaviorTracker } from '../index.js';
 
 // Angular NgModule for legacy Angular applications
 export class HumanBehaviorModule {
-  static forRoot(config: { apiKey: string }) {
+  static forRoot(config: { 
+    apiKey: string;
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  }) {
     return {
       ngModule: HumanBehaviorModule,
       providers: [
@@ -13,7 +20,13 @@ export class HumanBehaviorModule {
         {
           provide: HumanBehaviorTracker,
           useFactory: (apiKey: string) => {
-            return HumanBehaviorTracker.init(apiKey);
+            return HumanBehaviorTracker.init(apiKey, {
+              ingestionUrl: config.ingestionUrl,
+              logLevel: config.logLevel,
+              redactFields: config.redactFields,
+              suppressConsoleErrors: config.suppressConsoleErrors,
+              recordCanvas: config.recordCanvas, // Pass canvas recording option
+            });
           },
           deps: ['HUMANBEHAVIOR_API_KEY']
         }
@@ -26,8 +39,14 @@ export class HumanBehaviorModule {
 export class HumanBehaviorService {
   private tracker: HumanBehaviorTracker;
 
-  constructor(apiKey: string) {
-    this.tracker = HumanBehaviorTracker.init(apiKey);
+  constructor(apiKey: string, options?: {
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  }) {
+    this.tracker = HumanBehaviorTracker.init(apiKey, options);
   }
 
   // Expose core tracker methods
@@ -49,6 +68,12 @@ export class HumanBehaviorService {
 }
 
 // Helper function for standalone Angular initialization
-export function initializeHumanBehavior(apiKey: string): HumanBehaviorTracker {
-  return HumanBehaviorTracker.init(apiKey);
+export function initializeHumanBehavior(apiKey: string, options?: {
+  ingestionUrl?: string;
+  logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+  redactFields?: string[];
+  suppressConsoleErrors?: boolean;
+  recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+}): HumanBehaviorTracker {
+  return HumanBehaviorTracker.init(apiKey, options);
 } 

package/src/react/index.tsx

@@ -28,6 +28,8 @@ interface HumanBehaviorProviderProps {
     ingestionUrl?: string;
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
   };
 }
 
@@ -105,21 +107,18 @@ export const HumanBehaviorProvider = ({ apiKey, client, children, options }: Hum
       return;
     }
 
-    // Create new tracker instance with the validated apiKey
-    const tracker = new HumanBehaviorTracker(
-      apiKeyRef.current.trim()
+    // 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
+      }
     );
     
-    // ✅ APPLY LOGGING CONFIGURATION FROM OPTIONS
-    if (options?.logLevel) {
-      HumanBehaviorTracker.configureLogging({ level: options.logLevel });
-    }
-    
-    // ✅ APPLY REDACTION FIELDS FROM OPTIONS
-    if (options?.redactFields && options.redactFields.length > 0) {
-      tracker.setRedactedFields(options.redactFields);
-    }
-    
     setHumanBehavior(tracker);
 
     // Wait for initialization to complete

package/src/svelte/index.ts

@@ -2,7 +2,13 @@ import { HumanBehaviorTracker } from '../index.js';
 
 // Create a Svelte store-like interface for HumanBehavior
 export const humanBehaviorStore = {
-  init: (apiKey: string) => {
-    return HumanBehaviorTracker.init(apiKey);
+  init: (apiKey: string, options?: {
+    ingestionUrl?: string;
+    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+    redactFields?: string[];
+    suppressConsoleErrors?: boolean;
+    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  }) => {
+    return HumanBehaviorTracker.init(apiKey, options);
   }
 }; 

package/src/tracker.ts

@@ -50,6 +50,7 @@ export class HumanBehaviorTracker {
     private sessionStartTime: number = Date.now();
     private rrwebRecord: any = null;
     private fullSnapshotTimeout: number | null = null;
+    private recordCanvas: boolean = false; // Store canvas recording preference
 
     /**
      * Initialize the HumanBehavior tracker
@@ -61,6 +62,7 @@ export class HumanBehaviorTracker {
         redactFields?: string[];
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean; // New option to control error suppression
+        recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -138,6 +140,9 @@ export class HumanBehaviorTracker {
         // Create new tracker instance
         const tracker = new HumanBehaviorTracker(apiKey, options?.ingestionUrl);
         
+        // Store canvas recording preference
+        tracker.recordCanvas = options?.recordCanvas ?? false;
+        
         // Set redacted fields if specified
         if (options?.redactFields) {
             tracker.setRedactedFields(options.redactFields);
@@ -839,9 +844,16 @@ export class HumanBehaviorTracker {
             slimDOMOptions: {},
             // ✅ ERROR SUPPRESSION SETTINGS - Disabled to prevent console noise
             collectFonts: false, // Disable font collection to reduce errors
-            inlineStylesheet: false, // Disable inline stylesheet to reduce errors
+            inlineStylesheet: true, // Keep styles for proper session replay
             recordCrossOriginIframes: false, // Prevent cross-origin iframe errors
-            recordCanvas: false, // Disabled to prevent large data URIs and canvas errors
+            
+            // ✅ CANVAS RECORDING - PostHog-style protection against overwhelm
+            recordCanvas: this.recordCanvas, // Opt-in only
+            sampling: this.recordCanvas ? { canvas: 4 } : undefined, // 4 FPS throttle
+            dataURLOptions: this.recordCanvas ? { 
+                type: 'image/webp', 
+                quality: 0.4 
+            } : undefined, // WebP with 40% quality
             
             // ✅ FULLSNAPSHOT GENERATION - No periodic snapshots to avoid animation issues
             // Rely on initial FullSnapshot + navigation-triggered ones only

package/src/vue/index.ts

@@ -3,11 +3,22 @@ import type { App } from 'vue';
 
 interface HumanBehaviorPluginOptions {
   apiKey: string;
+  ingestionUrl?: string;
+  logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
+  redactFields?: string[];
+  suppressConsoleErrors?: boolean;
+  recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
 }
 
 export const HumanBehaviorPlugin = {
   install: (app: App, options: HumanBehaviorPluginOptions) => {
-    const tracker = HumanBehaviorTracker.init(options.apiKey);
+    const tracker = HumanBehaviorTracker.init(options.apiKey, {
+      ingestionUrl: options.ingestionUrl,
+      logLevel: options.logLevel,
+      redactFields: options.redactFields,
+      suppressConsoleErrors: options.suppressConsoleErrors,
+      recordCanvas: options.recordCanvas, // Pass canvas recording option
+    });
     
     // Make tracker available globally
     app.config.globalProperties.$humanBehavior = tracker;