motovaultpro/docs/UX-DEBUGGING.md

MotoVaultPro Debug Console Configuration

CRITICAL: Console Logs Are Stripped in Production Builds

Before debugging any UX/UI issues, ALWAYS enable console logging first.

Production Build Console Stripping

The Vite build configuration in frontend/vite.config.ts aggressively removes ALL console statements in production:

// Lines 60-62: Terser removes console logs
terserOptions: {
  compress: {
    drop_console: true, // ← This removes ALL console.log statements
    drop_debugger: true,
    pure_funcs: ['console.log', 'console.info', 'console.debug'],
  }
}

// Line 74: ESBuild also removes console logs
esbuild: {
  drop: ['console', 'debugger'], // ← Additional console removal
}

Debug Protocol for UX Issues

When debugging any UX/UI problems (buttons not working, state not updating, components not rendering):

1. Enable Console Logging FIRST

// In frontend/vite.config.ts

// TEMPORARILY change these lines:
drop_console: false, // Keep console logs for debugging
// pure_funcs: ['console.log', 'console.info', 'console.debug'], // Comment out

// AND:
drop: ['debugger'], // Keep console, only drop debugger

2. Add Debug Statements

// Example debug patterns:
console.log('[DEBUG] Component render - state:', someState);
console.log('[DEBUG] useEffect triggered - deps:', dep1, dep2);
console.log('[DEBUG] Button clicked - current state:', state);
console.log('[DEBUG] Store action called:', actionName, payload);

3. Rebuild and Test

make rebuild  # Required to apply vite.config.ts changes

4. Fix the Issue

Use browser dev tools console output to identify the root cause.

5. Clean Up and Restore Production Settings

// Restore production console stripping:
drop_console: true, // Remove console logs in production
pure_funcs: ['console.log', 'console.info', 'console.debug'],
drop: ['console', 'debugger'], // Additional cleanup

Remove debug console.log statements and rebuild.

Common UX Issue Patterns

1. Buttons not working: Usually state management or event handler issues
2. Components not re-rendering: Missing dependencies in hooks or store subscription problems
3. useEffect fighting with user actions: Dependencies causing infinite loops
4. Store state not updating: Action functions not properly bound or called

Example: The Sidebar Issue

The sidebar X button wasn't working because:

• useEffect dependency array included sidebarOpen
• When user clicked X → sidebarOpen became false
• useEffect fired → immediately called setSidebarOpen(true)
• User action was overridden by the useEffect

Without console debugging enabled, this was invisible!

Key Reminder

Never assume JavaScript is working correctly in production builds without console debugging enabled first. The aggressive console stripping makes silent failures very common.