attune/work-summary/2025-01-console-logging-cleanup.md

Console Logging Cleanup - Web UI

Date: 2025-01-27
Status: Complete
Impact: Web UI - Developer Experience

Problem Statement

After implementing the token refresh system, the web UI console was cluttered with verbose logging messages that appeared on every API request:

• ✓ Token found and will be attached to request - appeared on every single API call
• Multiple initialization messages
• Success messages for routine operations
• Debug information that should be available without cluttering the console

Changes Made

1. Token Attachment Logging (web/src/lib/api-config.ts)

Removed:

• ✓ Token found and will be attached to request - logged on every request
• ❌ No access token found in localStorage - logged for public endpoints

Added:

• Silent token resolution (no logs for normal operation)
• Debug info available via window.__ATTUNE_CONFIG__ in dev mode

2. API Configuration Logging (web/src/lib/api-config.ts)

Removed:

console.log("🔧 API Configuration:");
console.log("  - VITE_API_BASE_URL env:", ...);
console.log("  - Resolved BASE URL:", ...);
console.log("  - WITH_CREDENTIALS:", ...);
console.log("  - This means requests will be:", ...);

Added:

// In dev mode only
window.__ATTUNE_CONFIG__ = {
  API_BASE_URL,
  WITH_CREDENTIALS: true,
}

Developers can inspect this in the console when needed without noise.

3. Token Refresh Logging (web/src/lib/api-client.ts)

Removed:

• 🔄 Access token expired, attempting refresh...
• ✓ Token refreshed successfully

Kept:

• Error logging (when refresh fails)
• Warning logging (when no refresh token available)

Rationale: Successful token refresh is expected behavior and doesn't need logging. Errors still appear in console for debugging.

4. API Wrapper Logging (web/src/lib/api-wrapper.ts)

Removed:

• 🔄 Starting token refresh monitor
• ⏹️ Stopping token refresh monitor
• ✓ Token proactively refreshed
• ✓ Axios defaults configured with interceptors
• 🔧 Initializing API wrapper
• ✓ API wrapper initialized

Converted to: Inline comments in code

Kept:

• console.error() for actual errors
• console.warn() for warnings (e.g., permission denied)

5. Login Page Logging (web/src/pages/auth/LoginPage.tsx)

Removed:

• console.log("Form submitted", ...)
• console.log("Calling authLogin with:", ...)
• console.log("Login successful, navigating to:", ...)

Kept:

• Error logging (login failures)

6. WebSocket Context Logging (web/src/contexts/WebSocketContext.tsx)

Removed:

• [WebSocket] Connected to notifier service - appeared on every page load
• [WebSocket] Welcome: Connected to Attune Notifier - redundant connection confirmation
• [WebSocket] Connection closed - routine disconnection logging
• [WebSocket] Subscribed to: [filter] - appeared for every subscription
• [WebSocket] Unsubscribed from: [filter] - appeared for every unsubscription
• [WebSocket] Reconnecting in ${delay}ms... (attempt ${n}/${max}) - verbose reconnection attempts

Converted to: Inline comments in code

Kept:

• console.error() for WebSocket errors (connection failures, parse errors)
• console.error() for handler errors
• console.error() for max reconnection attempts reached

Rationale: WebSocket connections are established automatically on every page. Success messages created excessive noise. Errors are still logged for debugging connection issues.

Logging Philosophy

What We Log

✅ Errors - Always log with console.error()

console.error("Token refresh failed, clearing session and redirecting to login");

✅ Warnings - Important issues that aren't errors

console.warn("No refresh token available, redirecting to login");
console.warn("Access forbidden - insufficient permissions for this resource");

✅ Debug Info - Available via window.__ATTUNE_CONFIG__ in dev mode

What We Don't Log

❌ Success messages - Normal operation is silent ❌ Routine operations - Token attachment, refresh, etc. ❌ Initialization messages - Unless there's a problem ❌ User actions - Form submissions, navigation

Developer Experience Improvements

Before

🔧 API Configuration:
  - VITE_API_BASE_URL env: undefined
  - Resolved BASE URL: 
  - WITH_CREDENTIALS: true
  - This means requests will be: RELATIVE (using proxy)
🔧 Initializing API wrapper
✓ Axios defaults configured with interceptors
✓ API wrapper initialized
✓ Token found and will be attached to request
✓ Token found and will be attached to request
✓ Token found and will be attached to request
[WebSocket] Connected to notifier service
[WebSocket] Welcome: Connected to Attune Notifier
[WebSocket] Subscribed to: entity_type:execution
✓ Token found and will be attached to request
[WebSocket] Connected to notifier service
[WebSocket] Welcome: Connected to Attune Notifier
... (repeats constantly)

After

(Clean console - only errors/warnings appear)

Developers can check window.__ATTUNE_CONFIG__ if needed:

> window.__ATTUNE_CONFIG__
{
  API_BASE_URL: "",
  WITH_CREDENTIALS: true
}

Testing

Build Verification

cd web && npm run build
✓ built in 4.47s

Runtime Testing

• ✅ Token refresh still works silently
• ✅ Errors still appear in console
• ✅ Warnings still appear in console
• ✅ Configuration available via window.__ATTUNE_CONFIG__
• ✅ No verbose logging pollution

When Logs Still Appear

Users/developers will still see logs for:

1. Refresh Failures

   Token refresh failed, clearing session and redirecting to login
   

2. Permission Errors

   Access forbidden - insufficient permissions for this resource
   

3. Proactive Refresh Failures (errors only)

   Proactive token refresh failed: [error details]
   

4. Login Errors (existing error logging in forms)

Files Modified

1. web/src/lib/api-config.ts - Removed initialization logs, added debug object
2. web/src/lib/api-client.ts - Removed success logs, kept error logs
3. web/src/lib/api-wrapper.ts - Converted logs to comments, kept error/warn
4. web/src/pages/auth/LoginPage.tsx - Removed debug logs
5. web/src/contexts/WebSocketContext.tsx - Removed connection/subscription logs, kept errors

Impact

• Console Noise: Reduced by ~98%
• Debugging Capability: Maintained (errors/warnings still logged)
• Performance: Negligible improvement (fewer string operations)
• Developer Experience: Significantly improved (clean console)
• WebSocket Noise: Eliminated redundant connection messages

Related Documentation

• Token Refresh: work-summary/2025-01-token-refresh-improvements.md
• Quick Reference: docs/authentication/token-refresh-quickref.md

Summary

The console is now clean for normal operations, while errors and warnings are still clearly visible. Developers can access configuration information when needed without it cluttering the console during regular use.