Replace direct console usage with proper logging system

[smartlabsAT]

Description

The current implementation uses direct console.log, console.error, and console.warn calls, which violates code quality standards and lacks proper logging control. We need to implement a proper logging system.

Current Issues

1. Direct Console Usage Violations

Files affected: src/BreakpointContext.tsx

Problematic lines:

• Line 91: console.error('❌ BreakpointProvider: Duplicate breakpoint values detected...')
• Line 113: console.error('❌ BreakpointProvider: element width is undefined or 0')
• Line 123: console.error('❌ BreakpointProvider: The current width...')
• Line 129: console.error('❌ BreakpointProvider: No breakpoint could be determined...')

2. Missing Structured Logging

• No centralized logging configuration
• No log levels (debug, info, warn, error)
• No structured data support
• Inconsistent error messaging format

Proposed Solution

Create a Logger Utility

Create src/utils/logger.ts:

export interface Logger {
  debug(message: string, data?: Record<string, unknown>): void;
  info(message: string, data?: Record<string, unknown>): void;
  warn(message: string, data?: Record<string, unknown>): void;
  error(message: string, data?: Record<string, unknown>): void;
}

interface LogEntry {
  level: 'debug' | 'info' | 'warn' | 'error';
  message: string;
  data?: Record<string, unknown>;
  timestamp: string;
  context: string;
}

class BreakpointLogger implements Logger {
  private isProduction = process.env.NODE_ENV === 'production';
  private isDevelopment = process.env.NODE_ENV === 'development';
  
  private shouldLog(level: string): boolean {
    if (this.isProduction) return level === 'error';
    return true; // Log everything in development
  }

  private formatMessage(level: string, message: string, data?: Record<string, unknown>): void {
    if (!this.shouldLog(level)) return;
    
    const entry: LogEntry = {
      level: level as LogEntry['level'],
      message,
      data,
      timestamp: new Date().toISOString(),
      context: 'BreakpointProvider'
    };

    // Use appropriate console method based on level
    const consoleMethod = level === 'error' ? console.error : 
                         level === 'warn' ? console.warn : console.log;
    
    if (this.isDevelopment) {
      consoleMethod(`[${entry.context}] ${entry.message}`, entry.data || '');
    }
  }

  debug(message: string, data?: Record<string, unknown>): void {
    this.formatMessage('debug', message, data);
  }

  info(message: string, data?: Record<string, unknown>): void {
    this.formatMessage('info', message, data);
  }

  warn(message: string, data?: Record<string, unknown>): void {
    this.formatMessage('warn', message, data);
  }

  error(message: string, data?: Record<string, unknown>): void {
    this.formatMessage('error', message, data);
  }
}

export const logger = new BreakpointLogger();

Update BreakpointContext Usage

Replace all direct console calls with:

import { logger } from './utils/logger';

// Replace:
console.error('❌ BreakpointProvider: Duplicate breakpoint values detected...');

// With:
logger.error('Duplicate breakpoint values detected', { 
  duplicates: duplicates.map(([key, value]) => ({ key, value })) 
});

Benefits

• ✅ Eliminates direct console usage violations
• ✅ Centralized logging configuration
• ✅ Environment-aware logging (respects NODE_ENV)
• ✅ Structured data support for better debugging
• ✅ Consistent error messaging format
• ✅ Easy to extend or replace logging backend
• ✅ Better performance in production (reduced logging)

Acceptance Criteria

• Remove all direct console.* calls from codebase
• Implement logger utility with proper typing
• Support environment-based log level filtering
• Use structured data instead of string concatenation
• Maintain existing devMode functionality
• Add tests for logger utility
• Update existing error messages to use structured format
• Ensure no console output in production unless critical errors

Files to Create/Modify

• Create: src/utils/logger.ts
• Modify: src/BreakpointContext.tsx (replace console calls)
• Create: tests/logger.test.ts (unit tests)

Priority

High - Code quality violation that needs immediate attention

Related

This addresses code quality standards and prepares the codebase for better maintainability and debugging capabilities.