Add comprehensive logging for backend and frontend

[Copilot]

Implements request/response logging middleware on backend and structured logger utility on frontend to track user actions, API calls, navigation, and errors throughout the application.

Backend Changes

• RequestLoggingMiddleware: Logs all HTTP requests with unique IDs, client IPs, durations, and full error stack traces
• Route handlers: Added [USER_ACTION], [SUCCESS], [ERROR] categorized logging across all 11 endpoints
• Log format: YYYY-MM-DDTHH:MM:SSZ LEVEL MODULE MESSAGE with daily rotation (14 days retention)
• Location: /var/log/genai-portfolio/app.log

Example output:

2025-11-13T16:30:45Z INFO root [REQUEST] id=1699893045123-140234 method=POST path=/api/generate client=127.0.0.1
2025-11-13T16:30:45Z INFO app.api.routes [USER_ACTION][generate] lang=python prompt.len=125
2025-11-13T16:30:47Z INFO app.api.routes [SUCCESS][generate] lang=python response.len=456
2025-11-13T16:30:47Z INFO root [RESPONSE] id=1699893045123-140234 status=200 duration=2.345s

Frontend Changes

• Logger utility (src/lib/logger.ts): Structured logger with levels (DEBUG, INFO, WARN, ERROR), in-memory buffer (1000 logs), color-coded console output
• HTTP interceptors (src/lib/http.ts): Auto-logs all API requests/responses with duration tracking and API key redaction
• Router guards: Logs navigation events and route loading errors
• Global handlers: Captures uncaught errors and unhandled promise rejections
• User actions: Integrated in code generator for button clicks, form submissions

Example output:

[2025-11-13T16:30:45.123Z] [INFO] [USER_ACTION] Generate Code Button Clicked { language: 'python', promptLength: 125 }
[2025-11-13T16:30:45.234Z] [INFO] [API_REQUEST] POST /api/generate { api_key: '[REDACTED]' }
[2025-11-13T16:30:47.345Z] [INFO] [API_RESPONSE] POST /api/generate - 200 (2111ms)

Documentation

• LOGGING.md: Architecture, log categories, filtering examples, best practices
• LOGGING_EXAMPLES.md: Real-world log samples and analysis patterns
• Test scripts: backend/test_logging.py and frontend/test-logging.html for interactive testing

Security

API keys automatically redacted in frontend logs. Only metadata (lengths, counts) logged, not user content.

Original prompt

Generate a pull request that brings the logger both for the backend and frontend so that I can visualize in the logs every step that a user is doing an errors that they are facing (if any)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.