humanbehavior-js 0.4.20 → 0.4.21

package/package/src/react/index.tsx

@@ -29,7 +29,7 @@ interface HumanBehaviorProviderProps {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   };
 }
 
@@ -262,7 +262,7 @@ export const useUserTracking = () => {
   };
 };
 
-// Automatic page tracking component (similar to PostHog's PostHogPageView)
+// Automatic page tracking component
 function HumanBehaviorPageView() {
   const tracker = useContext(HumanBehaviorContext);
 

package/package/src/svelte/index.ts

@@ -7,7 +7,7 @@ export const humanBehaviorStore = {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   }) => {
     return HumanBehaviorTracker.init(apiKey, options);
   }

package/package/src/tracker.ts

@@ -62,7 +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
+        recordCanvas?: boolean; // Enable canvas recording with protection
         automaticTrackingOptions?: {
             trackButtons?: boolean;
             trackLinks?: boolean;
@@ -847,7 +847,7 @@ export class HumanBehaviorTracker {
             inlineStylesheet: true, // Keep styles for proper session replay
             recordCrossOriginIframes: false, // Prevent cross-origin iframe errors
             
-            // ✅ CANVAS RECORDING - PostHog-style protection against overwhelm
+            // ✅ CANVAS RECORDING - protection against overwhelm
             recordCanvas: this.recordCanvas, // Opt-in only
             sampling: this.recordCanvas ? { canvas: 4 } : undefined, // 4 FPS throttle
             dataURLOptions: this.recordCanvas ? { 

package/package/src/vue/index.ts

@@ -7,7 +7,7 @@ interface HumanBehaviorPluginOptions {
   logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
   redactFields?: string[];
   suppressConsoleErrors?: boolean;
-  recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  recordCanvas?: boolean; // Enable canvas recording with protection
 }
 
 export const HumanBehaviorPlugin = {

package/package.json

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

package/simple-spa.html

@@ -326,7 +326,8 @@
                 console.log('Initializing tracker...');
                 tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
                     logLevel: 'debug',
-                    redactFields: ['password', 'credit_card']
+                    redactFields: ['password', 'credit_card'],
+                    enableAutomaticProperties: true
                 });
                 
                 console.log('Tracker created, waiting for initialization...');
@@ -359,6 +360,12 @@
                 // Update status periodically
                 setInterval(updateStatus, 2000);
                 
+                // Display automatic properties
+                displayAutomaticProperties();
+                
+                // Display IP information
+                displayIPInfo();
+                
                 console.log('SPA App initialized successfully');
                 addLog('SPA App initialized successfully');
                 
@@ -581,7 +588,7 @@
                 addLog(`endUserId changed: ${originalEndUserId !== newEndUserId ? 'YES (BAD)' : 'NO (GOOD)'}`);
                 addLog(`User authenticated: ${userId}`);
                 
-                // The endUserId should stay the same, but posthogName will be updated with email
+                // The endUserId should stay the same, but user name will be updated
                 addLog('✅ endUserId maintained for session continuity');
                 addLog('✅ posthogName will be updated with email for UI display');
                 
@@ -774,6 +781,161 @@
             }
         }
         
+        // Display automatic properties
+        function displayAutomaticProperties() {
+            if (!tracker) {
+                addLog('Tracker not available for automatic properties');
+                return;
+            }
+            
+            try {
+                const allProperties = tracker.getAllProperties();
+                
+                // Create a properties display section
+                const propertiesSection = document.createElement('div');
+                propertiesSection.className = 'demo-section';
+                propertiesSection.style.cssText = `
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 15px;
+                    padding: 30px;
+                    margin: 20px 0;
+                    backdrop-filter: blur(5px);
+                `;
+                
+                propertiesSection.innerHTML = `
+                    <h2>🔍 Automatic Properties</h2>
+                    <p>These properties are automatically captured by the HumanBehavior SDK:</p>
+                    
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                        <div>
+                            <h3>🖥️ Device Information</h3>
+                            <div class="status" style="font-size: 12px; max-height: 200px; overflow-y: auto;">
+                                ${Object.entries(allProperties.automatic)
+                                    .filter(([key]) => ['device_type', 'browser', 'browser_version', 'os', 'os_version', 'screen_resolution', 'viewport_size', 'color_depth', 'timezone', 'language', 'languages'].includes(key))
+                                    .map(([key, value]) => `<strong>${key}:</strong> ${JSON.stringify(value)}<br>`)
+                                    .join('')}
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <h3>📍 Location Information</h3>
+                            <div class="status" style="font-size: 12px; max-height: 200px; overflow-y: auto;">
+                                ${Object.entries(allProperties.automatic)
+                                    .filter(([key]) => ['current_url', 'pathname', 'search', 'hash', 'title', 'referrer', 'referrer_domain', 'initial_referrer', 'initial_referrer_domain', 'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].includes(key))
+                                    .map(([key, value]) => `<strong>${key}:</strong> ${JSON.stringify(value)}<br>`)
+                                    .join('')}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div style="margin-top: 20px;">
+                        <h3>📌 Session Properties</h3>
+                        <div class="status" style="font-size: 12px; max-height: 150px; overflow-y: auto;">
+                            ${Object.keys(allProperties.session).length > 0 ? 
+                                Object.entries(allProperties.session).map(([key, value]) => `<strong>${key}:</strong> ${JSON.stringify(value)}<br>`).join('') : 
+                                '<em>No session properties set</em>'
+                            }
+                        </div>
+                    </div>
+                    
+                    <div style="margin-top: 20px;">
+                        <h3>👤 User Properties</h3>
+                        <div class="status" style="font-size: 12px; max-height: 150px; overflow-y: auto;">
+                            ${Object.keys(allProperties.user).length > 0 ? 
+                                Object.entries(allProperties.user).map(([key, value]) => `<strong>${key}:</strong> ${JSON.stringify(value)}<br>`).join('') : 
+                                '<em>No user properties set</em>'
+                            }
+                        </div>
+                    </div>
+                    
+                    <div style="margin-top: 20px;">
+                        <h3>🎯 Initial Properties</h3>
+                        <div class="status" style="font-size: 12px; max-height: 150px; overflow-y: auto;">
+                            ${Object.entries(allProperties.initial).map(([key, value]) => `<strong>${key}:</strong> ${JSON.stringify(value)}<br>`).join('')}
+                        </div>
+                    </div>
+                `;
+                
+                // Insert the properties section at the top of the content
+                const contentDiv = document.getElementById('content');
+                if (contentDiv) {
+                    contentDiv.insertBefore(propertiesSection, contentDiv.firstChild);
+                }
+                
+                addLog('Automatic properties displayed');
+                
+            } catch (error) {
+                console.error('Error displaying automatic properties:', error);
+                addLog('Error displaying automatic properties: ' + error.message);
+            }
+        }
+        
+        // Display IP information
+        async function displayIPInfo() {
+            try {
+                // Create IP display section
+                const ipSection = document.createElement('div');
+                ipSection.className = 'demo-section';
+                ipSection.style.cssText = `
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 15px;
+                    padding: 30px;
+                    margin: 20px 0;
+                    backdrop-filter: blur(5px);
+                `;
+                
+                ipSection.innerHTML = `
+                    <h2>🌐 IP Information</h2>
+                    <p>Client IP address detection (for server-side geolocation):</p>
+                    <div id="ip-info" style="font-size: 12px; max-height: 200px; overflow-y: auto;">
+                        <em>Detecting IP address...</em>
+                    </div>
+                `;
+                
+                // Insert after properties section
+                const contentDiv = document.getElementById('content');
+                if (contentDiv) {
+                    const propertiesSection = contentDiv.querySelector('.demo-section');
+                    if (propertiesSection) {
+                        propertiesSection.insertAdjacentElement('afterend', ipSection);
+                    } else {
+                        contentDiv.insertBefore(ipSection, contentDiv.firstChild);
+                    }
+                }
+                
+                // Try to get IP info using the SDK
+                try {
+                    if (typeof HumanBehaviorTracker !== 'undefined') {
+                        // Wait a bit for IP detection to complete
+                        setTimeout(async () => {
+                            const ipInfoDiv = document.getElementById('ip-info');
+                            if (ipInfoDiv) {
+                                ipInfoDiv.innerHTML = `
+                                    <strong>IP Detection Status:</strong> IP address is being sent to server for geolocation<br>
+                                    <strong>Method:</strong> STUN servers + public IP services<br>
+                                    <strong>Privacy:</strong> No precise GPS coordinates, only IP-based location<br>
+                                    <strong>Server Processing:</strong> City, country, and region determined server-side<br>
+                                    <br>
+                                    <em>Note: Actual IP address and geo data are processed on the server for privacy and accuracy.</em>
+                                `;
+                            }
+                        }, 2000);
+                    }
+                } catch (error) {
+                    const ipInfoDiv = document.getElementById('ip-info');
+                    if (ipInfoDiv) {
+                        ipInfoDiv.innerHTML = `<em>IP detection not available: ${error.message}</em>`;
+                    }
+                }
+                
+                addLog('IP information display initialized');
+                
+            } catch (error) {
+                console.error('Error displaying IP info:', error);
+                addLog('Error displaying IP info: ' + error.message);
+            }
+        }
+        
         // Add log message
         function addLog(message, data = null) {
             const logElements = document.querySelectorAll('.logs');

package/src/angular/index.ts

@@ -8,7 +8,7 @@ export class HumanBehaviorModule {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   }) {
     return {
       ngModule: HumanBehaviorModule,
@@ -44,7 +44,7 @@ export class HumanBehaviorService {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   }) {
     this.tracker = HumanBehaviorTracker.init(apiKey, options);
   }
@@ -73,7 +73,7 @@ export function initializeHumanBehavior(apiKey: string, options?: {
   logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
   redactFields?: string[];
   suppressConsoleErrors?: boolean;
-  recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  recordCanvas?: boolean; // Enable canvas recording with protection
 }): HumanBehaviorTracker {
   return HumanBehaviorTracker.init(apiKey, options);
 } 

package/src/api.ts

@@ -1,4 +1,5 @@
 import { logError, logInfo, logDebug, logWarn } from './utils/logger';
+import { getCachedIP, IPInfo } from './utils/ip-detector';
 
 export const MAX_CHUNK_SIZE_BYTES = 1024 * 1024; // 1MB chunk size - more conservative
 
@@ -140,6 +141,45 @@ export class HumanBehaviorAPI {
         }
     }
 
+    /**
+     * Send IP address information to the server
+     * This is called after successful initialization
+     */
+    public async sendIPInfo(sessionId: string): Promise<void> {
+        try {
+            const ipInfo = await getCachedIP();
+            if (!ipInfo) {
+                logWarn('No IP address available to send');
+                return;
+            }
+
+            logDebug('Sending IP info:', ipInfo);
+
+            const response = await fetch(`${this.baseUrl}/api/ingestion/ip-info`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.apiKey}`
+                },
+                body: JSON.stringify({
+                    sessionId: sessionId,
+                    clientIP: ipInfo.ip,
+                    ipDetectionMethod: ipInfo.method,
+                    timestamp: ipInfo.timestamp
+                })
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                logWarn('Failed to send IP info:', response.status, errorText);
+            } else {
+                logDebug('IP info sent successfully');
+            }
+        } catch (error) {
+            logWarn('Error sending IP info:', error);
+        }
+    }
+
     async sendEvents(events: any[], sessionId: string, userId: string) {
         // ✅ SIMPLE VALIDATION FOR ALL EVENTS
         const validEvents = events.filter(event => event && typeof event === 'object');

package/src/index.ts

@@ -13,6 +13,13 @@ export * from './api';
 // Export redaction functionality
 export * from './redact';
 
+// Export property management functionality
+export * from './utils/property-detector';
+export * from './utils/property-manager';
+
+// Export IP detection functionality
+export * from './utils/ip-detector';
+
 // Export logger functionality
 export * from './utils/logger';
 

package/src/react/index.tsx

@@ -29,7 +29,7 @@ interface HumanBehaviorProviderProps {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   };
 }
 
@@ -262,7 +262,7 @@ export const useUserTracking = () => {
   };
 };
 
-// Automatic page tracking component (similar to PostHog's PostHogPageView)
+// Automatic page tracking component
 function HumanBehaviorPageView() {
   const tracker = useContext(HumanBehaviorContext);
 

package/src/svelte/index.ts

@@ -7,7 +7,7 @@ export const humanBehaviorStore = {
     logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
     redactFields?: string[];
     suppressConsoleErrors?: boolean;
-    recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+    recordCanvas?: boolean; // Enable canvas recording with protection
   }) => {
     return HumanBehaviorTracker.init(apiKey, options);
   }