89 lines
2.9 KiB
Markdown
89 lines
2.9 KiB
Markdown
# 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. |