ente/infra/experiments/logs-viewer

Ente Log Viewer

A web-based log viewer for analyzing Ente application logs. This tool provides similar functionality to the mobile log viewer, allowing you to upload, filter, and analyze log files from customer support requests.

Features

📁 File Upload

• Drag and drop ZIP files containing log files
• Automatic extraction and parsing of log files
• Support for daily log files format (YYYY-M-D.log)

🔍 Search and Filtering

• Text Search: Search through log messages, logger names, and error content
• Logger Filtering: Use logger:ServiceName syntax to filter by specific loggers
• Wildcard Support: Use logger:Auth* to match all loggers starting with "Auth"
• Level Filtering: Filter by log levels (SEVERE, WARNING, INFO, etc.)
• Process Filtering: Filter by foreground/background processes
• Timeline Filtering: Filter by date/time ranges

📊 Analytics

• Logger statistics showing most active components
• Log level distribution charts
• Click-to-filter from analytics charts

🎨 UI Features

• Color-coded log levels: Red for SEVERE, orange for WARNING, etc.
• Process indicators: Visual distinction between foreground and background processes
• Active filter chips: Visual indication of applied filters with easy removal
• Log detail view: Click any log entry for detailed information
• Sort options: Sort by newest first or oldest first
• Responsive design: Works on desktop and mobile devices

📤 Export

• Export filtered logs as text files
• Copy individual log entries to clipboard
• Maintain original formatting and error details

Usage

Starting the Application

1. Local Development:

   cd infra/experiments/logs-viewer
   python3 -m http.server 8080
   

   Open http://localhost:8080 in your browser

2. Upload Log Files:

   • Drag and drop a ZIP file containing .log files
   • Or click "Choose ZIP File" to browse for files

Log Format Support

The viewer understands the Ente log format as generated by super_logging.dart:

[process] [loggerName] [LEVEL] [timestamp] message

Examples:

• [bg] [SyncService] [INFO] [2025-08-24 01:36:03.677678] Syncing started
• [CollectionsService] [WARNING] [2025-08-24 01:36:04.123456] Connection failed

Multi-line Error Support:

• Automatically parses ⤷ error detail lines
• Extracts stack traces and error IDs
• Handles inline error messages and exceptions

Filtering Examples

• Search by text: connection failed
• Filter by logger: logger:SyncService
• Multiple loggers: logger:Sync* logger:Collection*
• Combined search: logger:Auth* login failed

Keyboard Shortcuts

• Search: Click search bar or start typing
• Clear search: Click X button or clear the input
• Sort toggle: Click sort arrow button
• Filter dialog: Click filter button

Technical Details

Supported Log Levels

• SHOUT: Purple - Highest priority
• SEVERE: Red - Errors and exceptions
• WARNING: Orange - Warning conditions
• INFO: Blue - Informational messages
• CONFIG: Green - Configuration messages
• FINE/FINER/FINEST: Gray - Debug messages

Process Types

• Foreground: Main app processes
• Background (bg): Background tasks
• Firebase Background (fbg): Firebase-related background processes

Performance

• Lazy loading: Only renders visible log entries
• Efficient filtering: Client-side filtering with optimized algorithms
• Memory management: Handles large log files (tested with 100k+ entries)

Sample Log Files

For testing, you can use any ZIP file containing .log files from Ente mobile app logs.

Development

File Structure

logs-viewer/
├── index.html          # Main HTML structure
├── styles.css          # CSS styling
├── script.js           # JavaScript logic
├── README.md           # This documentation
└── references/         # UI reference screenshots

Key JavaScript Classes

• LogViewer: Main application class
• Log parsing logic in parseLogFile() and parseLogLine()
• Filter management in applyCurrentFilter()
• UI rendering in renderLogs() and createLogEntryHTML()

Adding Features

1. New Filter Types: Extend currentFilter object and matchesFilter() method
2. New Log Formats: Update parsing patterns in parseLogLine()
3. UI Components: Add HTML elements and CSS classes, wire up in initializeEventListeners()

Troubleshooting

Common Issues

1. ZIP file not loading:

   • Ensure ZIP contains .log files
   • Check browser console for errors
   • Try a smaller file first

2. Logs not parsing correctly:

   • Check log format matches expected pattern
   • Look for console warnings about parsing failures
   • Verify timestamp format is correct

3. Performance issues with large files:

   • The viewer handles pagination (100 logs at a time)
   • Use filters to reduce the dataset
   • Close other browser tabs to free memory

4. Search not working:

   • Check for typos in logger names
   • Use wildcard syntax: logger:Service*
   • Search is case-insensitive for message content

Browser Compatibility

• Recommended: Chrome 80+, Firefox 75+, Safari 13+
• Required: ES6 support, Fetch API, File API
• Dependencies: JSZip library for ZIP file handling

Future Enhancements

• Real-time log streaming
• Advanced regex search
• Log correlation and grouping
• Performance metrics dashboard
• Dark theme support
• Export to JSON/CSV formats