@finatic/client 0.0.141 → 0.0.142

package/dist/types/core/client/ApiClient.d.ts

@@ -16,6 +16,8 @@ export declare class ApiClient {
     private tradingContext;
     private companyId;
     private csrfToken;
+    private readonly logger;
+    private buildLoggerExtra;
     constructor(baseUrl: string, deviceInfo?: DeviceInfo);
     /**
      * Set session context (session ID, company ID, CSRF token)

package/dist/types/core/client/FinaticConnect.d.ts

@@ -27,6 +27,8 @@ export declare class FinaticConnect extends EventEmitter {
     private readonly SESSION_VALIDATION_TIMEOUT;
     private readonly SESSION_REFRESH_BUFFER_HOURS;
     private sessionStartTime;
+    private readonly logger;
+    private buildLoggerExtra;
     constructor(options: FinaticConnectOptions, deviceInfo?: DeviceInfo);
     private linkUserToSession;
     /**

package/dist/types/core/portal/PortalUI.d.ts

@@ -6,7 +6,9 @@ export declare class PortalUI {
     private portalOrigin;
     private options?;
     private originalBodyStyle;
+    private readonly logger;
     constructor(portalUrl: string);
+    private buildLoggerExtra;
     private createContainer;
     /**
      * Lock background scrolling by setting overflow: hidden on body

package/dist/types/index.d.ts

@@ -8,4 +8,5 @@ export { PaginatedResult } from './types/common/pagination';
 export * from './utils/errors';
 export * from './utils/events';
 export * from './utils/themeUtils';
+export * from './lib/logger';
 export { portalThemePresets } from './themes/portalPresets';

package/dist/types/lib/logger/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logger';
+export * from './logger.types';

package/dist/types/lib/logger/logger.d.ts

@@ -0,0 +1,4 @@
+import { Logger, LoggerExtra, LoggerMetadata, LoggerOptions, LogLevel } from './logger.types';
+export declare const setupLogger: (nameOrOptions: string | LoggerOptions, level?: LogLevel, defaultMetadata?: LoggerMetadata) => Logger;
+export declare const buildLoggerExtra: (metadata: LoggerMetadata) => LoggerExtra;
+export declare const logStartEnd: (logger: Logger) => <Args extends unknown[], ReturnType>(fn: (...args: Args) => ReturnType | Promise<ReturnType>) => (...args: Args) => Promise<ReturnType>;

package/dist/types/lib/logger/logger.types.d.ts

@@ -0,0 +1,28 @@
+export type LogLevel = 'silent' | 'error' | 'warn' | 'info' | 'debug';
+export interface LoggerMetadata {
+    [key: string]: unknown;
+}
+export interface LoggerExtra {
+    metadata?: LoggerMetadata;
+    module?: string;
+    function?: string;
+    event?: string;
+    duration_ms?: number;
+    error?: unknown;
+    [key: string]: unknown;
+}
+export interface LoggerOptions {
+    name: string;
+    level?: LogLevel;
+    defaultMetadata?: LoggerMetadata;
+}
+export interface Logger {
+    getLevel: () => LogLevel;
+    setLevel: (level: LogLevel) => void;
+    debug: (message: string, extra?: LoggerExtra) => void;
+    info: (message: string, extra?: LoggerExtra) => void;
+    warn: (message: string, extra?: LoggerExtra) => void;
+    error: (message: string, extra?: LoggerExtra) => void;
+    exception: (message: string, error: unknown, extra?: LoggerExtra) => void;
+}
+export type LogVerbosity = 0 | 1 | 2 | 3;

package/dist/types/mocks/MockApiClient.d.ts

@@ -19,6 +19,8 @@ export declare class MockApiClient {
     private csrfToken;
     private mockDataProvider;
     private readonly mockApiOnly;
+    private readonly logger;
+    private buildLoggerExtra;
     constructor(baseUrl: string, deviceInfo?: DeviceInfo, mockConfig?: MockConfig);
     /**
      * Store tokens after successful authentication

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finatic/client",
-  "version": "0.0.141",
+  "version": "0.0.142",
   "description": "Finatic Client SDK for browser integration",
   "type": "module",
   "publishConfig": {

package/src/core/client/ApiClient.ts

@@ -31,6 +31,7 @@ import { TradingContext } from '../../types/api/orders';
 import { ApiPaginationInfo, PaginatedResult } from '../../types/common/pagination';
 import { ApiResponse } from '../../types/api/core';
 import { PortalUrlResponse } from '../../types/api/core';
+import { setupLogger, buildLoggerExtra, LoggerExtra } from '../../lib/logger';
 import {
   DeviceInfo,
   SessionState,
@@ -70,6 +71,17 @@ export class ApiClient {
   // Session and company context
   private companyId: string | null = null;
   private csrfToken: string | null = null;
+  private readonly logger = setupLogger('FinaticClientSDK.ApiClient', undefined, {
+    codebase: 'FinaticClientSDK',
+  });
+
+  private buildLoggerExtra(functionName: string, metadata?: Record<string, unknown>): LoggerExtra {
+    return {
+      module: 'ApiClient',
+      function: functionName,
+      ...(metadata ? buildLoggerExtra(metadata) : {}),
+    };
+  }
 
   constructor(baseUrl: string, deviceInfo?: DeviceInfo) {
     this.baseUrl = baseUrl;
@@ -223,15 +235,11 @@ export class ApiClient {
       }
     });
 
-    // Debug logging for development
-    if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      console.log('Request to:', url.toString());
-      console.log('Safari-safe headers:', safariSafeHeaders);
-      console.log('Browser:', navigator.userAgent);
-      console.log('Session ID:', this.currentSessionId);
-      console.log('Company ID:', this.companyId);
-      console.log('CSRF Token:', this.csrfToken);
-    }
+    this.logger.debug('Dispatching API request', this.buildLoggerExtra('request', {
+      url: url.toString(),
+      method: options.method,
+      has_body: Boolean(options.body),
+    }));
 
     const response = await fetch(url.toString(), {
       method: options.method,
@@ -239,16 +247,19 @@ export class ApiClient {
       body: options.body ? JSON.stringify(options.body) : undefined,
     });
 
-    // Debug logging for response
-    if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      console.log('Response status:', response.status);
-      console.log('Response headers:', Object.fromEntries(response.headers.entries()));
-      console.log('Request was made with headers:', safariSafeHeaders);
-    }
+    this.logger.debug('Received API response', this.buildLoggerExtra('request', {
+      url: url.toString(),
+      status: response.status,
+    }));
 
     if (!response.ok) {
       const error = await response.json();
-      throw this.handleError(response.status, error);
+      const apiError = this.handleError(response.status, error);
+      this.logger.exception('API request failed', apiError, this.buildLoggerExtra('request', {
+        url: url.toString(),
+        status: response.status,
+      }));
+      throw apiError;
     }
 
     const data = await response.json();
@@ -261,12 +272,22 @@ export class ApiClient {
         // Add context that this is an order-related error
         data._isOrderError = true;
       }
-      throw this.handleError(data.status_code || 500, data);
+      const apiError = this.handleError(data.status_code || 500, data);
+      this.logger.exception('API response indicated failure', apiError, this.buildLoggerExtra('request', {
+        url: url.toString(),
+        status: data.status_code || 500,
+      }));
+      throw apiError;
     }
 
     // Check if the response has a status_code field indicating an error (4xx or 5xx)
     if (data && typeof data === 'object' && 'status_code' in data && data.status_code >= 400) {
-      throw this.handleError(data.status_code, data);
+      const apiError = this.handleError(data.status_code, data);
+      this.logger.exception('API status code error', apiError, this.buildLoggerExtra('request', {
+        url: url.toString(),
+        status: data.status_code,
+      }));
+      throw apiError;
     }
 
     // Check if the response has errors field with content
@@ -278,7 +299,12 @@ export class ApiClient {
       Array.isArray(data.errors) &&
       data.errors.length > 0
     ) {
-      throw this.handleError(data.status_code || 500, data);
+      const apiError = this.handleError(data.status_code || 500, data);
+      this.logger.exception('API response contained errors', apiError, this.buildLoggerExtra('request', {
+        url: url.toString(),
+        status: data.status_code || 500,
+      }));
+      throw apiError;
     }
 
     return data;

package/src/core/client/FinaticConnect.ts

@@ -27,6 +27,17 @@ import {
 import { FinaticConnectOptions, PortalOptions } from '../../types/connect';
 import { appendThemeToURL } from '../../utils/themeUtils';
 import { appendBrokerFilterToURL } from '../../utils/brokerUtils';
+import { setupLogger, buildLoggerExtra, LoggerExtra } from '../../lib/logger';
+
+const finaticConnectLogger = setupLogger('FinaticClientSDK.FinaticConnect', undefined, {
+  codebase: 'FinaticClientSDK',
+});
+
+const makeFinaticConnectExtra = (functionName: string, metadata?: Record<string, unknown>): LoggerExtra => ({
+  module: 'FinaticConnect',
+  function: functionName,
+  ...(metadata ? buildLoggerExtra(metadata) : {}),
+});
 // Supabase import removed - SDK no longer depends on Supabase
 
 interface DeviceInfo {
@@ -57,6 +68,16 @@ export class FinaticConnect extends EventEmitter {
   private readonly SESSION_REFRESH_BUFFER_HOURS = 16; // Refresh session at 16 hours
   private sessionStartTime: number | null = null;
 
+  private readonly logger = finaticConnectLogger;
+
+  private buildLoggerExtra(functionName: string, metadata?: Record<string, unknown>): LoggerExtra {
+    return {
+      module: 'FinaticConnect',
+      function: functionName,
+      ...(metadata ? buildLoggerExtra(metadata) : {}),
+    };
+  }
+
   constructor(options: FinaticConnectOptions, deviceInfo?: DeviceInfo) {
     super();
     this.options = options;
@@ -112,7 +133,7 @@ export class FinaticConnect extends EventEmitter {
   private async linkUserToSession(userId: string): Promise<boolean> {
     try {
       if (!this.sessionId) {
-        console.error('No session ID available for user linking');
+        this.logger.error('No session ID available for user linking', this.buildLoggerExtra('linkUserToSession'));
         return false;
       }
 
@@ -126,14 +147,20 @@ export class FinaticConnect extends EventEmitter {
       });
 
       if (response.error) {
-        console.error('Failed to link user to session:', response.error);
+        this.logger.error('Failed to link user to session', {
+          ...this.buildLoggerExtra('linkUserToSession', {
+            session_id: this.sessionId,
+            user_id: userId,
+          }),
+          error: response.error,
+        });
         return false;
       }
 
-      console.log('User linked to session successfully');
+      this.logger.info('User linked to session successfully', this.buildLoggerExtra('linkUserToSession', { session_id: this.sessionId, user_id: userId }));
       return true;
     } catch (error) {
-      console.error('Error linking user to session:', error);
+      this.logger.exception('Error linking user to session', error, this.buildLoggerExtra('linkUserToSession', { session_id: this.sessionId, user_id: userId }));
       return false;
     }
   }
@@ -322,7 +349,7 @@ export class FinaticConnect extends EventEmitter {
     // Safari-specific fix: Clear instance if it exists but has no valid session
     // This prevents stale instances from interfering with new requests
     if (FinaticConnect.instance && !FinaticConnect.instance.sessionId) {
-      console.log('[FinaticConnect] Clearing stale instance for Safari compatibility');
+      finaticConnectLogger.debug('Clearing stale instance for Safari compatibility', makeFinaticConnectExtra('init'));
       FinaticConnect.instance = null;
     }
 
@@ -390,7 +417,7 @@ export class FinaticConnect extends EventEmitter {
             // Emit success event
             FinaticConnect.instance.emit('success', normalizedUserId);
           } else {
-            console.warn('Failed to link user to session during initialization');
+            finaticConnectLogger.warn('Failed to link user to session during initialization', makeFinaticConnectExtra('init', { user_id: normalizedUserId }));
           }
         } catch (error) {
           FinaticConnect.instance.emit('error', error as Error);
@@ -423,7 +450,7 @@ export class FinaticConnect extends EventEmitter {
       // Try to link user to session
       const linked = await this.linkUserToSession(userId);
       if (!linked) {
-        console.warn('Failed to link user to session during initialization');
+        this.logger.warn('Failed to link user to session during initialization', this.buildLoggerExtra('initializeWithUser', { user_id: userId }));
         // Don't throw error, just continue without authentication
         return;
       }
@@ -537,7 +564,7 @@ export class FinaticConnect extends EventEmitter {
             // Try to link user to session via API
             const linked = await this.linkUserToSession(userId);
             if (!linked) {
-              console.warn('Failed to link user to session, but continuing with authentication');
+              this.logger.warn('Failed to link user to session, continuing with authentication', this.buildLoggerExtra('openPortal.onSuccess', { user_id: userId }));
             }
 
             // Emit portal success event
@@ -573,7 +600,13 @@ export class FinaticConnect extends EventEmitter {
           options?.onClose?.();
         },
         onEvent: (type: string, data: any) => {
-          console.log('[FinaticConnect] Portal event received:', type, data);
+          this.logger.debug('Portal event received', {
+            ...this.buildLoggerExtra('openPortal.onEvent', {
+              event_type: type,
+              payload_present: Boolean(data),
+            }),
+            event: 'portal-event',
+          });
 
           // Emit generic event
           this.emit('event', type, data);
@@ -1293,7 +1326,7 @@ export class FinaticConnect extends EventEmitter {
       this.validateSessionKeepAlive();
     }, this.SESSION_KEEP_ALIVE_INTERVAL);
 
-    console.log('[FinaticConnect] Session keep-alive started (5-minute intervals)');
+    this.logger.debug('Session keep-alive started', this.buildLoggerExtra('startSessionKeepAlive', { interval_ms: this.SESSION_KEEP_ALIVE_INTERVAL }));
   }
 
   /**
@@ -1303,7 +1336,7 @@ export class FinaticConnect extends EventEmitter {
     if (this.sessionKeepAliveInterval) {
       clearInterval(this.sessionKeepAliveInterval);
       this.sessionKeepAliveInterval = null;
-      console.log('[FinaticConnect] Session keep-alive stopped');
+      this.logger.debug('Session keep-alive stopped', this.buildLoggerExtra('stopSessionKeepAlive'));
     }
   }
 
@@ -1312,12 +1345,12 @@ export class FinaticConnect extends EventEmitter {
    */
   private async validateSessionKeepAlive(): Promise<void> {
     if (!this.sessionId || !(await this.isAuthenticated())) {
-      console.log('[FinaticConnect] Session keep-alive skipped - no active session');
+      this.logger.debug('Session keep-alive skipped - no active session', this.buildLoggerExtra('validateSessionKeepAlive'));
       return;
     }
 
     try {
-      console.log('[FinaticConnect] Validating session for keep-alive...');
+      this.logger.debug('Validating session for keep-alive', this.buildLoggerExtra('validateSessionKeepAlive', { session_id: this.sessionId }));
 
       // Check if we need to refresh the session (at 16 hours)
       if (this.shouldRefreshSession()) {
@@ -1326,10 +1359,10 @@ export class FinaticConnect extends EventEmitter {
       }
 
       // Session keep-alive - assume session is active if we have a session ID
-      console.log('[FinaticConnect] Session keep-alive successful');
+      this.logger.debug('Session keep-alive successful', this.buildLoggerExtra('validateSessionKeepAlive', { session_id: this.sessionId }));
       this.currentSessionState = 'active';
     } catch (error) {
-      console.warn('[FinaticConnect] Session keep-alive error:', error);
+      this.logger.exception('Session keep-alive error', error, this.buildLoggerExtra('validateSessionKeepAlive', { session_id: this.sessionId }));
       // Don't throw errors during keep-alive - just log them
     }
   }
@@ -1346,15 +1379,17 @@ export class FinaticConnect extends EventEmitter {
     const hoursUntilRefresh = this.SESSION_REFRESH_BUFFER_HOURS - sessionAgeHours;
 
     if (hoursUntilRefresh <= 0) {
-      console.log(
-        `[FinaticConnect] Session is ${sessionAgeHours.toFixed(1)} hours old - triggering refresh`
-      );
+      this.logger.info('Session age threshold exceeded - triggering refresh', this.buildLoggerExtra('shouldRefreshSession', {
+        session_age_hours: Number(sessionAgeHours.toFixed(1)),
+      }));
       return true;
     }
 
     // Log when refresh will occur (every 5 minutes during keep-alive)
     if (hoursUntilRefresh <= 1) {
-      console.log(`[FinaticConnect] Session will refresh in ${hoursUntilRefresh.toFixed(1)} hours`);
+      this.logger.debug('Session refresh scheduled', this.buildLoggerExtra('shouldRefreshSession', {
+        hours_until_refresh: Number(hoursUntilRefresh.toFixed(1)),
+      }));
     }
 
     return false;
@@ -1365,26 +1400,35 @@ export class FinaticConnect extends EventEmitter {
    */
   private async refreshSessionAutomatically(): Promise<void> {
     if (!this.sessionId) {
-      console.warn('[FinaticConnect] Cannot refresh session - no session ID');
+      this.logger.warn('Cannot refresh session - missing session ID', this.buildLoggerExtra('refreshSessionAutomatically'));
       return;
     }
 
     try {
-      console.log('[FinaticConnect] Automatically refreshing session (16+ hours old)...');
+      this.logger.info('Automatically refreshing session', this.buildLoggerExtra('refreshSessionAutomatically', {
+        session_id: this.sessionId,
+      }));
       const response = await this.apiClient.refreshSession();
 
       if (response.success) {
-        console.log('[FinaticConnect] Session automatically refreshed successfully');
-        console.log('[FinaticConnect] New session expires at:', response.response_data.expires_at);
+        this.logger.info('Session automatically refreshed successfully', this.buildLoggerExtra('refreshSessionAutomatically', {
+          session_id: this.sessionId,
+          status: response.response_data.status,
+          expires_at: response.response_data.expires_at,
+        }));
         this.currentSessionState = response.response_data.status;
 
         // Update session start time to prevent immediate re-refresh
         this.sessionStartTime = Date.now();
       } else {
-        console.warn('[FinaticConnect] Automatic session refresh failed');
+        this.logger.warn('Automatic session refresh failed', this.buildLoggerExtra('refreshSessionAutomatically', {
+          session_id: this.sessionId,
+        }));
       }
     } catch (error) {
-      console.warn('[FinaticConnect] Automatic session refresh error:', error);
+      this.logger.exception('Automatic session refresh error', error, this.buildLoggerExtra('refreshSessionAutomatically', {
+        session_id: this.sessionId,
+      }));
       // Don't throw errors during automatic refresh - just log them
     }
   }
@@ -1406,7 +1450,9 @@ export class FinaticConnect extends EventEmitter {
   private async handleVisibilityChange(): Promise<void> {
     // For 24-hour sessions, we don't want to complete sessions on visibility changes
     // This prevents sessions from being closed when users switch tabs or apps
-    console.log('[FinaticConnect] Page visibility changed to:', document.visibilityState);
+    this.logger.debug('Page visibility changed', this.buildLoggerExtra('handleVisibilityChange', {
+      visibility_state: document.visibilityState,
+    }));
 
     // Only pause keep-alive when hidden, but don't complete the session
     if (document.visibilityState === 'hidden') {
@@ -1431,7 +1477,7 @@ export class FinaticConnect extends EventEmitter {
 
       if (isMockMode) {
         // Mock the completion response
-        console.log('[FinaticConnect] Mock session completion for session:', sessionId);
+        this.logger.debug('Mock session completion', this.buildLoggerExtra('completeSession', { session_id: sessionId }));
         return;
       }
 
@@ -1444,13 +1490,16 @@ export class FinaticConnect extends EventEmitter {
       });
 
       if (response.ok) {
-        console.log('[FinaticConnect] Session completed successfully');
+        this.logger.info('Session completed successfully', this.buildLoggerExtra('completeSession', { session_id: sessionId }));
       } else {
-        console.warn('[FinaticConnect] Failed to complete session:', response.status);
+        this.logger.warn('Failed to complete session', this.buildLoggerExtra('completeSession', {
+          session_id: sessionId,
+          response_status: response.status,
+        }));
       }
     } catch (error) {
       // Silent failure - don't throw errors during cleanup
-      console.warn('[FinaticConnect] Session cleanup failed:', error);
+      this.logger.exception('Session cleanup failed', error, this.buildLoggerExtra('completeSession', { session_id: sessionId }));
     }
   }
 

package/src/core/portal/PortalUI.ts

@@ -1,3 +1,9 @@
+import { setupLogger, buildLoggerExtra, LoggerExtra } from '../../lib/logger';
+
+const portalLogger = setupLogger('FinaticClientSDK.PortalUI', undefined, {
+  codebase: 'FinaticClientSDK',
+});
+
 export class PortalUI {
   private iframe: HTMLIFrameElement | null = null;
   private container: HTMLDivElement | null = null;
@@ -12,12 +18,22 @@ export class PortalUI {
   };
   private originalBodyStyle: string | null = null;
 
+  private readonly logger = portalLogger;
+
   constructor(portalUrl: string) {
     this.createContainer();
   }
 
+  private buildLoggerExtra(functionName: string, metadata?: Record<string, unknown>): LoggerExtra {
+    return {
+      module: 'PortalUI',
+      function: functionName,
+      ...(metadata ? buildLoggerExtra(metadata) : {}),
+    };
+  }
+
   private createContainer(): void {
-    console.debug('[PortalUI] Creating container and iframe');
+    this.logger.debug('Creating portal container and iframe', this.buildLoggerExtra('createContainer'));
     this.container = document.createElement('div');
     this.container.style.cssText = `
             position: fixed;
@@ -74,7 +90,7 @@ export class PortalUI {
 
     this.container.appendChild(this.iframe);
     document.body.appendChild(this.container);
-    console.debug('[PortalUI] Container and iframe created successfully');
+    this.logger.debug('Portal container and iframe created successfully', this.buildLoggerExtra('createContainer'));
   }
 
   /**
@@ -91,7 +107,7 @@ export class PortalUI {
       document.body.style.width = '100%';
       document.body.style.top = `-${window.scrollY}px`;
 
-      console.debug('[PortalUI] Background scroll locked');
+      this.logger.debug('Background scroll locked', this.buildLoggerExtra('lockScroll'));
     }
   }
 
@@ -110,7 +126,7 @@ export class PortalUI {
       window.scrollTo(0, parseInt(scrollY || '0') * -1);
 
       this.originalBodyStyle = null;
-      console.debug('[PortalUI] Background scroll unlocked');
+      this.logger.debug('Background scroll unlocked', this.buildLoggerExtra('unlockScroll'));
     }
   }
 
@@ -168,17 +184,18 @@ export class PortalUI {
   private handleMessage(event: MessageEvent): void {
     // Verify origin matches the portal URL
     if (!this.portalOrigin || event.origin !== this.portalOrigin) {
-      console.warn(
-        '[PortalUI] Received message from unauthorized origin:',
-        event.origin,
-        'Expected:',
-        this.portalOrigin
-      );
+      this.logger.warn('Received message from unauthorized origin', this.buildLoggerExtra('handleMessage', {
+        received_origin: event.origin,
+        expected_origin: this.portalOrigin || 'unknown',
+      }));
       return;
     }
 
     const { type, userId, access_token, refresh_token, error, height, data } = event.data;
-    console.log('[PortalUI] Received message:', event.data);
+    this.logger.debug('Received portal message', this.buildLoggerExtra('handleMessage', {
+      message_type: type,
+      has_data: Boolean(data),
+    }));
 
     switch (type) {
       case 'portal-success': {
@@ -225,19 +242,26 @@ export class PortalUI {
         break;
 
       default:
-        console.warn('[PortalUI] Received unhandled message type:', type);
+        this.logger.warn('Received unhandled message type', this.buildLoggerExtra('handleMessage', {
+          message_type: type,
+        }));
     }
   }
 
   private handlePortalSuccess(userId: string, tokens?: { access_token?: string; refresh_token?: string }): void {
     if (!userId) {
-      console.error('[PortalUI] Missing userId in portal-success message');
+      this.logger.error('Missing userId in portal-success message', this.buildLoggerExtra('handlePortalSuccess'));
       return;
     }
 
-    console.log('[PortalUI] Portal success - User connected:', userId);
+    this.logger.info('Portal success - user connected', this.buildLoggerExtra('handlePortalSuccess', {
+      user_id_present: Boolean(userId),
+      tokens_provided: Boolean(tokens?.access_token && tokens?.refresh_token),
+    }));
     if (tokens?.access_token && tokens?.refresh_token) {
-      console.log('[PortalUI] Tokens received for user:', userId);
+      this.logger.debug('Tokens received for user', this.buildLoggerExtra('handlePortalSuccess', {
+        tokens_provided: true,
+      }));
     }
 
     // Pass userId to parent (SDK will handle tokens internally)
@@ -245,23 +269,30 @@ export class PortalUI {
   }
 
   private handlePortalError(error: string): void {
-    console.error('[PortalUI] Portal error:', error);
+    this.logger.error('Portal error received', this.buildLoggerExtra('handlePortalError', {
+      error_message: error,
+    }));
     this.options?.onError?.(new Error(error || 'Unknown portal error'));
   }
 
   private handlePortalClose(): void {
-    console.log('[PortalUI] Portal closed by user');
+    this.logger.info('Portal closed by user', this.buildLoggerExtra('handlePortalClose'));
     this.options?.onClose?.();
     this.hide();
   }
 
   private handleGenericEvent(data: any): void {
     if (!data || !data.type) {
-      console.warn('[PortalUI] Invalid event data:', data);
+      this.logger.warn('Invalid event data received', this.buildLoggerExtra('handleGenericEvent', {
+        has_type: Boolean(data?.type),
+      }));
       return;
     }
 
-    console.log('[PortalUI] Generic event received:', data.type, data.data);
+    this.logger.debug('Generic event received', this.buildLoggerExtra('handleGenericEvent', {
+      event_type: data.type,
+      payload_present: Boolean(data.data),
+    }));
 
     // Emit the event to be handled by the SDK
     // This will be implemented in FinaticConnect
@@ -272,7 +303,7 @@ export class PortalUI {
 
   private handleSuccess(userId: string): void {
     if (!userId) {
-      console.error('[PortalUI] Missing required fields in success message');
+      this.logger.error('Missing required fields in success message', this.buildLoggerExtra('handleSuccess'));
       return;
     }
 
@@ -281,19 +312,23 @@ export class PortalUI {
   }
 
   private handleError(error: string): void {
-    console.error('[PortalUI] Received error:', error);
+    this.logger.error('Received portal error message', this.buildLoggerExtra('handleError', {
+      error_message: error,
+    }));
     this.options?.onError?.(new Error(error || 'Unknown error'));
   }
 
   private handleClose(): void {
-    console.log('[PortalUI] Received close message');
+    this.logger.debug('Received close message', this.buildLoggerExtra('handleClose'));
     this.options?.onClose?.();
     this.hide();
   }
 
   private handleResize(height: number): void {
     if (height && this.iframe) {
-      console.log('[PortalUI] Received resize message:', height);
+      this.logger.debug('Received resize message', this.buildLoggerExtra('handleResize', {
+        height,
+      }));
       this.iframe.style.height = `${height}px`;
     }
   }