feat: comprehensive debug logging system with capture and download
Add a robust debug logging system that captures application state, user interactions, and system diagnostics for enhanced troubleshooting and development experience. ## ✨ Features Added ### 🔍 **Multi-Source Data Capture** - **Console Logging**: Captures all console.log, console.warn, console.error - **Error Handling**: Intercepts JavaScript errors and unhandled promise rejections - **Network Monitoring**: Tracks all fetch requests with timing and status - **User Actions**: Records user interactions and UI events - **Terminal Activity**: Captures shell input/output with ANSI cleaning - **Performance Metrics**: Memory usage, page load times, paint timing ### 📊 **System Information Collection** - Platform detection (macOS, Windows, Linux) - Browser and viewport information - Git repository status (branch, commit, dirty state) - Application state (model, provider, workbench view) - Performance and memory statistics ### 🎯 **User Interface Integration** - **Avatar Dropdown**: "Download Debug Log" option with download icon - **Header Actions**: "Debug Log" button alongside existing "Report Bug" - **One-Click Download**: Generates comprehensive debug reports - **Error Handling**: Graceful degradation with user feedback ### 🔧 **Technical Implementation** - **Circular Buffers**: Memory-efficient storage with fixed capacity (1K entries) - **Lazy Loading**: Zero performance impact when disabled (default state) - **Debouncing**: Terminal logs debounced at 100ms to prevent spam - **JSON Safe**: Circular reference protection and depth limiting - **Async Operations**: Non-blocking debug operations ### 📁 **Files Modified** - `app/utils/debugLogger.ts` (1,284 lines) - Core debug logging utility - `app/utils/logger.ts` - Integration with existing logging system - `app/utils/shell.ts` - Terminal activity capture - `app/components/@settings/core/AvatarDropdown.tsx` - UI integration - `app/components/header/HeaderActionButtons.client.tsx` - Header button - `app/root.tsx` - Initialization and setup - `app/routes/api.git-info.ts` - Git information endpoint ## 🚀 **Benefits** - **Enhanced Debugging**: Comprehensive data collection for issue reproduction - **Performance Monitoring**: Built-in performance tracking and memory analysis - **User Support**: Easy debug log generation for support tickets - **Developer Experience**: Rich debugging data without performance penalty - **Production Ready**: Opt-in system with zero impact on regular users ## 🔒 **Security & Privacy** - Client-side only operation (no server transmission) - User-controlled data collection and export - No sensitive information captured automatically - Manual opt-in required for debug mode activation ## 📈 **Performance Impact** - **Disabled by Default**: No performance impact for regular users - **Lazy Initialization**: Components loaded only when needed - **Memory Bounded**: Fixed-size buffers prevent memory leaks - **Non-Blocking**: All operations are asynchronous - **Efficient Storage**: Circular buffers with automatic cleanup ## 🔄 **Integration Points** - Seamlessly integrates with existing `logger` utility - Compatible with current shell/terminal implementation - Works with existing error handling patterns - Maintains backward compatibility This implementation provides developers and users with powerful debugging capabilities while maintaining excellent performance and user experience.
This commit is contained in:
18
app/root.tsx
18
app/root.tsx
@@ -93,6 +93,24 @@ export default function App() {
|
||||
userAgent: navigator.userAgent,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
// Initialize debug logging with improved error handling
|
||||
import('./utils/debugLogger')
|
||||
.then(({ debugLogger }) => {
|
||||
/*
|
||||
* The debug logger initializes itself and starts disabled by default
|
||||
* It will only start capturing when enableDebugMode() is called
|
||||
*/
|
||||
const status = debugLogger.getStatus();
|
||||
logStore.logSystem('Debug logging ready', {
|
||||
initialized: status.initialized,
|
||||
capturing: status.capturing,
|
||||
enabled: status.enabled,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
logStore.logError('Failed to initialize debug logging', error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user