humanbehavior-js 0.4.20 → 0.4.22

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 (53) hide show
  1. package/dist/cjs/angular/index.cjs +817 -19
  2. package/dist/cjs/angular/index.cjs.map +1 -1
  3. package/dist/cjs/index.cjs +833 -19
  4. package/dist/cjs/index.cjs.map +1 -1
  5. package/dist/cjs/react/index.cjs +818 -20
  6. package/dist/cjs/react/index.cjs.map +1 -1
  7. package/dist/cjs/remix/index.cjs +818 -20
  8. package/dist/cjs/remix/index.cjs.map +1 -1
  9. package/dist/cjs/svelte/index.cjs +817 -19
  10. package/dist/cjs/svelte/index.cjs.map +1 -1
  11. package/dist/cjs/vue/index.cjs +817 -19
  12. package/dist/cjs/vue/index.cjs.map +1 -1
  13. package/dist/esm/angular/index.js +817 -19
  14. package/dist/esm/angular/index.js.map +1 -1
  15. package/dist/esm/index.js +825 -20
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/react/index.js +818 -20
  18. package/dist/esm/react/index.js.map +1 -1
  19. package/dist/esm/remix/index.js +818 -20
  20. package/dist/esm/remix/index.js.map +1 -1
  21. package/dist/esm/svelte/index.js +817 -19
  22. package/dist/esm/svelte/index.js.map +1 -1
  23. package/dist/esm/vue/index.js +817 -19
  24. package/dist/esm/vue/index.js.map +1 -1
  25. package/dist/index.min.js +1 -1
  26. package/dist/index.min.js.map +1 -1
  27. package/dist/types/angular/index.d.ts +60 -1
  28. package/dist/types/index.d.ts +258 -3
  29. package/dist/types/react/index.d.ts +60 -1
  30. package/dist/types/remix/index.d.ts +60 -1
  31. package/dist/types/svelte/index.d.ts +60 -1
  32. package/package/canvas-recording-demo.html +1 -1
  33. package/package/simple-spa.html +1 -1
  34. package/package/src/angular/index.ts +3 -3
  35. package/package/src/react/index.tsx +2 -2
  36. package/package/src/svelte/index.ts +1 -1
  37. package/package/src/tracker.ts +2 -2
  38. package/package/src/vue/index.ts +1 -1
  39. package/package.json +1 -1
  40. package/simple-spa.html +164 -2
  41. package/src/angular/index.ts +3 -3
  42. package/src/api.ts +40 -0
  43. package/src/index.ts +7 -0
  44. package/src/react/index.tsx +2 -2
  45. package/src/svelte/index.ts +1 -1
  46. package/src/tracker.ts +193 -17
  47. package/src/utils/ip-detector.ts +158 -0
  48. package/src/utils/property-detector.ts +345 -0
  49. package/src/utils/property-manager.ts +274 -0
  50. package/src/vue/index.ts +1 -1
  51. package/canvas-recording-demo.html +0 -143
  52. package/clean-console-demo.html +0 -39
  53. package/simple-demo.html +0 -26
package/canvas-recording-demo.html DELETED
@@ -1,143 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HumanBehavior Canvas Recording Demo</title>
7
- <style>
8
- body { font-family: Arial, sans-serif; margin: 20px; }
9
- .demo-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
10
- canvas { border: 2px solid #333; margin: 10px; }
11
- button { padding: 10px 20px; margin: 5px; }
12
- .info { background: #f0f0f0; padding: 10px; border-radius: 5px; }
13
- </style>
14
- </head>
15
- <body>
16
- <h1>HumanBehavior Canvas Recording Demo</h1>
17
-
18
- <div class="info">
19
- <h3>PostHog-Style Canvas Protection</h3>
20
- <ul>
21
- <li><strong>4 FPS Throttling:</strong> Prevents canvas overwhelm (vs 60 FPS default)</li>
22
- <li><strong>40% Quality:</strong> WebP format with compression</li>
23
- <li><strong>Opt-in Only:</strong> Disabled by default for safety</li>
24
- <li><strong>Smart Sampling:</strong> Only captures when canvas changes</li>
25
- </ul>
26
- </div>
27
-
28
- <div class="demo-section">
29
- <h3>Canvas Drawing Demo</h3>
30
- <canvas id="demoCanvas" width="400" height="300"></canvas>
31
- <br>
32
- <button onclick="drawRandom()">Draw Random Shape</button>
33
- <button onclick="clearCanvas()">Clear Canvas</button>
34
- <button onclick="animate()">Start Animation</button>
35
- </div>
36
-
37
- <div class="demo-section">
38
- <h3>Canvas Recording Options</h3>
39
- <button onclick="enableCanvasRecording()">Enable Canvas Recording</button>
40
- <button onclick="disableCanvasRecording()">Disable Canvas Recording</button>
41
- <p id="status">Canvas recording: <strong>Disabled</strong></p>
42
- </div>
43
-
44
- <script src="./dist/index.min.js"></script>
45
- <script>
46
- let tracker;
47
- let canvas = document.getElementById('demoCanvas');
48
- let ctx = canvas.getContext('2d');
49
- let animationId;
50
-
51
- // Initialize tracker without canvas recording
52
- function initTracker(enableCanvas = false) {
53
- tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
54
- logLevel: 'warn',
55
- suppressConsoleErrors: true,
56
- recordCanvas: enableCanvas // PostHog-style protection
57
- });
58
-
59
- updateStatus();
60
- console.log('✅ Tracker initialized with canvas recording:', enableCanvas);
61
- }
62
-
63
- function updateStatus() {
64
- const status = document.getElementById('status');
65
- status.innerHTML = `Canvas recording: <strong>${tracker.recordCanvas ? 'Enabled' : 'Disabled'}</strong>`;
66
- }
67
-
68
- function enableCanvasRecording() {
69
- if (tracker) {
70
- tracker.stop();
71
- }
72
- initTracker(true);
73
- }
74
-
75
- function disableCanvasRecording() {
76
- if (tracker) {
77
- tracker.stop();
78
- }
79
- initTracker(false);
80
- }
81
-
82
- function drawRandom() {
83
- const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
84
- const color = colors[Math.floor(Math.random() * colors.length)];
85
-
86
- ctx.fillStyle = color;
87
- ctx.beginPath();
88
- ctx.arc(
89
- Math.random() * canvas.width,
90
- Math.random() * canvas.height,
91
- Math.random() * 50 + 10,
92
- 0,
93
- 2 * Math.PI
94
- );
95
- ctx.fill();
96
-
97
- // Track the drawing event
98
- if (tracker) {
99
- tracker.customEvent('canvas_draw', {
100
- color: color,
101
- timestamp: Date.now()
102
- });
103
- }
104
- }
105
-
106
- function clearCanvas() {
107
- ctx.clearRect(0, 0, canvas.width, canvas.height);
108
-
109
- if (tracker) {
110
- tracker.customEvent('canvas_clear', {
111
- timestamp: Date.now()
112
- });
113
- }
114
- }
115
-
116
- function animate() {
117
- let angle = 0;
118
-
119
- function animateFrame() {
120
- ctx.clearRect(0, 0, canvas.width, canvas.height);
121
-
122
- // Draw rotating rectangle
123
- ctx.save();
124
- ctx.translate(canvas.width / 2, canvas.height / 2);
125
- ctx.rotate(angle);
126
- ctx.fillStyle = '#FF6B6B';
127
- ctx.fillRect(-25, -25, 50, 50);
128
- ctx.restore();
129
-
130
- angle += 0.02;
131
- animationId = requestAnimationFrame(animateFrame);
132
- }
133
-
134
- animateFrame();
135
- }
136
-
137
- // Initialize tracker on page load
138
- initTracker(false);
139
-
140
- console.log('🎨 Canvas demo ready! Try drawing or enabling canvas recording.');
141
- </script>
142
- </body>
143
- </html>
package/clean-console-demo.html DELETED
@@ -1,39 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HumanBehavior Clean Console Demo</title>
7
- </head>
8
- <body>
9
- <h1>HumanBehavior Clean Console Demo</h1>
10
- <p>This demo shows how to suppress common rrweb errors for a clean console.</p>
11
-
12
- <!-- External images that would normally cause CORS errors -->
13
- <img src="https://img.lumas.com/showimg_rwt01_search.jpg" alt="External image 1" style="width: 100px; height: 100px;">
14
- <img src="https://media.lumas.de/homepage/2024/magazine-kachel-300x400.webp" alt="External image 2" style="width: 100px; height: 100px;">
15
-
16
- <button>Click me to test recording</button>
17
- <input type="text" placeholder="Type something">
18
- <input type="password" placeholder="Password (will be redacted)">
19
-
20
- <script src="./dist/index.min.js"></script>
21
- <script>
22
- // Initialize the tracker with error suppression enabled (default)
23
- const tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
24
- redactFields: ['input[type="password"]'],
25
- suppressConsoleErrors: true, // Enable error suppression (default)
26
- logLevel: 'warn' // Only show warnings and errors
27
- });
28
-
29
- console.log('✅ HumanBehavior tracker initialized with clean console mode');
30
- console.log('✅ Canvas security errors and CORS issues will be suppressed');
31
-
32
- // Test that core functionality still works
33
- tracker.customEvent('demo_started', {
34
- feature: 'clean_console',
35
- timestamp: Date.now()
36
- });
37
- </script>
38
- </body>
39
- </html>
package/simple-demo.html DELETED
@@ -1,26 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HumanBehavior Simple Demo</title>
7
- </head>
8
- <body>
9
- <h1>HumanBehavior Tracker Demo</h1>
10
- <p>This page initializes the HumanBehavior tracker. Check the console for status.</p>
11
-
12
- <button>Click me to test recording</button>
13
- <input type="text" placeholder="Type something">
14
- <input type="password" placeholder="Password (will be redacted)">
15
-
16
- <script src="./dist/index.min.js"></script>
17
- <script>
18
- // Initialize the tracker
19
- const tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
20
- redactFields: ['input[type="password"]']
21
- });
22
-
23
- console.log('HumanBehavior tracker initialized:', tracker);
24
- </script>
25
- </body>
26
- </html>