refactor(logging): migrate console.log calls to structured logger

- Replace console.log/warn/error with logger.info/warn/error across 14 files
- API files: visualizationApi, insightsApi, collaborationApi, analyticsApi, predictionsApi
- Components: ErrorBoundary, InsightsPage, HeaderExample, MetricCardExample, NavigationExample
- Routes: analytics/index
- Examples: DashboardLayoutExample, LoadReports.example, Header.stories
- Logger provides context-aware structured logging for future Sentry integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: aledlie

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -9,6 +9,7 @@ import {
   AlertTitle,
 } from '@mui/material';
 import { ErrorOutline, Refresh } from '@mui/icons-material';
+import { logger } from '../../features/dashboard/helpers/logger';
 
 /**
  * ErrorBoundary Props
@@ -96,10 +97,8 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
    * Log error details when component catches an error
    */
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // Log error to console in development
-    if (import.meta.env.DEV) {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
-    }
+    // Log error to structured logger
+    logger.error('ErrorBoundary', 'ErrorBoundary caught an error', error, { errorInfo });
 
     // Update state with error info
     this.setState({

src/features/dashboard/api/analyticsApi.ts

@@ -20,6 +20,7 @@ import type {
   PredictionSummary,
   AnalyticsInsight,
 } from '../types/analytics';
+import { logger } from '../helpers/logger';
 
 // ============================================================================
 // Raw Report Types (from Python analyzer)
@@ -527,17 +528,18 @@ export const analyticsApi = {
       const rawData = JSON.parse(text) as unknown;
 
       if (!validateAnalyticsReport(rawData)) {
-        console.warn('[analyticsApi] Analytics report has invalid structure, using mock data');
+        logger.warn('analyticsApi', 'Analytics report has invalid structure, using mock data');
         return generateMockAnalyticsReport();
       }
 
       const data = transformAnalyticsReport(rawData);
-      console.log(
-        `[analyticsApi] Loaded analytics report: ${data.riskData.length} risk items, ${data.insights.length} insights`
+      logger.info(
+        'analyticsApi',
+        `Loaded analytics report: ${data.riskData.length} risk items, ${data.insights.length} insights`
       );
       return data;
     } catch (error) {
-      console.warn(`[analyticsApi] Error loading analytics report:`, error);
+      logger.warn('analyticsApi', 'Error loading analytics report', { error });
       return generateMockAnalyticsReport();
     }
   },
@@ -579,7 +581,7 @@ export const analyticsApi = {
    */
   async dismissInsight(insightId: string): Promise<{ success: boolean }> {
     // In a real implementation, this would call a backend API
-    console.log(`[analyticsApi] Dismissing insight: ${insightId}`);
+    logger.info('analyticsApi', `Dismissing insight: ${insightId}`);
     return { success: true };
   },
 };

src/features/dashboard/api/collaborationApi.ts

@@ -15,6 +15,7 @@ import type {
   IssueStatus,
   User,
 } from '../types';
+import { logger } from '../helpers/logger';
 
 const API_BASE = '/data/collaboration';
 
@@ -146,7 +147,7 @@ export async function assignIssue(
   userId: string
 ): Promise<Issue> {
   // In production, this would be a POST request
-  console.log(`Assigning issue ${issueId} to user ${userId}`);
+  logger.info('collaborationApi', `Assigning issue ${issueId} to user ${userId}`);
   // Return mock updated issue
   const issues = await fetchIssues();
   const issue = issues.find((i) => i.id === issueId);
@@ -162,7 +163,7 @@ export async function updateIssueStatus(
   status: IssueStatus
 ): Promise<Issue> {
   // In production, this would be a PATCH request
-  console.log(`Updating issue ${issueId} status to ${status}`);
+  logger.info('collaborationApi', `Updating issue ${issueId} status to ${status}`);
   const issues = await fetchIssues();
   const issue = issues.find((i) => i.id === issueId);
   if (!issue) throw new Error('Issue not found');
@@ -178,7 +179,7 @@ export async function addComment(
   parentId?: string
 ): Promise<Comment> {
   // In production, this would be a POST request
-  console.log(`Adding comment to issue ${issueId}`, { text, parentId });
+  logger.info('collaborationApi', `Adding comment to issue ${issueId}`, { text, parentId });
   return {
     id: `comment-${Date.now()}`,
     issueId,
@@ -198,7 +199,7 @@ export async function addComment(
  */
 export async function markActivityAsRead(activityId: string): Promise<void> {
   // In production, this would be a PATCH request
-  console.log(`Marking activity ${activityId} as read`);
+  logger.info('collaborationApi', `Marking activity ${activityId} as read`);
 }
 
 // Mock data generators

src/features/dashboard/api/examples/LoadReports.example.tsx

@@ -8,6 +8,7 @@
 import { useState, useEffect } from 'react';
 import { dashboardApi } from '../dashboardApi';
 import type { PythonAnalyzerData, ReportLoadError } from '../../types';
+import { logger } from '../../helpers/logger';
 
 /**
  * Simple loading state component
@@ -155,7 +156,7 @@ export function LoadReportsExample() {
         setData(result.data);
         setErrors(result.errors);
       } catch (error) {
-        console.error('Fatal error loading reports:', error);
+        logger.error('LoadReportsExample', 'Fatal error loading reports', error instanceof Error ? error : undefined);
         // This would be a network error or catastrophic failure
         setErrors([
           {
@@ -215,7 +216,7 @@ export function LoadReportsWithCustomPath({ outputsPath }: { outputsPath: string
         const result = await dashboardApi.loadAllReports(outputsPath);
         setData(result.data);
       } catch (error) {
-        console.error('Error loading reports:', error);
+        logger.error('LoadReportsWithCustomPath', 'Error loading reports', error instanceof Error ? error : undefined);
       } finally {
         setLoading(false);
       }
@@ -253,7 +254,7 @@ export function LoadIndividualReportsExample() {
         const report = await dashboardApi.loadQualityReport('./outputs');
         setQuality(report);
       } catch (error) {
-        console.error('Error loading quality report:', error);
+        logger.error('LoadIndividualReportsExample', 'Error loading quality report', error instanceof Error ? error : undefined);
       } finally {
         setLoading(false);
       }

src/features/dashboard/api/insightsApi.ts

@@ -15,6 +15,7 @@ import type {
   RegenerateResponse,
   MetricSnapshot,
 } from '../types';
+import { logger } from '../helpers/logger';
 
 // ============================================================================
 // Raw Python Output Types
@@ -213,7 +214,7 @@ export const insightsApi = {
       const response = await fetch(path);
       if (!response.ok) {
         if (response.status === 404) {
-          console.warn(`[insightsApi] Insights report not found at ${path}`);
+          logger.warn('insightsApi', `Insights report not found at ${path}`);
           return null;
         }
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -226,10 +227,10 @@ export const insightsApi = {
       }
 
       const data = transformInsightsReport(rawData);
-      console.log(`[insightsApi] Loaded insights report: ${data.summary.total} insights`);
+      logger.info('insightsApi', `Loaded insights report: ${data.summary.total} insights`);
       return data;
     } catch (error) {
-      console.error(`[insightsApi] Error loading insights report from ${path}:`, error);
+      logger.error('insightsApi', `Error loading insights report from ${path}`, error instanceof Error ? error : undefined);
       throw error;
     }
   },
@@ -297,7 +298,7 @@ export const insightsApi = {
     userId: string
   ): Promise<AcknowledgeResponse> {
     // Placeholder - in production, this would POST to a backend
-    console.log(`[insightsApi] Acknowledging insight ${insightId} by user ${userId}`);
+    logger.info('insightsApi', `Acknowledging insight ${insightId} by user ${userId}`);
 
     return {
       success: true,
@@ -328,7 +329,7 @@ export const insightsApi = {
    */
   async regenerateInsights(): Promise<RegenerateResponse> {
     // Placeholder - in production, this would trigger analysis
-    console.log('[insightsApi] Regenerating insights...');
+    logger.info('insightsApi', 'Regenerating insights...');
 
     return {
       success: true,

src/features/dashboard/api/predictionsApi.ts

@@ -16,6 +16,7 @@ import type {
   PredictionFactor,
   GoalMarker,
 } from '../types';
+import { logger } from '../helpers/logger';
 
 // ============================================================================
 // Raw Python Output Types
@@ -299,7 +300,7 @@ export const predictionsApi = {
       const response = await fetch(path);
       if (!response.ok) {
         if (response.status === 404) {
-          console.warn(`[predictionsApi] Predictions report not found at ${path}`);
+          logger.warn('predictionsApi', `Predictions report not found at ${path}`);
           return null;
         }
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -312,10 +313,10 @@ export const predictionsApi = {
       }
 
       const data = transformPredictionsReport(rawData);
-      console.log(`[predictionsApi] Loaded predictions report: ${data.risks.length} risks`);
+      logger.info('predictionsApi', `Loaded predictions report: ${data.risks.length} risks`);
       return data;
     } catch (error) {
-      console.error(`[predictionsApi] Error loading predictions report from ${path}:`, error);
+      logger.error('predictionsApi', `Error loading predictions report from ${path}`, error instanceof Error ? error : undefined);
       throw error;
     }
   },
@@ -413,7 +414,7 @@ export const predictionsApi = {
     scenario: ScenarioConfig
   ): Promise<ScenarioResult | null> {
     // Placeholder - in production, this would call the analyzer
-    console.log('[predictionsApi] Calculating custom scenario:', scenario);
+    logger.info('predictionsApi', 'Calculating custom scenario', { scenario });
 
     const report = await this.loadPredictionsReport(dataPath);
     if (!report) {

src/features/dashboard/api/visualizationApi.ts

@@ -12,6 +12,7 @@ import type {
   ChartType,
   VisualizationMetric,
 } from '../types/visualizations';
+import { logger } from '../helpers/logger';
 
 // Storage key for localStorage
 const STORAGE_KEY = 'code-inventory-visualizations';
@@ -33,7 +34,7 @@ function getStoredVisualizations(): Map<string, VisualizationConfig> {
     const parsed = JSON.parse(stored) as Record<string, VisualizationConfig>;
     return new Map(Object.entries(parsed));
   } catch {
-    console.warn('[visualizationApi] Failed to load from localStorage');
+    logger.warn('visualizationApi', 'Failed to load from localStorage');
     return new Map();
   }
 }
@@ -46,7 +47,7 @@ function saveToStorage(visualizations: Map<string, VisualizationConfig>): void {
     const obj = Object.fromEntries(visualizations);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(obj));
   } catch (error) {
-    console.error('[visualizationApi] Failed to save to localStorage:', error);
+    logger.error('visualizationApi', 'Failed to save to localStorage', error instanceof Error ? error : undefined);
   }
 }
 
@@ -178,7 +179,7 @@ export const visualizationApi = {
 
     // For image/PDF formats, would need to use html2canvas or similar
     // Placeholder implementation
-    console.log('[visualizationApi] Export requested:', { id, options });
+    logger.info('visualizationApi', 'Export requested', { id, options });
     return null;
   },
 

src/features/dashboard/components/HeaderExample.tsx

@@ -11,6 +11,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { Box, Container, Typography, Paper } from '@mui/material';
 import { dashboardTheme } from '../../../theme/dashboardTheme';
 import { Header } from './Header';
+import { logger } from '../helpers/logger';
 
 /**
  * Example dashboard application showing Header integration
@@ -25,7 +26,7 @@ export function HeaderExample() {
    */
   useEffect(() => {
     const interval = setInterval(() => {
-      console.log('Auto-refreshing dashboard data...');
+      logger.info('HeaderExample', 'Auto-refreshing dashboard data...');
       setLastGenerated(new Date());
     }, 30000); // 30 seconds
 
@@ -36,15 +37,15 @@ export function HeaderExample() {
    * Handle settings button click
    */
   const handleSettingsClick = () => {
-    console.log('Settings button clicked');
+    logger.info('HeaderExample', 'Settings button clicked');
     alert('Settings modal would open here');
   };
 
   /**
    * Handle export button click
    */
   const handleExportClick = async () => {
-    console.log('Export button clicked');
+    logger.info('HeaderExample', 'Export button clicked');
     setDataRefreshing(true);
 
     // Simulate data export
@@ -69,7 +70,7 @@ export function HeaderExample() {
       URL.revokeObjectURL(url);
 
       setDataRefreshing(false);
-      console.log('Export completed');
+      logger.info('HeaderExample', 'Export completed');
     }, 1000);
   };
 

src/features/dashboard/components/InsightsPage.tsx

@@ -41,6 +41,7 @@ import {
   useRegenerateInsights,
 } from '../hooks/useInsights';
 import type { AIInsight, InsightsSortConfig } from '../types';
+import { logger } from '../helpers/logger';
 
 /**
  * Props for InsightsPage
@@ -294,7 +295,7 @@ function InsightsPageContent({ dataPath = '/data' }: InsightsPageProps) {
               key={insight.id}
               insight={insight}
               onAcknowledge={handleAcknowledge}
-              onViewDetails={(id) => console.log('View details:', id)}
+              onViewDetails={(id) => logger.info('InsightsPage', 'View details', { id })}
               isLoading={isAcknowledging}
             />
           ))}

src/features/dashboard/components/MetricCardExample.tsx

@@ -20,6 +20,7 @@ import {
   Error as ErrorIcon,
 } from '@mui/icons-material';
 import { MetricCard } from './MetricCard';
+import { logger } from '../helpers/logger';
 
 /**
  * MetricCard Example Showcase
@@ -32,7 +33,7 @@ export function MetricCardExample() {
 
   const handleCardClick = (cardName: string) => {
     setClickedCard(cardName);
-    console.log(`Card clicked: ${cardName}`);
+    logger.info('MetricCardExample', `Card clicked: ${cardName}`);
     // In a real app, this would navigate or show details
   };