logging

apps/website/lib/infrastructure/ApiRequestLogger.ts

@@ -177,12 +177,13 @@ export class ApiRequestLogger {
     this.activeRequests.set(id, log);
 
     if (this.options.logToConsole) {
-      console.groupCollapsed(`%c[API REQUEST] ${method} ${url}`, 'color: #00aaff; font-weight: bold;');
-      console.log('Request ID:', id);
-      console.log('Timestamp:', timestamp);
-      if (headers) console.log('Headers:', log.headers);
-      if (body && this.options.logBodies) console.log('Body:', log.body);
-      console.groupEnd();
+      // Use enhanced logger for beautiful output
+      this.logger.debug(`API Request: ${method} ${url}`, {
+        requestId: id,
+        timestamp,
+        headers: this.options.logBodies ? log.headers : '[headers hidden]',
+        body: this.options.logBodies ? log.body : '[body hidden]',
+      });
     }
 
     return id;
@@ -209,15 +210,19 @@ export class ApiRequestLogger {
     this.addToHistory(log);
 
     if (this.options.logToConsole) {
-      const statusColor = response.ok ? '#00ff88' : '#ff4444';
-      console.groupCollapsed(`%c[API RESPONSE] ${log.method} ${log.url} - ${response.status}`, `color: ${statusColor}; font-weight: bold;`);
-      console.log('Request ID:', id);
-      console.log('Duration:', `${duration.toFixed(2)}ms`);
-      console.log('Status:', `${response.status} ${response.statusText}`);
-      if (this.options.logResponses) {
-        console.log('Response Body:', log.response.body);
+      const isSuccess = response.ok;
+      const context = {
+        requestId: id,
+        duration: `${duration.toFixed(2)}ms`,
+        status: `${response.status} ${response.statusText}`,
+        ...(this.options.logResponses && { body: log.response.body }),
+      };
+
+      if (isSuccess) {
+        this.logger.info(`API Response: ${log.method} ${log.url}`, context);
+      } else {
+        this.logger.warn(`API Response: ${log.method} ${log.url}`, context);
       }
-      console.groupEnd();
     }
   }
 
@@ -240,26 +245,40 @@ export class ApiRequestLogger {
     this.addToHistory(log);
 
     if (this.options.logToConsole) {
-      console.groupCollapsed(`%c[API ERROR] ${log.method} ${log.url}`, 'color: #ff4444; font-weight: bold;');
-      console.log('Request ID:', id);
-      console.log('Duration:', `${duration.toFixed(2)}ms`);
-      console.log('Error:', error.message);
-      console.log('Type:', error.name);
-      if (error.stack) {
-        console.log('Stack:', error.stack);
+      const isNetworkError = error.message.includes('fetch') ||
+                            error.message.includes('Failed to fetch') ||
+                            error.message.includes('NetworkError');
+
+      const context = {
+        requestId: id,
+        duration: `${duration.toFixed(2)}ms`,
+        errorType: error.name,
+        ...(process.env.NODE_ENV === 'development' && error.stack ? { stack: error.stack } : {}),
+      };
+
+      // Use warn level for network errors (expected), error level for others
+      if (isNetworkError) {
+        this.logger.warn(`API Network Error: ${log.method} ${log.url}`, context);
+      } else {
+        this.logger.error(`API Error: ${log.method} ${log.url}`, error, context);
       }
-      console.groupEnd();
     }
 
-    // Report to global error handler
-    const globalHandler = getGlobalErrorHandler();
-    globalHandler.report(error, {
-      source: 'api_request',
-      url: log.url,
-      method: log.method,
-      duration,
-      requestId: id,
-    });
+    // Don't report network errors to external services (they're expected)
+    const isNetworkError = error.message.includes('fetch') ||
+                          error.message.includes('Failed to fetch') ||
+                          error.message.includes('NetworkError');
+
+    if (!isNetworkError) {
+      const globalHandler = getGlobalErrorHandler();
+      globalHandler.report(error, {
+        source: 'api_request',
+        url: log.url,
+        method: log.method,
+        duration,
+        requestId: id,
+      });
+    }
   }
 
   /**