cuoral-ionic 0.0.1 → 0.0.3

package/src/intelligence.ts

@@ -0,0 +1,609 @@
+import { Capacitor } from '@capacitor/core';
+import { registerPlugin } from '@capacitor/core';
+
+// Define the plugin interface
+interface CuoralPluginInterface {
+  setupNativeErrorCapture(options: { backendUrl: string; sessionId: string }): Promise<{ success: boolean; message: string }>;
+}
+
+// Register the Cuoral plugin for native error capture
+const CuoralPlugin = registerPlugin<CuoralPluginInterface>('CuoralPlugin');
+
+interface IntelligenceConfig {
+  consoleErrorBackendUrl: string;
+  pageViewBackendUrl: string;
+  apiResponseBackendUrl: string;
+  batchSize: number;
+  batchInterval: number;
+  maxQueueSize: number;
+  retryAttempts: number;
+  retryDelay: number;
+}
+
+interface QueueEvent {
+  event_type: string;
+  timestamp: number;
+  session_id: string;
+  user_agent: string;
+  url: string;
+  data: any;
+}
+
+interface PageViewData {
+  screen: string;
+  referrer: string;
+  duration: number;
+  metadata?: any;
+}
+
+interface ConsoleErrorData {
+  message: string;
+  stack_trace: string;
+  log_level: string;
+  metadata?: any;
+}
+
+interface ApiCallData {
+  method: string;
+  url: string;
+  status_code: number;
+  response_data: any;
+  duration: number;
+  error?: string;
+}
+
+export class CuoralIntelligence {
+  private config: IntelligenceConfig = {
+    consoleErrorBackendUrl: 'https://api.cuoral.com/customer-intelligence/console-error',
+    pageViewBackendUrl: 'https://api.cuoral.com/customer-intelligence/page-view',
+    apiResponseBackendUrl: 'https://api.cuoral.com/customer-intelligence/api-response',
+    batchSize: 10,
+    batchInterval: 2000,
+    maxQueueSize: 30,
+    retryAttempts: 1,
+    retryDelay: 2000,
+  };
+
+  private queues: Record<string, QueueEvent[]> = {
+    console_error: [],
+    unhandled_error: [],
+    page_view: [],
+    api_call: [],
+  };
+
+  private batchTimers: Record<string, any> = {};
+  private sessionId: string | null = null;
+  private isInitialized = false;
+  private lastPageViewTimestamp = Date.now();
+  private lastPageViewScreen = '';
+  private pendingEvents: any[] = [];
+
+  // Network monitoring state
+  private originalFetch: any = null;
+  private originalXMLHttpRequest: any = null;
+
+  constructor(sessionId: string) {
+    this.sessionId = sessionId;
+  }
+
+  /**
+   * Initialize intelligence tracking
+   */
+  public init(): void {
+    if (this.isInitialized) {
+      console.warn('[Cuoral Intelligence] Already initialized');
+      return;
+    }
+
+    this.setupConsoleErrorListener();
+    this.setupNetworkMonitoring();
+    this.setupAppStateListener();
+    this.setupNativeErrorCapture();
+    
+    this.isInitialized = true;
+    this.flushPendingEvents();
+  }
+
+  /**
+   * Track a page/screen view
+   */
+  public trackPageView(screen: string, metadata?: any): void {
+    const duration = Date.now() - this.lastPageViewTimestamp;
+    
+    this.enqueueEvent('page_view', {
+      screen,
+      referrer: this.lastPageViewScreen,
+      duration,
+      metadata: metadata || {},
+    });
+
+    this.lastPageViewTimestamp = Date.now();
+    this.lastPageViewScreen = screen;
+  }
+
+  /**
+   * Track a console error manually
+   */
+  public trackError(message: string, stackTrace?: string, metadata?: any): void {
+    this.enqueueEvent('console_error', {
+      message,
+      stack_trace: stackTrace || 'No stack trace available',
+      log_level: 'error',
+      metadata: metadata || {},
+    });
+  }
+
+  /**
+   * Flush all queued events immediately
+   */
+  public flush(): void {
+    Object.keys(this.queues).forEach((type) => {
+      this.flushQueue(type);
+    });
+  }
+
+  /**
+   * Destroy and cleanup
+   */
+  public destroy(): void {
+    // Clear all timers
+    Object.keys(this.batchTimers).forEach((type) => {
+      if (this.batchTimers[type]) {
+        clearTimeout(this.batchTimers[type]);
+        delete this.batchTimers[type];
+      }
+    });
+
+    // Restore original functions
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+
+    if (this.originalXMLHttpRequest) {
+      (window as any).XMLHttpRequest = this.originalXMLHttpRequest;
+      this.originalXMLHttpRequest = null;
+    }
+
+    // Clear queues
+    Object.keys(this.queues).forEach((type) => {
+      this.queues[type] = [];
+    });
+
+    this.isInitialized = false;
+  }
+
+  /**
+   * Setup console error listener
+   */
+  private setupConsoleErrorListener(): void {
+    // Override console.error
+    const originalConsoleError = console.error;
+    console.error = (...args: any[]) => {
+      originalConsoleError.apply(console, args);
+
+      try {
+        // Try to find an Error object in arguments to get real stack trace
+        let stack = '';
+        let message = '';
+        
+        // Check each argument for error information
+        for (const arg of args) {
+          if (arg instanceof Error) {
+            stack = arg.stack || '';
+            message = arg.message;
+            break;
+          } else if (arg && typeof arg === 'object') {
+            if (arg.stack && typeof arg.stack === 'string') {
+              stack = arg.stack;
+              message = arg.message || arg.toString();
+              break;
+            }
+            if (arg.rejection && arg.rejection instanceof Error) {
+              stack = arg.rejection.stack || '';
+              message = arg.rejection.message;
+              break;
+            }
+            if (arg.error instanceof Error) {
+              stack = arg.error.stack || '';
+              message = arg.error.message;
+              break;
+            }
+          }
+        }
+        
+        // If no stack found, generate one from current context
+        // Note: Angular's ErrorHandler doesn't pass Error objects, so this will
+        // capture the console.error call stack, not the original error stack.
+        // For better error tracking, use source maps or test with unminified builds.
+        if (!stack) {
+          const error = new Error();
+          stack = error.stack || 'No stack trace available';
+          message = args.map((a) => (typeof a === 'object' ? JSON.stringify(a) : String(a))).join(' ');
+        }
+
+        this.enqueueEvent('console_error', {
+          message: message || 'Console error',
+          stack_trace: stack,
+          log_level: 'error',
+          metadata: {},
+        });
+      } catch (err) {
+        // Silently fail
+      }
+    };
+
+    // Global error handler
+    window.onerror = (message, source, lineno, colno, error) => {
+      try {
+        this.enqueueEvent('unhandled_error', {
+          message: String(message),
+          source: source || 'unknown',
+          lineno: lineno || 0,
+          colno: colno || 0,
+          stack_trace: error?.stack || 'No stack trace available',
+          log_level: 'error',
+        });
+      } catch (err) {
+        // Silently fail
+      }
+      return false;
+    };
+
+    // Unhandled promise rejection
+    window.addEventListener('unhandledrejection', (event) => {
+      this.enqueueEvent('unhandled_error', {
+        message: event.reason instanceof Error ? event.reason.message : String(event.reason),
+        stack_trace: event.reason?.stack || 'No stack trace available',
+        log_level: 'error',
+      });
+    });
+  }
+
+  /**
+   * Setup network monitoring
+   */
+  private setupNetworkMonitoring(): void {
+    // Store original fetch
+    if (!this.originalFetch) {
+      this.originalFetch = window.fetch;
+    }
+
+    // Override fetch
+    window.fetch = async (...args: any[]) => {
+      const url = args[0] instanceof Request ? args[0].url : args[0];
+      const method = args[0] instanceof Request && args[0].method
+        ? args[0].method
+        : args[1]?.method || 'GET';
+      const startTime = Date.now();
+
+      try {
+        const response = await this.originalFetch.apply(window, args);
+        const duration = Date.now() - startTime;
+        const status = response.status;
+
+        // Only track errors (4xx, 5xx)
+        if (status >= 400) {
+          const responseClone = response.clone();
+          try {
+            const text = await responseClone.text();
+            let responseData = null;
+            try {
+              const truncated = text.length > 5000 ? text.substring(0, 5000) + '...' : text;
+              responseData = JSON.parse(truncated);
+            } catch (e) {
+              responseData = text.length > 5000 ? text.substring(0, 5000) + '...' : text;
+            }
+
+            this.enqueueEvent('api_call', {
+              method,
+              url,
+              status_code: status,
+              response_data: responseData,
+              duration,
+            });
+          } catch (err) {
+            this.enqueueEvent('api_call', {
+              method,
+              url,
+              status_code: status,
+              duration,
+              error: 'Failed to read response body',
+            });
+          }
+        }
+
+        return response;
+      } catch (error: any) {
+        const duration = Date.now() - startTime;
+        this.enqueueEvent('api_call', {
+          method,
+          url,
+          status_code: 0,
+          response_data: error.message || 'Network Error',
+          duration,
+          error: error.message || 'Network Error',
+        });
+        throw error;
+      }
+    };
+
+    // Store original XMLHttpRequest
+    if (!this.originalXMLHttpRequest && (window as any).XMLHttpRequest) {
+      this.originalXMLHttpRequest = (window as any).XMLHttpRequest;
+    }
+
+    // Override XMLHttpRequest
+    const originalOpen = XMLHttpRequest.prototype.open;
+    const originalSend = XMLHttpRequest.prototype.send;
+
+    XMLHttpRequest.prototype.open = function (method: string, url: string) {
+      (this as any)._cuoralMethod = method;
+      (this as any)._cuoralUrl = url;
+      return originalOpen.apply(this, arguments as any);
+    };
+
+    XMLHttpRequest.prototype.send = function () {
+      const startTime = Date.now();
+      const xhr = this;
+
+      const loadendHandler = () => {
+        try {
+          const status = xhr.status;
+          const duration = Date.now() - startTime;
+
+          // Only track errors (4xx, 5xx)
+          if (status >= 400) {
+            let responseData = null;
+            try {
+              const responseText = xhr.responseText || '';
+              const truncated = responseText.length > 5000
+                ? responseText.substring(0, 5000) + '...'
+                : responseText;
+              responseData = truncated ? JSON.parse(truncated) : truncated;
+            } catch (e) {
+              const responseText = xhr.responseText || '';
+              responseData = responseText.length > 5000
+                ? responseText.substring(0, 5000) + '...'
+                : responseText;
+            }
+
+            (window as any)._cuoralIntelligence?.enqueueEvent('api_call', {
+              method: (xhr as any)._cuoralMethod,
+              url: (xhr as any)._cuoralUrl,
+              status_code: status,
+              response_data: responseData,
+              duration,
+            });
+          }
+        } catch (err) {
+          // Silently fail
+        }
+      };
+
+      this.addEventListener('loadend', loadendHandler, { once: true });
+      return originalSend.apply(this, arguments as any);
+    };
+
+    // Store reference for XMLHttpRequest monitoring
+    (window as any)._cuoralIntelligence = this;
+  }
+
+  /**
+   * Setup app state listener
+   */
+  private setupAppStateListener(): void {
+    // Listen for app going to background
+    window.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'hidden') {
+        this.flush();
+      }
+    });
+
+    // Listen for app pause (Capacitor)
+    if (Capacitor.isNativePlatform()) {
+      window.addEventListener('pause', () => {
+        this.flush();
+      });
+    }
+  }
+
+  /**
+   * Enqueue an event
+   */
+  private enqueueEvent(type: string, data: any): void {
+    const queue = this.queues[type];
+    if (!queue) {
+      return;
+    }
+
+    // Don't track successful API calls (2xx, 3xx)
+    if (type === 'api_call' && data.status_code >= 200 && data.status_code < 400) {
+      return;
+    }
+
+    // Limit queue size
+    if (queue.length >= this.config.maxQueueSize) {
+      queue.shift();
+    }
+
+    const event: QueueEvent = {
+      event_type: type,
+      timestamp: Date.now(),
+      session_id: this.sessionId || '',
+      user_agent: navigator.userAgent,
+      url: window.location.href,
+      data,
+    };
+
+    queue.push(event);
+
+    // Flush immediately for critical errors
+    const shouldFlushImmediately = type === 'api_call' && (data.status_code === 0 || data.status_code >= 400);
+
+    if (shouldFlushImmediately || queue.length >= this.config.batchSize) {
+      this.flushQueue(type);
+    } else if (!this.batchTimers[type]) {
+      this.batchTimers[type] = setTimeout(
+        () => this.flushQueue(type),
+        this.config.batchInterval
+      );
+    }
+  }
+
+  /**
+   * Flush a specific queue
+   */
+  private flushQueue(eventType: string, useBeacon = false): void {
+    const queue = this.queues[eventType];
+    if (!queue || queue.length === 0) {
+      return;
+    }
+
+    // Clear timer
+    if (this.batchTimers[eventType]) {
+      clearTimeout(this.batchTimers[eventType]);
+      delete this.batchTimers[eventType];
+    }
+
+    const eventsToProcess = [...queue];
+    this.queues[eventType] = [];
+
+    let backendUrl: string;
+    let transformedPayload: any[];
+
+    if (eventType === 'console_error' || eventType === 'unhandled_error') {
+      backendUrl = this.config.consoleErrorBackendUrl;
+      transformedPayload = eventsToProcess.map((event) => ({
+        message: event.data.message,
+        stack_trace: event.data.stack_trace,
+        log_level: 'error',
+        url: event.url,
+        session_id: event.session_id,
+        source: 'mobile',
+        console_metadata: event.data.metadata || {},
+      }));
+    } else if (eventType === 'page_view') {
+      backendUrl = this.config.pageViewBackendUrl;
+      transformedPayload = eventsToProcess.map((event) => ({
+        session_id: event.session_id,
+        url: event.data.screen,
+        referrer: event.data.referrer,
+        user_agent: event.user_agent,
+        source: 'mobile',
+        page_metadata: {
+          duration: event.data.duration,
+          screen: event.data.screen,
+          ...event.data.metadata,
+        },
+        timestamp: new Date(event.timestamp).toISOString(),
+      }));
+    } else if (eventType === 'api_call') {
+      backendUrl = this.config.apiResponseBackendUrl;
+      transformedPayload = eventsToProcess
+        .map((event) => {
+          let responseBody = event.data.response_data;
+          if (typeof responseBody === 'string') {
+            try {
+              responseBody = JSON.parse(responseBody);
+            } catch (e) {
+              responseBody = { raw_text: responseBody };
+            }
+          } else if (responseBody === null || typeof responseBody === 'undefined') {
+            responseBody = {};
+          }
+
+          return {
+            url: event.data.url,
+            method: event.data.method,
+            status_code: event.data.status_code,
+            response_body: responseBody,
+            session_id: event.session_id,
+            source: 'mobile',
+            api_metadata: {
+              duration: event.data.duration,
+              error: event.data.error || null,
+            },
+          };
+        })
+        .filter((item) => item !== null && item !== undefined);
+    } else {
+      return;
+    }
+
+    const filteredPayload = transformedPayload.filter((item) => item !== null && item !== undefined);
+
+    if (backendUrl && filteredPayload.length > 0) {
+      this.sendToBackend(backendUrl, filteredPayload, useBeacon);
+    }
+  }
+
+  /**
+   * Send data to backend
+   */
+  private async sendToBackend(url: string, payload: any[], useBeacon = false, retryCount = 0): Promise<void> {
+    if (!this.sessionId) {
+      this.pendingEvents.push({ url, payload, useBeacon });
+      return;
+    }
+
+    if (!navigator.onLine) {
+      return;
+    }
+
+    const data = JSON.stringify(payload);
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: data,
+        keepalive: useBeacon,
+      });
+
+      if (!response.ok && retryCount < this.config.retryAttempts) {
+        setTimeout(() => {
+          this.sendToBackend(url, payload, false, retryCount + 1);
+        }, this.config.retryDelay);
+      }
+    } catch (error) {
+      // Silently fail
+    }
+  }
+
+  /**
+   * Flush pending events
+   */
+  private flushPendingEvents(): void {
+    if (this.pendingEvents.length > 0) {
+      const pending = [...this.pendingEvents];
+      this.pendingEvents = [];
+      pending.forEach(({ url, payload, useBeacon }) => {
+        this.sendToBackend(url, payload, useBeacon);
+      });
+    }
+  }
+
+  /**
+   * Setup native error capture for Android/iOS crashes
+   */
+  private setupNativeErrorCapture(): void {
+    try {
+      // Only run on native platforms and if we have a session ID
+      if (Capacitor.isNativePlatform() && this.sessionId) {
+        CuoralPlugin.setupNativeErrorCapture({
+          backendUrl: this.config.consoleErrorBackendUrl,
+          sessionId: this.sessionId,
+        }).catch(() => {
+          // Silently fail - native error capture optional
+        });
+      }
+    } catch (error) {
+      // Silently fail if plugin is not available
+
+    }
+  }
+}

package/src/plugin.ts

@@ -43,11 +43,9 @@ export interface CuoralPluginInterface {
 }
 
 /**
- * Register the Capacitor plugin
+ * Register the Capacitor plugin (mobile only - iOS and Android)
  */
-const CuoralPlugin = registerPlugin<CuoralPluginInterface>('CuoralPlugin', {
-  web: () => import('./web').then(m => new m.CuoralPluginWeb()),
-});
+const CuoralPlugin = registerPlugin<CuoralPluginInterface>('CuoralPlugin');
 
 export { CuoralPlugin };
 
@@ -83,6 +81,7 @@ export class CuoralRecorder {
 
       // Start recording
       const result = await CuoralPlugin.startRecording(options);
+      
       if (result.success) {
         this.isRecording = true;
         this.recordingStartTime = Date.now();
@@ -92,11 +91,23 @@ export class CuoralRecorder {
           type: CuoralMessageType.RECORDING_STARTED,
           payload: { timestamp: this.recordingStartTime },
         });
+      } else {
+        // Recording failed - reset state and notify widget
+        this.isRecording = false;
+        this.recordingStartTime = undefined;
+        
+        this.postMessage({
+          type: CuoralMessageType.RECORDING_ERROR,
+          payload: { error: 'Failed to start recording' },
+        });
       }
 
       return result.success;
     } catch (error) {
-      console.error('[Cuoral] Failed to start recording:', error);
+      // Exception occurred - reset state and notify widget
+      this.isRecording = false;
+      this.recordingStartTime = undefined;
+      
       this.postMessage({
         type: CuoralMessageType.RECORDING_ERROR,
         payload: { error: (error as Error).message },
@@ -111,7 +122,11 @@ export class CuoralRecorder {
   async stopRecording(): Promise<{ filePath?: string; duration?: number } | null> {
     try {
       if (!this.isRecording) {
-        console.warn('[Cuoral] Not recording');
+        // Send error message to widget so it can exit "stopping" state
+        this.postMessage({
+          type: CuoralMessageType.RECORDING_ERROR,
+          payload: { error: 'Not recording' },
+        });
         return null;
       }
 
@@ -137,6 +152,11 @@ export class CuoralRecorder {
         };
       }
 
+      // If result.success is false, send error to widget
+      this.postMessage({
+        type: CuoralMessageType.RECORDING_ERROR,
+        payload: { error: 'Failed to stop recording' },
+      });
       return null;
     } catch (error) {
       console.error('[Cuoral] Failed to stop recording:', error);

package/src/web.ts

@@ -15,8 +15,6 @@ export class CuoralPluginWeb extends WebPlugin implements CuoralPluginInterface
   private recordingStartTime?: number;
 
   async startRecording(options?: RecordingOptions): Promise<{ success: boolean }> {
-    console.log('[Cuoral Web] Start recording', options);
-    
     // Check if Screen Capture API is available
     if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
       throw new Error('Screen recording is not supported in this browser');
@@ -43,8 +41,6 @@ export class CuoralPluginWeb extends WebPlugin implements CuoralPluginInterface
   }
 
   async stopRecording(): Promise<{ success: boolean; filePath?: string; duration?: number }> {
-    console.log('[Cuoral Web] Stop recording');
-
     if (!this.isRecording) {
       return { success: false };
     }
@@ -79,8 +75,6 @@ export class CuoralPluginWeb extends WebPlugin implements CuoralPluginInterface
   }
 
   async takeScreenshot(options?: ScreenshotOptions): Promise<ScreenshotData> {
-    console.log('[Cuoral Web] Take screenshot', options);
-
     try {
       // Use Screen Capture API
       const stream = await navigator.mediaDevices.getDisplayMedia({