A beautiful, interactive log viewer for structured JSON logs with filtering, search, and real-time capabilities.
- š High-Density Table View: Ultra-compact table showing maximum logs with all data visible
- š Reverse Chronological Order: Most recent logs appear at the top
- š Complete Data Display: Shows ALL log data in a compact format, not just method names
- š Advanced Filtering: Filter by log level, method, time range, and custom fields
- šØ Syntax Highlighting: Color-coded log levels and JSON formatting
- ā” Maximum Information Density: See 50+ logs at once in table view
- š± Responsive Design: Works on desktop and mobile devices
- š Deep Linking: Share specific log views with URL parameters
- Visit the application at the deployed URL
- Paste your logs in the input area or upload a log file
- Click "Parse Logs" or use "Load Sample" to see example data
- Use the filters to narrow down the logs you want to see:
- Filter by log level (trace, debug, info, warn, error, fatal)
- Search across all log content
- Filter by specific methods or hostnames
- Set time range filters
- Switch between Table View (high-density) and List View (detailed)
- Click on individual log entries to expand and see detailed JSON view
- Use "Expand All" / "Collapse All" for bulk operations in List View
The viewer supports structured JSON logs with fields like:
level: Log level (info, warn, error, debug)
time: Timestamp
method: Method name
msg: Log message
params: Additional parameters
- Custom fields
āāā backend/
ā āāā index.ts # Main Hono server
ā āāā routes/
ā āāā logs.ts # Log processing endpoints
āāā frontend/
ā āāā index.html # Main HTML template
ā āāā components/
ā ā āāā App.tsx # Main application component
ā ā āāā LogViewer.tsx # Log display component
ā ā āāā LogFilters.tsx # Filter controls
ā āāā utils/
ā āāā logParser.ts # Log parsing utilities
āāā shared/
āāā types.ts # Shared TypeScript types