humanbehavior-js 0.3.7 → 0.3.8

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 (56) hide show
  1. package/WIZARD_USAGE_GUIDE.md +381 -0
  2. package/dist/cjs/angular/index.cjs +53 -0
  3. package/dist/cjs/angular/index.cjs.map +1 -0
  4. package/dist/cjs/{index.js → index.cjs} +5 -4
  5. package/dist/cjs/index.cjs.map +1 -0
  6. package/dist/cjs/install-wizard.cjs +1157 -0
  7. package/dist/cjs/install-wizard.cjs.map +1 -0
  8. package/dist/cjs/react/index.cjs +14387 -0
  9. package/dist/cjs/react/index.cjs.map +1 -0
  10. package/dist/cjs/remix/index.cjs +57 -0
  11. package/dist/cjs/remix/index.cjs.map +1 -0
  12. package/dist/cjs/svelte/index.cjs +13 -0
  13. package/dist/cjs/svelte/index.cjs.map +1 -0
  14. package/dist/cjs/vue/index.cjs +16 -0
  15. package/dist/cjs/vue/index.cjs.map +1 -0
  16. package/dist/cli/auto-install.js +1170 -0
  17. package/dist/cli/auto-install.js.map +1 -0
  18. package/dist/esm/angular/index.js +49 -0
  19. package/dist/esm/angular/index.js.map +1 -0
  20. package/dist/esm/index.js +5 -1
  21. package/dist/esm/index.js.map +1 -1
  22. package/dist/esm/install-wizard.js +1134 -0
  23. package/dist/esm/install-wizard.js.map +1 -0
  24. package/dist/esm/react/index.js +14113 -70
  25. package/dist/esm/react/index.js.map +1 -1
  26. package/dist/esm/remix/index.js +47 -0
  27. package/dist/esm/remix/index.js.map +1 -0
  28. package/dist/esm/svelte/index.js +11 -0
  29. package/dist/esm/svelte/index.js.map +1 -0
  30. package/dist/esm/vue/index.js +14 -0
  31. package/dist/esm/vue/index.js.map +1 -0
  32. package/dist/index.min.js +1 -1
  33. package/dist/index.min.js.map +1 -1
  34. package/dist/types/angular/index.d.ts +240 -0
  35. package/dist/types/index.d.ts +1 -1
  36. package/dist/types/install-wizard.d.ts +126 -0
  37. package/dist/types/react/index.d.ts +212 -3
  38. package/dist/types/remix/index.d.ts +10 -0
  39. package/dist/types/svelte/index.d.ts +216 -0
  40. package/dist/types/vue/index.d.ts +10 -0
  41. package/package.json +40 -7
  42. package/readme.md +70 -1
  43. package/rollup.config.js +263 -13
  44. package/src/angular/index.ts +54 -0
  45. package/src/cli/auto-install.ts +225 -0
  46. package/src/index.ts +5 -2
  47. package/src/install-wizard.ts +1304 -0
  48. package/src/react/AutoInstallWizard.tsx +557 -0
  49. package/src/react/browser.ts +8 -0
  50. package/src/react/index.tsx +2 -4
  51. package/src/remix/index.ts +16 -0
  52. package/src/svelte/index.ts +8 -0
  53. package/src/vue/index.ts +18 -0
  54. package/dist/cjs/index.js.map +0 -1
  55. package/dist/cjs/react/index.js +0 -346
  56. package/dist/cjs/react/index.js.map +0 -1
@@ -0,0 +1,216 @@
1
+ interface RedactionOptions {
2
+ redactedText?: string;
3
+ excludeSelectors?: string[];
4
+ userFields?: string[];
5
+ }
6
+
7
+ declare global {
8
+ interface Window {
9
+ HumanBehaviorTracker: typeof HumanBehaviorTracker;
10
+ __humanBehaviorGlobalTracker?: HumanBehaviorTracker;
11
+ }
12
+ }
13
+ declare class HumanBehaviorTracker {
14
+ private eventIngestionQueue;
15
+ private sessionId;
16
+ private userProperties;
17
+ private isProcessing;
18
+ private flushInterval;
19
+ private readonly FLUSH_INTERVAL_MS;
20
+ private api;
21
+ private endUserId;
22
+ private apiKey;
23
+ private initialized;
24
+ initializationPromise: Promise<void> | null;
25
+ private redactionManager;
26
+ private originalConsole;
27
+ private consoleTrackingEnabled;
28
+ navigationTrackingEnabled: boolean;
29
+ private currentUrl;
30
+ private previousUrl;
31
+ private originalPushState;
32
+ private originalReplaceState;
33
+ private navigationListeners;
34
+ private _connectionBlocked;
35
+ private recordInstance;
36
+ private sessionStartTime;
37
+ /**
38
+ * Initialize the HumanBehavior tracker
39
+ * This is the main entry point - call this once per page
40
+ */
41
+ static init(apiKey: string, options?: {
42
+ ingestionUrl?: string;
43
+ logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
44
+ redactFields?: string[];
45
+ enableAutomaticTracking?: boolean;
46
+ automaticTrackingOptions?: {
47
+ trackButtons?: boolean;
48
+ trackLinks?: boolean;
49
+ trackForms?: boolean;
50
+ includeText?: boolean;
51
+ includeClasses?: boolean;
52
+ };
53
+ }): HumanBehaviorTracker;
54
+ constructor(apiKey: string | undefined, ingestionUrl?: string);
55
+ private init;
56
+ private ensureInitialized;
57
+ /**
58
+ * Setup navigation event tracking for SPA navigation
59
+ */
60
+ private setupNavigationTracking;
61
+ /**
62
+ * Track navigation events and send custom events
63
+ */
64
+ trackNavigationEvent(type: string, fromUrl: string, toUrl: string): Promise<void>;
65
+ trackPageView(url?: string): Promise<void>;
66
+ customEvent(eventName: string, properties?: Record<string, any>): Promise<void>;
67
+ /**
68
+ * Setup automatic tracking for buttons, links, and forms
69
+ */
70
+ private setupAutomaticTracking;
71
+ /**
72
+ * Setup automatic button tracking
73
+ */
74
+ private setupAutomaticButtonTracking;
75
+ /**
76
+ * Setup automatic link tracking
77
+ */
78
+ private setupAutomaticLinkTracking;
79
+ /**
80
+ * Setup automatic form tracking
81
+ */
82
+ private setupAutomaticFormTracking;
83
+ /**
84
+ * Cleanup navigation tracking
85
+ */
86
+ private cleanupNavigationTracking;
87
+ static logToStorage(message: string): void;
88
+ /**
89
+ * Configure logging behavior for the SDK
90
+ * @param config Logger configuration options
91
+ */
92
+ static configureLogging(config: {
93
+ level?: 'none' | 'error' | 'warn' | 'info' | 'debug';
94
+ enableConsole?: boolean;
95
+ enableStorage?: boolean;
96
+ }): void;
97
+ /**
98
+ * Enable console event tracking
99
+ */
100
+ enableConsoleTracking(): void;
101
+ /**
102
+ * Disable console event tracking
103
+ */
104
+ disableConsoleTracking(): void;
105
+ private trackConsoleEvent;
106
+ private setupPageUnloadHandler;
107
+ viewLogs(): void;
108
+ /**
109
+ * Add user identification information to the tracker
110
+ * If userId is not provided, will use userProperties.email as the userId (if present)
111
+ */
112
+ identifyUser({ userProperties }: {
113
+ userProperties: Record<string, any>;
114
+ }): Promise<string>;
115
+ /**
116
+ * Get current user attributes
117
+ */
118
+ getUserAttributes(): Record<string, any>;
119
+ start(): Promise<void>;
120
+ stop(): Promise<void>;
121
+ /**
122
+ * Add an event to the ingestion queue
123
+ * Events are sent directly without processing to avoid corruption
124
+ */
125
+ addEvent(event: any): Promise<void>;
126
+ /**
127
+ * Flush events to the ingestion server
128
+ * Events are sent in chunks to handle large payloads efficiently
129
+ */
130
+ private flush;
131
+ private setCookie;
132
+ getCookie(name: string): string | null;
133
+ /**
134
+ * Delete a cookie by setting its expiration date to the past
135
+ * @param name The name of the cookie to delete
136
+ */
137
+ private deleteCookie;
138
+ /**
139
+ * Clear user data and reset session when user signs out of the site
140
+ * This should be called when a user logs out of your application to prevent
141
+ * data contamination between different users
142
+ */
143
+ logout(): void;
144
+ /**
145
+ * Start redaction functionality for sensitive input fields
146
+ * @param options Optional configuration for redaction behavior
147
+ */
148
+ redact(options?: RedactionOptions): Promise<void>;
149
+ /**
150
+ * Set specific fields to be redacted during session recording
151
+ * Uses rrweb's built-in masking instead of custom redaction processing
152
+ * @param fields Array of CSS selectors for fields to redact (e.g., ['input[type="password"]', '#email-field'])
153
+ */
154
+ setRedactedFields(fields: string[]): void;
155
+ private restartWithNewRedaction;
156
+ /**
157
+ * Check if redaction is currently active
158
+ */
159
+ isRedactionActive(): boolean;
160
+ /**
161
+ * Get the currently selected fields for redaction
162
+ */
163
+ getRedactedFields(): string[];
164
+ /**
165
+ * Get the current session ID
166
+ */
167
+ getSessionId(): string;
168
+ /**
169
+ * Get the current URL being tracked
170
+ */
171
+ getCurrentUrl(): string;
172
+ /**
173
+ * Get current snapshot frequency info
174
+ * Uses configured values (5 minutes, 1000 events)
175
+ */
176
+ getSnapshotFrequencyInfo(): {
177
+ sessionDuration: number;
178
+ currentInterval: number;
179
+ currentThreshold: number;
180
+ phase: string;
181
+ };
182
+ /**
183
+ * Test if the tracker can reach the ingestion server
184
+ */
185
+ testConnection(): Promise<{
186
+ success: boolean;
187
+ error?: string;
188
+ }>;
189
+ /**
190
+ * Get connection status and recommendations
191
+ */
192
+ getConnectionStatus(): {
193
+ blocked: boolean;
194
+ recommendations: string[];
195
+ };
196
+ /**
197
+ * Check if the current user is a preexisting user
198
+ * Returns true if the user has an existing endUserId cookie from a previous session
199
+ */
200
+ isPreexistingUser(): boolean;
201
+ /**
202
+ * Get user information including whether they are preexisting
203
+ */
204
+ getUserInfo(): {
205
+ endUserId: string | null;
206
+ sessionId: string;
207
+ isPreexistingUser: boolean;
208
+ initialized: boolean;
209
+ };
210
+ }
211
+
212
+ declare const humanBehaviorStore: {
213
+ init: (apiKey: string) => HumanBehaviorTracker;
214
+ };
215
+
216
+ export { humanBehaviorStore };
@@ -0,0 +1,10 @@
1
+ import { App } from 'vue';
2
+
3
+ interface HumanBehaviorPluginOptions {
4
+ apiKey: string;
5
+ }
6
+ declare const HumanBehaviorPlugin: {
7
+ install: (app: App, options: HumanBehaviorPluginOptions) => void;
8
+ };
9
+
10
+ export { HumanBehaviorPlugin };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "humanbehavior-js",
3
- "version": "0.3.7",
3
+ "version": "0.3.8",
4
4
  "description": "SDK for HumanBehavior session and event recording",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
@@ -11,20 +11,46 @@
11
11
  "exports": {
12
12
  ".": {
13
13
  "import": "./dist/esm/index.js",
14
- "require": "./dist/cjs/index.js",
14
+ "require": "./dist/cjs/index.cjs",
15
15
  "types": "./dist/types/index.d.ts"
16
16
  },
17
17
  "./react": {
18
18
  "import": "./dist/esm/react/index.js",
19
- "require": "./dist/cjs/react/index.js",
19
+ "require": "./dist/cjs/react/index.cjs",
20
20
  "types": "./dist/types/react/index.d.ts"
21
+ },
22
+ "./svelte": {
23
+ "import": "./dist/esm/svelte/index.js",
24
+ "require": "./dist/cjs/svelte/index.cjs",
25
+ "types": "./dist/types/svelte/index.d.ts"
26
+ },
27
+ "./vue": {
28
+ "import": "./dist/esm/vue/index.js",
29
+ "require": "./dist/cjs/vue/index.cjs",
30
+ "types": "./dist/types/vue/index.d.ts"
31
+ },
32
+ "./remix": {
33
+ "import": "./dist/esm/remix/index.js",
34
+ "require": "./dist/cjs/remix/index.cjs",
35
+ "types": "./dist/types/remix/index.d.ts"
36
+ },
37
+ "./angular": {
38
+ "import": "./dist/esm/angular/index.js",
39
+ "require": "./dist/cjs/angular/index.cjs",
40
+ "types": "./dist/types/angular/index.d.ts"
41
+ },
42
+ "./install-wizard": {
43
+ "import": "./dist/esm/install-wizard.js",
44
+ "require": "./dist/cjs/install-wizard.cjs",
45
+ "types": "./dist/types/install-wizard.d.ts"
21
46
  }
22
47
  },
23
48
  "scripts": {
24
49
  "build": "rollup -c",
25
50
  "build:dev": "rollup -c --environment NODE_ENV:development",
26
51
  "prepare": "npm run build",
27
- "test": "echo \"Error: no test specified\" && exit 1"
52
+ "test": "echo \"Error: no test specified\" && exit 1",
53
+ "auto-install": "node dist/cli/auto-install.js"
28
54
  },
29
55
  "author": "Chirag Kawediya, Skyler Ji, Amogh Chaturvedi",
30
56
  "license": "ISC",
@@ -35,7 +61,9 @@
35
61
  },
36
62
  "peerDependencies": {
37
63
  "react": ">=16.8.0",
38
- "react-dom": ">=16.8.0"
64
+ "react-dom": ">=16.8.0",
65
+ "vue": ">=3.0.0",
66
+ "@remix-run/node": ">=2.0.0"
39
67
  },
40
68
  "devDependencies": {
41
69
  "@rollup/plugin-commonjs": "^28.0.3",
@@ -46,7 +74,9 @@
46
74
  "rollup": "^4.36.0",
47
75
  "rollup-plugin-dts": "^6.2.1",
48
76
  "tslib": "^2.8.1",
49
- "typescript": "^5.8.2"
77
+ "typescript": "^5.8.2",
78
+ "vue": "^3.0.0",
79
+ "@remix-run/node": "^2.0.0"
50
80
  },
51
81
  "publishConfig": {
52
82
  "access": "public"
@@ -60,5 +90,8 @@
60
90
  "analytics",
61
91
  "rrweb",
62
92
  "koalaware"
63
- ]
93
+ ],
94
+ "bin": {
95
+ "humanbehavior-js": "./dist/cli/auto-install.js"
96
+ }
64
97
  }
package/readme.md CHANGED
@@ -6,7 +6,23 @@ A simplified session recording and analytics SDK that maintains session continui
6
6
 
7
7
  ## Quick Start
8
8
 
9
- ### Single Page Application (Recommended)
9
+ ### Auto-Installation (Recommended)
10
+
11
+ The easiest way to get started is using our auto-installation wizard:
12
+
13
+ ```bash
14
+ # One command installation
15
+ npx humanbehavior-js auto-install YOUR_API_KEY
16
+ ```
17
+
18
+ This will automatically:
19
+ - 🔍 Detect your project's framework
20
+ - 📦 Install the humanbehavior-js package
21
+ - ✏️ Modify your codebase to integrate the SDK
22
+ - 🔧 Create environment files with your API key
23
+ - 🚀 Make your app ready to track user behavior
24
+
25
+ ### Single Page Application (Manual Setup)
10
26
 
11
27
  For the best session continuity experience, use the SPA approach:
12
28
 
@@ -159,8 +175,61 @@ npm run dev
159
175
 
160
176
  # Run tests
161
177
  npm test
178
+
179
+ # Run auto-installation
180
+ npm run auto-install
181
+ ```
182
+
183
+ ## Auto-Installation Wizard
184
+
185
+ The SDK includes an auto-installation wizard that can detect your project's framework and automatically modify your codebase to integrate the SDK.
186
+
187
+ ### CLI Usage
188
+
189
+ ```bash
190
+ # Basic usage
191
+ npx humanbehavior-js auto-install YOUR_API_KEY
192
+
193
+ # With options
194
+ npx humanbehavior-js auto-install YOUR_API_KEY --yes --project /path/to/project
195
+
196
+ # Help
197
+ npx humanbehavior-js auto-install --help
162
198
  ```
163
199
 
200
+ ### React Component Usage
201
+
202
+ ```jsx
203
+ import { AutoInstallWizard } from 'humanbehavior-js/react';
204
+
205
+ function Dashboard() {
206
+ return (
207
+ <AutoInstallWizard
208
+ apiKey="your-api-key"
209
+ onComplete={(result) => console.log('Installation completed!', result)}
210
+ onError={(error) => console.error('Installation failed:', error)}
211
+ />
212
+ );
213
+ }
214
+ ```
215
+
216
+ ### Supported Frameworks
217
+
218
+ - ✅ React (CRA, Vite, Webpack)
219
+ - ✅ Next.js (App Router, Pages Router)
220
+ - ✅ Vue (Vue CLI, Vite)
221
+ - ✅ Angular
222
+ - ✅ Svelte (SvelteKit, Vite)
223
+ - ✅ Vanilla JS/TS
224
+ - ✅ Node.js (CommonJS & ESM)
225
+
226
+ The wizard will automatically:
227
+ 1. Detect your project's framework and setup
228
+ 2. Install the humanbehavior-js package
229
+ 3. Modify your main app files to integrate the SDK
230
+ 4. Create environment files with your API key
231
+ 5. Make your app ready to track user behavior
232
+
164
233
  ## Architecture
165
234
 
166
235
  - **Frontend**: TypeScript SDK with session restoration