Fix TypeScript build errors

frontend/src/utils/errorTracking.ts

@@ -0,0 +1,128 @@
+/**
+ * Error Tracking Utility
+ * 
+ * Provides error tracking integration (ready for Sentry or similar services).
+ * Currently provides a no-op implementation that can be replaced with actual
+ * error tracking service integration.
+ * 
+ * To integrate Sentry:
+ * 1. Install: npm install @sentry/react
+ * 2. Uncomment and configure the Sentry initialization
+ * 3. Update the captureException and captureMessage calls
+ */
+
+// Uncomment when ready to use Sentry:
+// import * as Sentry from '@sentry/react';
+
+interface ErrorContext {
+  [key: string]: unknown;
+}
+
+class ErrorTracker {
+  private initialized = false;
+
+  /**
+   * Initialize error tracking service
+   */
+  init(dsn?: string, environment?: string): void {
+    if (this.initialized) {
+      return;
+    }
+
+    // Uncomment when ready to use Sentry:
+    /*
+    if (!dsn) {
+      console.warn('Error tracking DSN not provided, error tracking disabled');
+      return;
+    }
+
+    Sentry.init({
+      dsn,
+      environment: environment || import.meta.env.MODE,
+      integrations: [
+        new Sentry.BrowserTracing(),
+        new Sentry.Replay(),
+      ],
+      tracesSampleRate: 1.0, // Adjust based on traffic
+      replaysSessionSampleRate: 0.1,
+      replaysOnErrorSampleRate: 1.0,
+    });
+
+    this.initialized = true;
+    */
+  }
+
+  /**
+   * Capture an exception
+   */
+  captureException(error: Error, context?: ErrorContext): void {
+    // Uncomment when ready to use Sentry:
+    /*
+    if (this.initialized) {
+      Sentry.captureException(error, {
+        contexts: {
+          custom: context || {},
+        },
+      });
+    }
+    */
+
+    // Fallback logging
+    if (import.meta.env.DEV) {
+      console.error('Error captured:', error, context);
+    }
+  }
+
+  /**
+   * Capture a message
+   */
+  captureMessage(message: string, level: 'info' | 'warning' | 'error' = 'error', context?: ErrorContext): void {
+    // Uncomment when ready to use Sentry:
+    /*
+    if (this.initialized) {
+      Sentry.captureMessage(message, {
+        level: level as Sentry.SeverityLevel,
+        contexts: {
+          custom: context || {},
+        },
+      });
+    }
+    */
+
+    // Fallback logging
+    if (import.meta.env.DEV) {
+      const logMethod = level === 'error' ? console.error : level === 'warning' ? console.warn : console.info;
+      logMethod('Message captured:', message, context);
+    }
+  }
+
+  /**
+   * Set user context for error tracking
+   */
+  setUser(user: { id: string; email?: string; username?: string } | null): void {
+    // Uncomment when ready to use Sentry:
+    /*
+    if (this.initialized) {
+      Sentry.setUser(user);
+    }
+    */
+  }
+
+  /**
+   * Add breadcrumb for debugging
+   */
+  addBreadcrumb(message: string, category?: string, level?: 'info' | 'warning' | 'error'): void {
+    // Uncomment when ready to use Sentry:
+    /*
+    if (this.initialized) {
+      Sentry.addBreadcrumb({
+        message,
+        category: category || 'custom',
+        level: level || 'info',
+      });
+    }
+    */
+  }
+}
+
+export const errorTracker = new ErrorTracker();

frontend/src/utils/logger.ts

@@ -0,0 +1,95 @@
+/**
+ * Structured Logging Utility
+ * 
+ * Provides structured logging with different log levels.
+ * In production, logs can be sent to error tracking services.
+ * 
+ * Usage:
+ *   logger.info('User logged in', { userId: '123' });
+ *   logger.error('API request failed', { error, url });
+ */
+
+export enum LogLevel {
+  DEBUG = 'debug',
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error',
+}
+
+interface LogContext {
+  [key: string]: unknown;
+}
+
+class Logger {
+  private isDevelopment = import.meta.env.DEV;
+  private isProduction = import.meta.env.PROD;
+
+  /**
+   * Log debug messages (only in development)
+   */
+  debug(message: string, context?: LogContext): void {
+    if (this.isDevelopment) {
+      console.debug(`[DEBUG] ${message}`, context || '');
+    }
+  }
+
+  /**
+   * Log informational messages
+   */
+  info(message: string, context?: LogContext): void {
+    if (this.isDevelopment) {
+      console.info(`[INFO] ${message}`, context || '');
+    }
+    // In production, could send to analytics service
+  }
+
+  /**
+   * Log warning messages
+   */
+  warn(message: string, context?: LogContext): void {
+    console.warn(`[WARN] ${message}`, context || '');
+    // In production, could send to monitoring service
+  }
+
+  /**
+   * Log error messages
+   */
+  error(message: string, error?: Error | unknown, context?: LogContext): void {
+    const errorContext = {
+      ...context,
+      error: error instanceof Error ? {
+        message: error.message,
+        stack: error.stack,
+        name: error.name,
+      } : error,
+    };
+
+    console.error(`[ERROR] ${message}`, errorContext);
+
+    // In production, send to error tracking service (e.g., Sentry)
+    if (this.isProduction && error) {
+      // TODO: Integrate with error tracking service
+      // Example: Sentry.captureException(error, { contexts: { custom: context } });
+    }
+  }
+
+  /**
+   * Log API requests (development only)
+   */
+  logRequest(method: string, url: string, data?: unknown): void {
+    if (this.isDevelopment) {
+      this.debug(`API ${method.toUpperCase()} ${url}`, { data });
+    }
+  }
+
+  /**
+   * Log API responses (development only)
+   */
+  logResponse(method: string, url: string, status: number, data?: unknown): void {
+    if (this.isDevelopment) {
+      this.debug(`API ${method.toUpperCase()} ${url} - ${status}`, { data });
+    }
+  }
+}
+
+export const logger = new Logger();