# 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:

```typescript
// 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
```typescript
// 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
```typescript
// 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
```bash
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
```typescript
// 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.