npm - humanbehavior-js - Versions diffs - 0.4.16 → 0.4.17 - Mend

humanbehavior-js 0.4.16 → 0.4.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/cjs/wizard/index.cjs +6 -8
package/dist/cjs/wizard/index.cjs.map +1 -1
package/dist/cli/ai-auto-install.js +6 -8
package/dist/cli/ai-auto-install.js.map +1 -1
package/dist/esm/wizard/index.js +6 -8
package/dist/esm/wizard/index.js.map +1 -1
package/package/WIZARD_USAGE_GUIDE.md +381 -0
package/package/canvas-recording-demo.html +143 -0
package/package/clean-console-demo.html +39 -0
package/package/dist/cjs/angular/index.cjs +14354 -0
package/package/dist/cjs/angular/index.cjs.map +1 -0
package/package/dist/cjs/index.cjs +14323 -0
package/package/dist/cjs/index.cjs.map +1 -0
package/package/dist/cjs/install-wizard.cjs +1530 -0
package/package/dist/cjs/install-wizard.cjs.map +1 -0
package/package/dist/cjs/react/index.cjs +14478 -0
package/package/dist/cjs/react/index.cjs.map +1 -0
package/package/dist/cjs/remix/index.cjs +14452 -0
package/package/dist/cjs/remix/index.cjs.map +1 -0
package/package/dist/cjs/svelte/index.cjs +14308 -0
package/package/dist/cjs/svelte/index.cjs.map +1 -0
package/package/dist/cjs/vue/index.cjs +14317 -0
package/package/dist/cjs/vue/index.cjs.map +1 -0
package/package/dist/cjs/wizard/index.cjs +3446 -0
package/package/dist/cjs/wizard/index.cjs.map +1 -0
package/package/dist/cli/ai-auto-install.cjs +57161 -0
package/package/dist/cli/ai-auto-install.cjs.map +1 -0
package/package/dist/cli/ai-auto-install.js +1969 -0
package/package/dist/cli/ai-auto-install.js.map +1 -0
package/package/dist/cli/auto-install.cjs +56352 -0
package/package/dist/cli/auto-install.cjs.map +1 -0
package/package/dist/cli/auto-install.js +1957 -0
package/package/dist/cli/auto-install.js.map +1 -0
package/package/dist/esm/angular/index.js +14350 -0
package/package/dist/esm/angular/index.js.map +1 -0
package/package/dist/esm/index.js +14309 -0
package/package/dist/esm/index.js.map +1 -0
package/package/dist/esm/install-wizard.js +1507 -0
package/package/dist/esm/install-wizard.js.map +1 -0
package/package/dist/esm/react/index.js +14472 -0
package/package/dist/esm/react/index.js.map +1 -0
package/package/dist/esm/remix/index.js +14448 -0
package/package/dist/esm/remix/index.js.map +1 -0
package/package/dist/esm/svelte/index.js +14306 -0
package/package/dist/esm/svelte/index.js.map +1 -0
package/package/dist/esm/vue/index.js +14315 -0
package/package/dist/esm/vue/index.js.map +1 -0
package/package/dist/esm/wizard/index.js +3415 -0
package/package/dist/esm/wizard/index.js.map +1 -0
package/package/dist/index.min.js +2 -0
package/package/dist/index.min.js.map +1 -0
package/package/dist/types/angular/index.d.ts +267 -0
package/package/dist/types/index.d.ts +373 -0
package/package/dist/types/install-wizard.d.ts +156 -0
package/package/dist/types/react/index.d.ts +255 -0
package/package/dist/types/remix/index.d.ts +246 -0
package/package/dist/types/svelte/index.d.ts +232 -0
package/package/dist/types/vue/index.d.ts +15 -0
package/package/dist/types/wizard/index.d.ts +523 -0
package/package/package.json +105 -0
package/package/readme.md +281 -0
package/package/rollup.config.js +422 -0
package/package/simple-demo.html +26 -0
package/package/simple-spa.html +838 -0
package/package/src/angular/index.ts +79 -0
package/package/src/api.ts +376 -0
package/package/src/index.ts +28 -0
package/package/src/react/AutoInstallWizard.tsx +557 -0
package/package/src/react/browser.ts +8 -0
package/package/src/react/index.tsx +308 -0
package/package/src/redact.ts +521 -0
package/package/src/remix/index.ts +16 -0
package/package/src/svelte/index.ts +14 -0
package/package/src/tracker.ts +1319 -0
package/package/src/types/clack.d.ts +31 -0
package/package/src/utils/logger.ts +144 -0
package/package/src/vue/index.ts +29 -0
package/package/src/wizard/README.md +114 -0
package/package/src/wizard/ai/ai-install-wizard.ts +897 -0
package/package/src/wizard/ai/manual-framework-wizard.ts +238 -0
package/package/src/wizard/cli/ai-auto-install.ts +243 -0
package/package/src/wizard/cli/auto-install.ts +224 -0
package/package/src/wizard/core/install-wizard.ts +1744 -0
package/package/src/wizard/index.ts +23 -0
package/package/src/wizard/services/centralized-ai-service.ts +668 -0
package/package/src/wizard/services/remote-ai-service.ts +240 -0
package/package/tsconfig.json +24 -0
package/package.json +1 -1
package/src/wizard/cli/ai-auto-install.ts +4 -6

package/package/readme.md ADDED Viewed

@@ -0,0 +1,281 @@
+# HumanBehavior SDK
+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
+### Auto-Installation (Recommended)
+The easiest way to get started is using our auto-installation wizard:
+```bash
+# One command installation
+npx humanbehavior-js auto-install YOUR_API_KEY
+```
+This will automatically:
+- 🔍 Detect your project's framework
+- 📦 Install the humanbehavior-js package
+- ✏️ Modify your codebase to integrate the SDK
+- 🔧 Create environment files with your API key
+- 🚀 Make your app ready to track user behavior
+### Single Page Application (Manual Setup)
+For the best session continuity experience, use the SPA approach:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="dist/index.min.js"></script>
+</head>
+<body>
+    <script>
+        // Initialize once - session persists across all navigation
+        const tracker = HumanBehaviorTracker.init('your-api-key', {
+            logLevel: 'warn', // Reduce console noise
+            redactFields: ['password', 'credit_card'],
+            suppressConsoleErrors: true, // Suppress common rrweb errors (default)
+            recordCanvas: false // Enable canvas recording with protection (default: false)
+        });
+        // Your SPA navigation logic here
+        function navigateToPage(page) {
+            // Update content without page reload
+            loadPageContent(page);
+            // Track navigation
+            tracker.trackNavigationEvent('spa_navigation', currentPage, page);
+        }
+    </script>
+</body>
+</html>
+```
+### Traditional Multi-Page Setup
+For traditional HTML pages, the tracker will automatically restore sessions:
+```html
+<!-- index.html -->
+<script src="dist/index.min.js"></script>
+<script>
+    const tracker = HumanBehaviorTracker.init('your-api-key');
+</script>
+<!-- about.html -->
+<script src="dist/index.min.js"></script>
+<script>
+    const tracker = HumanBehaviorTracker.init('your-api-key'); // Reuses existing session
+</script>
+```
+## API Reference
+### Initialization
+```javascript
+// Main initialization method
+const tracker = HumanBehaviorTracker.init(apiKey, options);
+```
+**Options:**
+- `ingestionUrl`: Custom ingestion server URL
+- `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
+```javascript
+// Get current session ID
+const sessionId = tracker.getSessionId();
+// Get current URL
+const currentUrl = tracker.getCurrentUrl();
+// Test connection to ingestion server
+const result = await tracker.testConnection();
+```
+### Event Tracking
+```javascript
+// Track custom events
+await tracker.customEvent('button_click', { button: 'submit' });
+// Track page views
+await tracker.trackPageView();
+// Track navigation (for SPAs)
+await tracker.trackNavigationEvent('pushState', '/home', '/about');
+```
+### Data Redaction
+```javascript
+// Redact sensitive fields
+tracker.setRedactedFields(['input[type="password"]', '#email']);
+// Check if redaction is active
+const isActive = tracker.isRedactedFields();
+```
+### Debugging
+```javascript
+// View logs
+tracker.viewLogs();
+// Get connection status
+const status = tracker.getConnectionStatus();
+```
+### Error Suppression
+The SDK automatically suppresses common rrweb errors for a clean console:
+```javascript
+// Enable error suppression (default)
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    suppressConsoleErrors: true // Suppresses canvas security errors, CORS issues, etc.
+});
+// Disable error suppression for debugging
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    suppressConsoleErrors: false // Show all errors for debugging
+});
+```
+**Suppressed Errors:**
+- Canvas security errors (`SecurityError: Failed to execute 'toDataURL'`)
+- Cross-origin resource errors
+- 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:
+1. **Session Restoration**: Automatically restores sessions within 15 minutes
+2. **Activity Tracking**: Updates activity timestamp on user interactions
+3. **Cross-Page Persistence**: Session persists across page navigations
+## Demo
+Check out `simple-spa.html` for a complete single-page application demo that shows:
+- True session continuity across navigation
+- Interactive event tracking
+- Real-time status updates
+- Modern UI with smooth transitions
+## Troubleshooting
+### Ad Blocker Issues
+If you see `net::ERR_BLOCKED_BY_CLIENT` errors:
+1. Check if ad blockers are active
+2. Use `tracker.getConnectionStatus()` to diagnose
+3. Consider whitelisting your domain
+### Session Issues
+- Sessions automatically expire after 15 minutes of inactivity
+- Each page load calls `/init` but reuses existing sessions when possible
+- Check browser console for session restoration logs
+## Development
+```bash
+# Build the SDK
+npm run build
+# Watch for changes
+npm run dev
+# Run tests
+npm test
+# Run auto-installation
+npm run auto-install
+```
+## Auto-Installation Wizard
+The SDK includes an auto-installation wizard that can detect your project's framework and automatically modify your codebase to integrate the SDK.
+### CLI Usage
+```bash
+# Basic usage
+npx humanbehavior-js auto-install YOUR_API_KEY
+# With options
+npx humanbehavior-js auto-install YOUR_API_KEY --yes --project /path/to/project
+# Help
+npx humanbehavior-js auto-install --help
+```
+### React Component Usage
+```jsx
+import { AutoInstallWizard } from 'humanbehavior-js/react';
+function Dashboard() {
+  return (
+    <AutoInstallWizard
+      apiKey="your-api-key"
+      onComplete={(result) => console.log('Installation completed!', result)}
+      onError={(error) => console.error('Installation failed:', error)}
+    />
+  );
+}
+```
+### Supported Frameworks
+- ✅ React (CRA, Vite, Webpack)
+- ✅ Next.js (App Router, Pages Router)
+- ✅ Vue (Vue CLI, Vite)
+- ✅ Angular
+- ✅ Svelte (SvelteKit, Vite)
+- ✅ Vanilla JS/TS
+- ✅ Node.js (CommonJS & ESM)
+The wizard will automatically:
+1. Detect your project's framework and setup
+2. Install the humanbehavior-js package
+3. Modify your main app files to integrate the SDK
+4. Create environment files with your API key
+5. Make your app ready to track user behavior
+## Architecture
+- **Frontend**: TypeScript SDK with session restoration
+- **Backend**: Node.js ingestion server with Redis storage
+- **Archiver**: Processes completed sessions to S3 and Prisma
+- **Session Continuity**: localStorage + cookie-based session management

package/package/rollup.config.js ADDED Viewed

@@ -0,0 +1,422 @@
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import dts from 'rollup-plugin-dts';
+import json from '@rollup/plugin-json';
+// External dependencies that shouldn't be bundled
+const external = ['react', 'react-dom', 'react/jsx-runtime'];
+const nodeExternal = ['fs', 'path', 'child_process', 'readline', '@clack/prompts'];
+// Global variables for UMD build
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  fs: 'fs',
+  path: 'path'
+};
+export default [
+  // Main SDK bundle
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorTracker',
+        globals,
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/index.js',
+        format: 'es',
+        sourcemap: true
+      },
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: 'HumanBehaviorTracker',
+        globals,
+        exports: 'auto',
+        sourcemap: true,
+        plugins: [terser()]
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external, ...nodeExternal]
+  },
+  // React component bundle
+  {
+    input: './src/react/index.tsx',
+    output: [
+      {
+        file: 'dist/cjs/react/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorReact',
+        globals: {
+          ...globals,
+          '../index': 'HumanBehaviorTracker'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/react/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external] // Only externalize React, bundle the main SDK
+  },
+  // Svelte bundle
+  {
+    input: './src/svelte/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/svelte/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorSvelte',
+        globals: {
+          ...globals,
+          '../index': 'HumanBehaviorTracker'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/svelte/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external, '../index', ...nodeExternal] // Externalize the main SDK
+  },
+  // Vue bundle
+  {
+    input: './src/vue/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/vue/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorVue',
+        globals: {
+          ...globals,
+          '../index': 'HumanBehaviorTracker',
+          'vue': 'Vue'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/vue/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external, '../index', 'vue', ...nodeExternal] // Externalize Vue and the main SDK
+  },
+  // Remix bundle
+  {
+    input: './src/remix/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/remix/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorRemix',
+        globals: {
+          ...globals,
+          '../index': 'HumanBehaviorTracker',
+          '../react': 'HumanBehaviorReact',
+          '@remix-run/node': 'RemixNode'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/remix/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external, '../index', '../react', '@remix-run/node', ...nodeExternal] // Externalize dependencies
+  },
+  // Angular bundle
+  {
+    input: './src/angular/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/angular/index.cjs',
+        format: 'cjs',
+        name: 'HumanBehaviorAngular',
+        globals: {
+          ...globals,
+          '../index': 'HumanBehaviorTracker'
+        },
+        exports: 'named',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/angular/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: false
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: [...external, '../index', ...nodeExternal] // Externalize the main SDK
+  },
+  // Type definition bundles - generate these separately
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'dist/types/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, ...nodeExternal]
+  },
+  {
+    input: 'src/react/index.tsx',
+    output: {
+      file: 'dist/types/react/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..', ...nodeExternal]
+  },
+  {
+    input: 'src/svelte/index.ts',
+    output: {
+      file: 'dist/types/svelte/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..', ...nodeExternal]
+  },
+  {
+    input: 'src/vue/index.ts',
+    output: {
+      file: 'dist/types/vue/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..', 'vue', ...nodeExternal]
+  },
+  {
+    input: 'src/remix/index.ts',
+    output: {
+      file: 'dist/types/remix/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..', '../react', '@remix-run/node', ...nodeExternal]
+  },
+  {
+    input: 'src/angular/index.ts',
+    output: {
+      file: 'dist/types/angular/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: [...external, '..', ...nodeExternal]
+  },
+  // CLI bundle
+  {
+    input: 'src/wizard/cli/auto-install.ts',
+    output: {
+      file: 'dist/cli/auto-install.js',
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: [
+      resolve({
+        preferBuiltins: true
+      }),
+      commonjs(),
+      json(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: nodeExternal
+  },
+  // AI CLI bundle
+  {
+    input: 'src/wizard/cli/ai-auto-install.ts',
+    output: {
+      file: 'dist/cli/ai-auto-install.js',
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: [
+      resolve({
+        preferBuiltins: true
+      }),
+      commonjs(),
+      json(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: nodeExternal
+  },
+  // Install wizard bundle
+  {
+    input: 'src/wizard/core/install-wizard.ts',
+    output: [
+      {
+        file: 'dist/cjs/install-wizard.cjs',
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/install-wizard.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: true
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: nodeExternal
+  },
+  // Install wizard types
+  {
+    input: 'src/wizard/core/install-wizard.ts',
+    output: {
+      file: 'dist/types/install-wizard.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: nodeExternal
+  },
+  // Wizard module bundle
+  {
+    input: 'src/wizard/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/wizard/index.cjs',
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: 'dist/esm/wizard/index.js',
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      resolve({
+        preferBuiltins: true
+      }),
+      commonjs(),
+      json(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: false,
+        declarationMap: false
+      })
+    ],
+    external: nodeExternal
+  },
+  // Wizard module types
+  {
+    input: 'src/wizard/index.ts',
+    output: {
+      file: 'dist/types/wizard/index.d.ts',
+      format: 'es'
+    },
+    plugins: [dts()],
+    external: nodeExternal
+  }
+];