humanbehavior-js 0.0.9 → 0.1.0

package/dist/cjs/index.js

@@ -4359,129 +4359,16 @@ class HumanBehaviorAPI {
             }
         });
     }
-    sendSessionComplete(sessionId) {
-        return __awaiter$1(this, void 0, void 0, function* () {
-            const response = yield fetch(`${this.baseUrl}/api/ingestion/sessionComplete`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${this.apiKey}`
-                },
-                body: JSON.stringify({ sessionId })
-            });
-            if (!response.ok) {
-                throw new Error(`Failed to send session complete: ${response.statusText}`);
-            }
-        });
-    }
-    sendCustomEvent(eventName, eventProperties, sessionId) {
-        return __awaiter$1(this, void 0, void 0, function* () {
-            const maxRetries = 3;
-            let retryCount = 0;
-            while (retryCount < maxRetries) {
-                try {
-                    const response = yield fetch(`${this.baseUrl}/api/ingestion/customEvent`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': `Bearer ${this.apiKey}`
-                        },
-                        body: JSON.stringify({
-                            name: eventName,
-                            properties: eventProperties,
-                            sessionId: sessionId,
-                            timestamp: new Date().toISOString()
-                        })
-                    });
-                    if (!response.ok) {
-                        throw new Error(`Failed to send custom event: ${response.statusText}`);
-                    }
-                    return yield response.json();
-                }
-                catch (error) {
-                    retryCount++;
-                    if (retryCount === maxRetries) {
-                        logError('Error sending custom event after max retries:', error);
-                        throw error;
-                    }
-                    // Exponential backoff
-                    yield new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000));
-                }
-            }
-        });
-    }
-    sendCustomEvents(events, sessionId) {
-        return __awaiter$1(this, void 0, void 0, function* () {
-            const maxRetries = 3;
-            let retryCount = 0;
-            while (retryCount < maxRetries) {
-                try {
-                    const response = yield fetch(`${this.baseUrl}/api/ingestion/customEvent/batch`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': `Bearer ${this.apiKey}`
-                        },
-                        body: JSON.stringify({
-                            events: events.map(event => (Object.assign(Object.assign({}, event), { sessionId: sessionId })))
-                        })
-                    });
-                    if (!response.ok) {
-                        throw new Error(`Failed to send custom events: ${response.statusText}`);
-                    }
-                    return yield response.json();
-                }
-                catch (error) {
-                    retryCount++;
-                    if (retryCount === maxRetries) {
-                        logError('Error sending custom events after max retries:', error);
-                        throw error;
-                    }
-                    // Exponential backoff
-                    yield new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000));
-                }
-            }
-        });
-    }
-    sendBeaconEvents(events, sessionId, isSessionComplete = false) {
+    sendBeaconEvents(events, sessionId) {
         const data = new URLSearchParams();
         data.append('events', encodeURIComponent(JSON.stringify(events)));
         data.append('sessionId', encodeURIComponent(sessionId));
         data.append('timestamp', encodeURIComponent(Date.now().toString()));
         data.append('apiKey', encodeURIComponent(this.apiKey));
-        if (isSessionComplete) {
-            logInfo('Session complete beacon sending');
-            localStorage.setItem('koalaware_session_complete', Date.now().toString());
-            data.append('sessionComplete', encodeURIComponent('true'));
-        }
         navigator.sendBeacon(`${this.baseUrl}/api/ingestion/events`, data);
         // KoalawareTracker.logToStorage(`Sending events beacon: ${this.baseUrl}/api/ingestion/events`);
         // KoalawareTracker.logToStorage(`Events beacon success: ${success}`);
     }
-    sendBeaconSessionComplete(sessionId) {
-        const data = new URLSearchParams();
-        data.append('sessionId', sessionId);
-        data.append('apiKey', this.apiKey);
-        data.append('sessionComplete', 'true');
-        navigator.sendBeacon(`${this.baseUrl}/api/ingestion/sessionComplete`, data);
-        // KoalawareTracker.logToStorage(`Sending completion beacon: ${this.baseUrl}/api/ingestion/sessionComplete`);
-        // KoalawareTracker.logToStorage(`Complete beacon success: ${success}`);
-    }
-    sendBeaconCustomEvent(eventName, eventProperties, sessionId) {
-        const data = new URLSearchParams();
-        data.append('name', encodeURIComponent(eventName));
-        data.append('properties', encodeURIComponent(JSON.stringify(eventProperties)));
-        data.append('sessionId', encodeURIComponent(sessionId));
-        data.append('timestamp', encodeURIComponent(new Date().toISOString()));
-        data.append('apiKey', encodeURIComponent(this.apiKey));
-        return navigator.sendBeacon(`${this.baseUrl}/api/ingestion/customEvent`, data);
-    }
-    sendBeaconCustomEvents(events, sessionId) {
-        const data = new URLSearchParams();
-        data.append('events', encodeURIComponent(JSON.stringify(events.map(event => (Object.assign(Object.assign({}, event), { sessionId: sessionId }))))));
-        data.append('apiKey', encodeURIComponent(this.apiKey));
-        return navigator.sendBeacon(`${this.baseUrl}/api/ingestion/customEvent/batch`, data);
-    }
 }
 
 // Redaction functionality for sensitive input fields
@@ -4900,6 +4787,40 @@ const redactionManager = new RedactionManager();
 // Check if we're in a browser environment
 const isBrowser = typeof window !== 'undefined';
 class HumanBehaviorTracker {
+    /**
+     * Initialize the HumanBehavior tracker
+     * This is the main entry point - call this once per page
+     */
+    static init(apiKey, options) {
+        // Return existing instance if already initialized
+        if (isBrowser && window.__humanBehaviorGlobalTracker) {
+            logDebug('Tracker already initialized, returning existing instance');
+            return window.__humanBehaviorGlobalTracker;
+        }
+        // Configure logging if specified
+        if (options === null || options === void 0 ? void 0 : options.logLevel) {
+            this.configureLogging({ level: options.logLevel });
+        }
+        // Create new tracker instance
+        const tracker = new HumanBehaviorTracker(apiKey, options === null || options === void 0 ? void 0 : options.ingestionUrl);
+        // Set redacted fields if specified
+        if (options === null || options === void 0 ? void 0 : options.redactFields) {
+            tracker.setRedactedFields(options.redactFields);
+        }
+        // Test connection (non-blocking)
+        if (isBrowser) {
+            const testUrl = tracker.api['baseUrl'] + '/api/ingestion/health';
+            fetch(testUrl, { method: 'HEAD' })
+                .then(() => logDebug('Connection test successful'))
+                .catch((error) => {
+                logWarn('Connection test failed - ad blocker may be active:', error.message);
+                tracker._connectionBlocked = true;
+            });
+        }
+        // Start tracking
+        tracker.start();
+        return tracker;
+    }
     constructor(apiKey, ingestionUrl) {
         this.eventIngestionQueue = [];
         this.queueSizeBytes = 0;
@@ -4914,60 +4835,77 @@ class HumanBehaviorTracker {
         this.initializationPromise = null;
         // Console tracking properties
         this.originalConsole = null;
-        this.originalLogger = null;
         this.consoleTrackingEnabled = false;
+        // Navigation tracking properties
+        this.navigationTrackingEnabled = false;
+        this.currentUrl = '';
+        this.previousUrl = '';
+        this.originalPushState = null;
+        this.originalReplaceState = null;
+        this.navigationListeners = [];
+        this._connectionBlocked = false;
         if (!apiKey) {
             throw new Error('Human Behavior API Key is required');
         }
-        // ========================================
-        // DEVELOPER: Choose your ingestion server
-        // ========================================
-        // Uncomment ONE of the following lines to select your server:
-        // AWS Development Server
-        const defaultIngestionUrl = 'http://3.137.217.33:3000';
-        // Vercel Production Server
-        // const defaultIngestionUrl = 'https://ingestion-server.vercel.app';
-        // Local Development Server
-        // const defaultIngestionUrl = 'http://localhost:3000';
+        // Initialize API
+        const defaultIngestionUrl = 'http://3.137.217.33:3000'; // AWS Development Server
         this.api = new HumanBehaviorAPI({
             apiKey: apiKey,
             ingestionUrl: ingestionUrl || defaultIngestionUrl
         });
         this.apiKey = apiKey;
         this.redactionManager = new RedactionManager();
-        // Check for existing session ID and last activity time in localStorage
-        const existingSessionId = isBrowser ? localStorage.getItem('human_behavior_session_id') : null;
-        const lastActivity = isBrowser ? localStorage.getItem('human_behavior_last_activity') : null;
-        // If we have a last activity time, check if it's within 30 minutes
-        const thirtyMinutesAgo = Date.now() - (30 * 60 * 1000);
-        const shouldUseExistingSession = lastActivity && parseInt(lastActivity) > thirtyMinutesAgo;
-        this.sessionId = (existingSessionId && shouldUseExistingSession) ? existingSessionId : v1();
-        // Store the session ID if it's new
-        if ((!existingSessionId || !shouldUseExistingSession) && isBrowser) {
-            localStorage.setItem('human_behavior_session_id', this.sessionId);
+        // Handle session restoration
+        if (isBrowser) {
+            const existingSessionId = localStorage.getItem('human_behavior_session_id');
+            const lastActivity = localStorage.getItem('human_behavior_last_activity');
+            const thirtyMinutesAgo = Date.now() - (30 * 60 * 1000);
+            if (existingSessionId && lastActivity && parseInt(lastActivity) > thirtyMinutesAgo) {
+                this.sessionId = existingSessionId;
+                logDebug(`Reusing existing session: ${this.sessionId}`);
+            }
+            else {
+                this.sessionId = v1();
+                logDebug(`Creating new session: ${this.sessionId}`);
+                localStorage.setItem('human_behavior_session_id', this.sessionId);
+            }
+            this.currentUrl = window.location.href;
+            window.__humanBehaviorGlobalTracker = this;
+        }
+        else {
+            this.sessionId = v1();
         }
-        // Start initialization immediately
+        // Start initialization
         this.initializationPromise = this.init();
     }
     init() {
         return __awaiter$1(this, void 0, void 0, function* () {
             try {
                 const userId = this.getCookie(`human_behavior_end_user_id_${this.apiKey}`);
+                logDebug(`Initializing with sessionId: ${this.sessionId}, userId: ${userId}`);
                 const { sessionId, endUserId } = yield this.api.init(this.sessionId, userId);
-                this.sessionId = sessionId;
+                // Check if server returned a different session ID
+                if (sessionId !== this.sessionId) {
+                    logDebug(`Server returned different sessionId: ${sessionId} (client had: ${this.sessionId})`);
+                    this.sessionId = sessionId;
+                    // Update localStorage with server's session ID
+                    if (isBrowser) {
+                        localStorage.setItem('human_behavior_session_id', this.sessionId);
+                    }
+                }
                 this.endUserId = endUserId;
                 this.setCookie(`human_behavior_end_user_id_${this.apiKey}`, endUserId, 365);
                 // Only setup browser-specific handlers when in browser environment
                 if (isBrowser) {
                     this.setupPageUnloadHandler();
-                    this.start();
+                    this.setupNavigationTracking();
                     this.processRejectedEvents();
                 }
                 else {
                     logWarn('HumanBehaviorTracker initialized in a non-browser environment. Session tracking is disabled.');
                 }
                 this.initialized = true;
-                logInfo('HumanBehaviorTracker initialized');
+                logInfo(`HumanBehaviorTracker initialized with sessionId: ${this.sessionId}, endUserId: ${endUserId}`);
             }
             catch (error) {
                 logError('Failed to initialize HumanBehaviorTracker:', error);
@@ -4983,6 +4921,171 @@ class HumanBehaviorTracker {
             yield this.initializationPromise;
         });
     }
+    /**
+     * Setup navigation event tracking for SPA navigation
+     */
+    setupNavigationTracking() {
+        if (!isBrowser || this.navigationTrackingEnabled)
+            return;
+        this.navigationTrackingEnabled = true;
+        logDebug('Setting up navigation tracking');
+        // Store original history methods
+        this.originalPushState = history.pushState;
+        this.originalReplaceState = history.replaceState;
+        // Override pushState to capture programmatic navigation
+        history.pushState = (...args) => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            // Call original method
+            this.originalPushState.apply(history, args);
+            // Track navigation event
+            this.trackNavigationEvent('pushState', this.previousUrl, this.currentUrl);
+        };
+        // Override replaceState to capture programmatic navigation
+        history.replaceState = (...args) => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            // Call original method
+            this.originalReplaceState.apply(history, args);
+            // Track navigation event
+            this.trackNavigationEvent('replaceState', this.previousUrl, this.currentUrl);
+        };
+        // Listen for popstate events (back/forward navigation)
+        const popstateListener = () => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            this.trackNavigationEvent('popstate', this.previousUrl, this.currentUrl);
+        };
+        window.addEventListener('popstate', popstateListener);
+        this.navigationListeners.push(() => {
+            window.removeEventListener('popstate', popstateListener);
+        });
+        // Listen for hashchange events
+        const hashchangeListener = () => {
+            this.previousUrl = this.currentUrl;
+            this.currentUrl = window.location.href;
+            this.trackNavigationEvent('hashchange', this.previousUrl, this.currentUrl);
+        };
+        window.addEventListener('hashchange', hashchangeListener);
+        this.navigationListeners.push(() => {
+            window.removeEventListener('hashchange', hashchangeListener);
+        });
+        // Track initial page load
+        this.trackNavigationEvent('pageLoad', '', this.currentUrl);
+    }
+    /**
+     * Track navigation events and send custom events
+     */
+    trackNavigationEvent(type, fromUrl, toUrl) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.initialized)
+                return;
+            try {
+                const navigationData = {
+                    type: type,
+                    from: fromUrl,
+                    to: toUrl,
+                    timestamp: new Date().toISOString(),
+                    pathname: window.location.pathname,
+                    search: window.location.search,
+                    hash: window.location.hash,
+                    referrer: document.referrer
+                };
+                // Add navigation event to the main event stream
+                yield this.addEvent({
+                    type: 5, // Custom event type
+                    data: {
+                        payload: Object.assign({ eventType: 'navigation' }, navigationData)
+                    },
+                    timestamp: Date.now()
+                });
+                logDebug(`Navigation tracked: ${type} from ${fromUrl} to ${toUrl}`);
+            }
+            catch (error) {
+                logError('Failed to track navigation event:', error);
+            }
+        });
+    }
+    /**
+     * Track a page view event (PostHog-style)
+     */
+    trackPageView(url) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.initialized)
+                return;
+            try {
+                const pageViewData = {
+                    url: url || window.location.href,
+                    pathname: window.location.pathname,
+                    search: window.location.search,
+                    hash: window.location.hash,
+                    referrer: document.referrer,
+                    timestamp: new Date().toISOString()
+                };
+                // Add pageview event to the main event stream
+                yield this.addEvent({
+                    type: 5, // Custom event type
+                    data: {
+                        payload: Object.assign({ eventType: 'pageview' }, pageViewData)
+                    },
+                    timestamp: Date.now()
+                });
+                logDebug(`Pageview tracked: ${pageViewData.url}`);
+            }
+            catch (error) {
+                logError('Failed to track pageview event:', error);
+            }
+        });
+    }
+    /**
+     * Track a custom event (PostHog-style)
+     */
+    customEvent(eventName, properties) {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.initialized)
+                return;
+            try {
+                const customEventData = {
+                    eventName: eventName,
+                    properties: properties || {},
+                    timestamp: new Date().toISOString(),
+                    url: window.location.href,
+                    pathname: window.location.pathname
+                };
+                // Add custom event to the main event stream
+                yield this.addEvent({
+                    type: 5, // Custom event type
+                    data: {
+                        payload: Object.assign({ eventType: 'custom' }, customEventData)
+                    },
+                    timestamp: Date.now()
+                });
+                logDebug(`Custom event tracked: ${eventName}`, properties);
+            }
+            catch (error) {
+                logError('Failed to track custom event:', error);
+            }
+        });
+    }
+    /**
+     * Cleanup navigation tracking
+     */
+    cleanupNavigationTracking() {
+        if (!this.navigationTrackingEnabled)
+            return;
+        // Restore original history methods
+        if (this.originalPushState) {
+            history.pushState = this.originalPushState;
+        }
+        if (this.originalReplaceState) {
+            history.replaceState = this.originalReplaceState;
+        }
+        // Remove event listeners
+        this.navigationListeners.forEach(cleanup => cleanup());
+        this.navigationListeners = [];
+        this.navigationTrackingEnabled = false;
+        logDebug('Navigation tracking cleaned up');
+    }
     static logToStorage(message) {
         logInfo(message);
     }
@@ -5016,13 +5119,6 @@ class HumanBehaviorTracker {
             warn: console.warn,
             error: console.error
         };
-        // Store original logger methods
-        this.originalLogger = {
-            error: logError,
-            warn: logWarn,
-            info: logInfo,
-            debug: logDebug
-        };
         // Override console methods to capture ALL console output (including logger output)
         console.log = (...args) => {
             this.trackConsoleEvent('log', args);
@@ -5037,44 +5133,47 @@ class HumanBehaviorTracker {
             this.originalConsole.error(...args);
         };
         this.consoleTrackingEnabled = true;
-        this.originalLogger.debug('Console tracking enabled');
+        logDebug('Console tracking enabled');
     }
     /**
      * Disable console event tracking
      */
     disableConsoleTracking() {
-        if (!isBrowser || !this.consoleTrackingEnabled || !this.originalConsole)
+        if (!isBrowser || !this.consoleTrackingEnabled)
             return;
         // Restore original console methods
-        console.log = this.originalConsole.log;
-        console.warn = this.originalConsole.warn;
-        console.error = this.originalConsole.error;
+        if (this.originalConsole) {
+            console.log = this.originalConsole.log;
+            console.warn = this.originalConsole.warn;
+            console.error = this.originalConsole.error;
+        }
         this.consoleTrackingEnabled = false;
-        this.originalConsole = null;
-        this.originalLogger = null;
+        logDebug('Console tracking disabled');
     }
-    /**
-     * Track console events
-     */
     trackConsoleEvent(level, args) {
         if (!this.initialized)
             return;
-        const consoleEvent = {
-            type: 5, // Custom event type
-            data: {
-                payload: {
-                    type: 'console',
-                    level: level,
-                    message: args.map(arg => typeof arg === 'string' ? arg :
-                        typeof arg === 'object' ? JSON.stringify(arg) :
-                            String(arg)).join(' '),
-                    timestamp: Date.now(),
-                    url: window.location.href
-                }
-            },
-            timestamp: Date.now()
-        };
-        this.addEvent(consoleEvent);
+        try {
+            const consoleData = {
+                level: level,
+                message: args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' '),
+                timestamp: new Date().toISOString(),
+                url: window.location.href
+            };
+            // Add console event to the main event stream
+            this.addEvent({
+                type: 5, // Custom event type
+                data: {
+                    payload: Object.assign({ eventType: 'console' }, consoleData)
+                },
+                timestamp: Date.now()
+            }).catch(error => {
+                logError('Failed to track console event:', error);
+            });
+        }
+        catch (error) {
+            logError('Error in trackConsoleEvent:', error);
+        }
     }
     setupPageUnloadHandler() {
         if (!isBrowser)
@@ -5090,15 +5189,18 @@ class HumanBehaviorTracker {
         });
         // Handle actual page unload/close
         window.addEventListener('beforeunload', () => {
-            // Update last activity time
-            localStorage.setItem('human_behavior_last_activity', Date.now().toString());
             // Send final events
             this.api.sendBeaconEvents(this.eventIngestionQueue, this.sessionId);
         });
-        // Update activity timestamp periodically
-        setInterval(() => {
+        // Update activity timestamp on user interaction (not on page load)
+        const updateActivity = () => {
             localStorage.setItem('human_behavior_last_activity', Date.now().toString());
-        }, 60000); // Update every minute
+        };
+        // Listen for user interactions to update activity timestamp
+        window.addEventListener('click', updateActivity);
+        window.addEventListener('keydown', updateActivity);
+        window.addEventListener('scroll', updateActivity);
+        window.addEventListener('mousemove', updateActivity);
     }
     viewLogs() {
         try {
@@ -5136,12 +5238,6 @@ class HumanBehaviorTracker {
             yield this.api.sendUserAuth(this.endUserId, this.userProperties, this.sessionId, authFields);
         });
     }
-    customEvent(eventName_1) {
-        return __awaiter$1(this, arguments, void 0, function* (eventName, eventProperties = {}) {
-            yield this.ensureInitialized();
-            this.api.sendBeaconCustomEvent(eventName, eventProperties, this.sessionId);
-        });
-    }
     start() {
         return __awaiter$1(this, void 0, void 0, function* () {
             yield this.ensureInitialized();
@@ -5178,6 +5274,8 @@ class HumanBehaviorTracker {
             }
             // Disable console tracking
             this.disableConsoleTracking();
+            // Cleanup navigation tracking
+            this.cleanupNavigationTracking();
         });
     }
     addEvent(event) {
@@ -5220,7 +5318,7 @@ class HumanBehaviorTracker {
     }
     flush() {
         return __awaiter$1(this, void 0, void 0, function* () {
-            var _a;
+            var _a, _b, _c, _d;
             // Prevent concurrent flushes
             if (this.isProcessing || !this.initialized) {
                 return;
@@ -5243,6 +5341,14 @@ class HumanBehaviorTracker {
                             this.rejectedEvents.push(...eventsToProcess);
                             this.processRejectedEvents();
                         }
+                        else if (((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('ERR_BLOCKED_BY_CLIENT')) ||
+                            ((_c = error.message) === null || _c === void 0 ? void 0 : _c.includes('Failed to fetch')) ||
+                            ((_d = error.message) === null || _d === void 0 ? void 0 : _d.includes('NetworkError'))) {
+                            // Handle ad blocker or network issues gracefully
+                            logWarn('Request blocked by ad blocker or network issue, storing events for retry');
+                            this.rejectedEvents.push(...eventsToProcess);
+                            // Don't process rejected events immediately to avoid spam
+                        }
                         else {
                             throw error;
                         }
@@ -5315,6 +5421,61 @@ class HumanBehaviorTracker {
     getRedactedFields() {
         return this.redactionManager.getSelectedFields();
     }
+    /**
+     * Get the current session ID
+     */
+    getSessionId() {
+        return this.sessionId;
+    }
+    /**
+     * Get the current URL being tracked
+     */
+    getCurrentUrl() {
+        return this.currentUrl;
+    }
+    /**
+     * Test if the tracker can reach the ingestion server
+     */
+    testConnection() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            try {
+                yield this.api.init(this.sessionId, this.endUserId);
+                return { success: true };
+            }
+            catch (error) {
+                return {
+                    success: false,
+                    error: error.message || 'Unknown error'
+                };
+            }
+        });
+    }
+    /**
+     * Get connection status and recommendations
+     */
+    getConnectionStatus() {
+        const recommendations = [];
+        let blocked = false;
+        // Check if we have rejected events (might indicate blocking)
+        if (this.rejectedEvents.length > 0) {
+            blocked = true;
+            recommendations.push('Some requests may be blocked by ad blockers');
+        }
+        // Check if connection was blocked during initialization
+        if (this._connectionBlocked) {
+            blocked = true;
+            recommendations.push('Initial connection test failed - ad blocker may be active');
+        }
+        // Check if we're in a browser environment
+        if (typeof window === 'undefined') {
+            recommendations.push('Not running in browser environment');
+        }
+        // Check if navigator.sendBeacon is available
+        if (typeof navigator.sendBeacon === 'undefined') {
+            recommendations.push('sendBeacon not available, using fetch fallback');
+        }
+        return { blocked, recommendations };
+    }
 }
 // Only expose to window object in browser environments
 if (isBrowser) {