Skip to content

Conversation

@Stijnus
Copy link
Collaborator

@Stijnus Stijnus commented Sep 6, 2025

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.

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.
@Stijnus Stijnus merged commit 7547430 into stackblitz-labs:main Sep 7, 2025
15 checks passed
@Stijnus Stijnus deleted the BOLTDIY_LOGGING_DEBUGGING_FEAT branch September 19, 2025 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant