npm - humanbehavior-js - Versions diffs - 0.0.9 → 0.1.0 - Mend

humanbehavior-js 0.0.9 → 0.1.0

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 (18) hide show

package/dist/cjs/index.js +345 -184
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/react/index.js +51 -77
package/dist/cjs/react/index.js.map +1 -1
package/dist/esm/index.js +345 -184
package/dist/esm/index.js.map +1 -1
package/dist/esm/react/index.js +48 -77
package/dist/esm/react/index.js.map +1 -1
package/dist/index.min.js +2 -2
package/dist/index.min.js.map +1 -1
package/dist/types/index.d.ts +60 -12
package/dist/types/react/index.d.ts +8 -9
package/package.json +2 -1
package/readme.md +127 -105
package/simple-spa.html +544 -0
package/src/api.ts +4 -134
package/src/react/index.tsx +61 -28
package/src/tracker.ts +404 -87

package/simple-spa.html ADDED Viewed

@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HumanBehavior SDK - Simple SPA Demo</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .nav {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        .nav button {
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(5px);
+        }
+        .nav button:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+        .nav button.active {
+            background: rgba(255, 255, 255, 0.4);
+            border-color: rgba(255, 255, 255, 0.6);
+        }
+        .content {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 30px;
+            min-height: 400px;
+            backdrop-filter: blur(5px);
+        }
+        .button {
+            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 10px;
+            transition: all 0.3s ease;
+        }
+        .button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+        .button.secondary {
+            background: linear-gradient(45deg, #4834d4, #686de0);
+        }
+        .button.success {
+            background: linear-gradient(45deg, #00b894, #00cec9);
+        }
+        .status {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            padding: 15px;
+            margin: 20px 0;
+            font-family: monospace;
+            font-size: 14px;
+        }
+        .logs {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            padding: 15px;
+            margin: 20px 0;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: monospace;
+            font-size: 12px;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>HumanBehavior SDK - Simple SPA Demo</h1>
+        <div class="nav">
+            <button class="nav-btn active" data-page="home">🏠 Home</button>
+            <button class="nav-btn" data-page="about">ℹ️ About</button>
+            <button class="nav-btn" data-page="demo">🎯 Demo</button>
+            <button class="nav-btn" data-page="status">📊 Status</button>
+        </div>
+        <div id="content" class="content fade-in">
+            <!-- Content will be loaded here -->
+        </div>
+    </div>
+    <!-- Load the HumanBehavior SDK -->
+    <script src="dist/index.min.js"></script>
+    <script>
+        // Global tracker instance
+        let tracker = null;
+        let currentPage = 'home';
+        // Page content definitions
+        const pages = {
+            home: {
+                title: '🏠 Home',
+                content: `
+                    <h2>Welcome to HumanBehavior SDK Demo</h2>
+                    <p>This is a single-page application that demonstrates session continuity across page navigations.</p>
+                    <div class="status">
+                        <strong>Session Info:</strong><br>
+                        Session ID: <span id="sessionId">Loading...</span><br>
+                        End User ID: <span id="endUserId">Loading...</span><br>
+                        Current URL: <span id="currentUrl">Loading...</span>
+                    </div>
+                    <h3>Test Actions</h3>
+                    <button class="button" onclick="trackCustomEvent('home_button_click', {page: 'home'})">
+                        Track Custom Event
+                    </button>
+                    <button class="button secondary" onclick="testConsoleLog()">
+                        Test Console Log
+                    </button>
+                    <button class="button success" onclick="testConsoleError()">
+                        Test Console Error
+                    </button>
+                    <div class="logs" id="logs">
+                        <div>Logs will appear here...</div>
+                    </div>
+                `
+            },
+            about: {
+                title: 'ℹ️ About',
+                content: `
+                    <h2>About This Demo</h2>
+                    <p>This single-page application demonstrates how the HumanBehavior SDK maintains session continuity across page navigations.</p>
+                    <h3>Key Features</h3>
+                    <ul>
+                        <li><strong>Session Continuity:</strong> The tracker never reinitializes when navigating between pages</li>
+                        <li><strong>URL Tracking:</strong> All navigation events are captured and sent to the server</li>
+                        <li><strong>Event Recording:</strong> User interactions, console logs, and custom events are all tracked</li>
+                        <li><strong>Real-time Updates:</strong> Session information updates in real-time</li>
+                    </ul>
+                    <div class="status">
+                        <strong>Current Session:</strong><br>
+                        Session ID: <span id="sessionId-about">Loading...</span><br>
+                        Page Load Time: <span id="pageLoadTime">Loading...</span>
+                    </div>
+                    <button class="button" onclick="trackCustomEvent('about_page_viewed', {section: 'about'})">
+                        Track About Page View
+                    </button>
+                `
+            },
+            demo: {
+                title: '🎯 Interactive Demo',
+                content: `
+                    <h2>Interactive Demo</h2>
+                    <p>Test various tracking features and see them in action.</p>
+                    <h3>Form Interaction</h3>
+                    <form onsubmit="handleFormSubmit(event)">
+                        <input type="text" id="demoInput" placeholder="Type something..." style="padding: 10px; border-radius: 5px; border: none; margin: 10px; width: 200px;">
+                        <button type="submit" class="button">Submit Form</button>
+                    </form>
+                    <h3>Custom Events</h3>
+                    <button class="button" onclick="trackCustomEvent('demo_button_1', {button: 'demo1'})">Demo Button 1</button>
+                    <button class="button secondary" onclick="trackCustomEvent('demo_button_2', {button: 'demo2'})">Demo Button 2</button>
+                    <button class="button success" onclick="trackCustomEvent('demo_button_3', {button: 'demo3'})">Demo Button 3</button>
+                    <div class="logs" id="demoLogs">
+                        <div>Demo events will appear here...</div>
+                    </div>
+                `
+            },
+            status: {
+                title: '📊 Session Status',
+                content: `
+                    <h2>Session Status & Debug Info</h2>
+                    <div class="status">
+                        <strong>Tracker Status:</strong><br>
+                        Initialized: <span id="trackerInitialized">Loading...</span><br>
+                        Session ID: <span id="sessionId-status">Loading...</span><br>
+                        End User ID: <span id="endUserId-status">Loading...</span><br>
+                        Current URL: <span id="currentUrl-status">Loading...</span><br>
+                        Connection Status: <span id="connectionStatus">Loading...</span>
+                    </div>
+                    <h3>Actions</h3>
+                    <button class="button" onclick="viewLogs()">View Logs</button>
+                    <button class="button secondary" onclick="testConnection()">Test Connection</button>
+                    <button class="button success" onclick="clearLogs()">Clear Logs</button>
+                    <div class="logs" id="statusLogs">
+                        <div>Status logs will appear here...</div>
+                    </div>
+                `
+            }
+        };
+        // Initialize the application
+        async function initApp() {
+            try {
+                console.log('Starting SPA initialization...');
+                // Check if SDK is loaded
+                if (typeof HumanBehaviorTracker === 'undefined') {
+                    throw new Error('HumanBehaviorTracker SDK not loaded. Check if dist/index.js exists.');
+                }
+                // Initialize HumanBehavior tracker
+                console.log('Initializing tracker...');
+                tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
+                    logLevel: 'debug',
+                    redactFields: ['password', 'credit_card']
+                });
+                console.log('Tracker created, waiting for initialization...');
+                // Wait for tracker to initialize
+                if (tracker.initializationPromise) {
+                    await tracker.initializationPromise;
+                    console.log('Tracker initialized successfully');
+                } else {
+                    console.log('No initialization promise, continuing...');
+                }
+                // Set up navigation
+                setupNavigation();
+                // Load initial page
+                loadPage('home');
+                // Update status periodically
+                setInterval(updateStatus, 2000);
+                console.log('SPA App initialized successfully');
+                addLog('SPA App initialized successfully');
+            } catch (error) {
+                console.error('Failed to initialize SPA app:', error);
+                addLog('Error initializing app: ' + error.message);
+                // Show error in content
+                document.getElementById('content').innerHTML = `
+                    <h2>Initialization Error</h2>
+                    <p>Failed to initialize the HumanBehavior SDK:</p>
+                    <div class="status">
+                        <strong>Error:</strong> ${error.message}<br>
+                        <strong>Stack:</strong> ${error.stack}
+                    </div>
+                    <button class="button" onclick="location.reload()">Reload Page</button>
+                `;
+            }
+        }
+        // Set up client-side navigation
+        function setupNavigation() {
+            const navButtons = document.querySelectorAll('.nav-btn');
+            navButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const page = button.dataset.page;
+                    navigateToPage(page);
+                });
+            });
+            // Handle browser back/forward buttons
+            window.addEventListener('popstate', (event) => {
+                const page = event.state?.page || 'home';
+                loadPage(page);
+                updateActiveNavButton(page);
+            });
+        }
+        // Navigate to a page
+        function navigateToPage(page) {
+            if (page === currentPage) return;
+            console.log(`Navigating from ${currentPage} to ${page}`);
+            // Update URL without page reload
+            history.pushState({ page }, pages[page].title, `#${page}`);
+            // Load the page content
+            loadPage(page);
+            // Update active nav button
+            updateActiveNavButton(page);
+            // Track navigation event
+            if (tracker && tracker.trackNavigationEvent) {
+                try {
+                    tracker.trackNavigationEvent('spa_navigation', currentPage, page);
+                } catch (error) {
+                    console.error('Failed to track navigation:', error);
+                }
+            }
+            currentPage = page;
+        }
+        // Load page content
+        function loadPage(page) {
+            const contentDiv = document.getElementById('content');
+            const pageData = pages[page];
+            if (!pageData) {
+                contentDiv.innerHTML = '<h2>Page not found</h2>';
+                return;
+            }
+            // Add fade-in animation
+            contentDiv.classList.remove('fade-in');
+            void contentDiv.offsetWidth; // Trigger reflow
+            contentDiv.classList.add('fade-in');
+            contentDiv.innerHTML = pageData.content;
+            // Update page title
+            document.title = `HumanBehavior SDK - ${pageData.title}`;
+            // Track page view
+            if (tracker && tracker.trackPageView) {
+                try {
+                    tracker.trackPageView();
+                } catch (error) {
+                    console.error('Failed to track pageview:', error);
+                }
+            }
+            addLog(`Navigated to ${page} page`);
+        }
+        // Update active navigation button
+        function updateActiveNavButton(page) {
+            document.querySelectorAll('.nav-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            const activeButton = document.querySelector(`[data-page="${page}"]`);
+            if (activeButton) {
+                activeButton.classList.add('active');
+            }
+        }
+        // Update status information
+        function updateStatus() {
+            if (!tracker) return;
+            try {
+                // Update session info
+                const sessionIdElements = document.querySelectorAll('#sessionId, #sessionId-about, #sessionId-status');
+                const sessionId = tracker.getSessionId ? tracker.getSessionId() : 'Not available';
+                sessionIdElements.forEach(el => {
+                    el.textContent = sessionId;
+                });
+                const endUserIdElements = document.querySelectorAll('#endUserId, #endUserId-status');
+                const endUserId = tracker.endUserId || 'Not set';
+                endUserIdElements.forEach(el => {
+                    el.textContent = endUserId;
+                });
+                const currentUrlElements = document.querySelectorAll('#currentUrl, #currentUrl-status');
+                const currentUrl = window.location.href;
+                currentUrlElements.forEach(el => {
+                    el.textContent = currentUrl;
+                });
+                const trackerInitialized = document.getElementById('trackerInitialized');
+                if (trackerInitialized) {
+                    trackerInitialized.textContent = tracker.initialized ? 'Yes' : 'No';
+                }
+                const connectionStatus = document.getElementById('connectionStatus');
+                if (connectionStatus && tracker.getConnectionStatus) {
+                    const status = tracker.getConnectionStatus();
+                    connectionStatus.textContent = status.blocked ? 'Blocked' : 'Connected';
+                }
+                const pageLoadTime = document.getElementById('pageLoadTime');
+                if (pageLoadTime) {
+                    pageLoadTime.textContent = new Date().toLocaleTimeString();
+                }
+            } catch (error) {
+                console.error('Error updating status:', error);
+            }
+        }
+        // Track custom events
+        async function trackCustomEvent(eventName, properties = {}) {
+            if (!tracker) {
+                addLog('Tracker not available');
+                return;
+            }
+            try {
+                if (tracker.customEvent) {
+                    await tracker.customEvent(eventName, properties);
+                    addLog(`Custom event tracked: ${eventName}`, properties);
+                } else {
+                    addLog('customEvent method not available');
+                }
+            } catch (error) {
+                addLog(`Error tracking event: ${error.message}`);
+            }
+        }
+        // Test console logging
+        function testConsoleLog() {
+            console.log('This is a test console log message');
+            addLog('Console log test executed');
+        }
+        function testConsoleError() {
+            console.error('This is a test console error message');
+            addLog('Console error test executed');
+        }
+        // Handle form submission
+        function handleFormSubmit(event) {
+            event.preventDefault();
+            const input = document.getElementById('demoInput');
+            const value = input.value;
+            trackCustomEvent('form_submitted', { value: value });
+            addLog(`Form submitted with value: ${value}`);
+            input.value = '';
+        }
+        // View logs
+        function viewLogs() {
+            if (tracker && tracker.viewLogs) {
+                tracker.viewLogs();
+            } else {
+                addLog('viewLogs method not available');
+            }
+        }
+        // Test connection
+        async function testConnection() {
+            if (!tracker) {
+                addLog('Tracker not available');
+                return;
+            }
+            try {
+                if (tracker.testConnection) {
+                    const result = await tracker.testConnection();
+                    addLog(`Connection test: ${result.success ? 'Success' : 'Failed'}`, result);
+                } else {
+                    addLog('testConnection method not available');
+                }
+            } catch (error) {
+                addLog(`Connection test error: ${error.message}`);
+            }
+        }
+        // Clear logs
+        function clearLogs() {
+            const logElements = document.querySelectorAll('.logs');
+            logElements.forEach(el => {
+                el.innerHTML = '<div>Logs cleared...</div>';
+            });
+        }
+        // Add log message
+        function addLog(message, data = null) {
+            const logElements = document.querySelectorAll('.logs');
+            const timestamp = new Date().toLocaleTimeString();
+            const logEntry = `<div>[${timestamp}] ${message}${data ? ' - ' + JSON.stringify(data) : ''}</div>`;
+            logElements.forEach(el => {
+                el.innerHTML += logEntry;
+                el.scrollTop = el.scrollHeight;
+            });
+            // Also log to console
+            console.log(`[${timestamp}] ${message}`, data);
+        }
+        // Initialize the app when the page loads
+        document.addEventListener('DOMContentLoaded', initApp);
+    </script>
+</body>
+</html>