Log Viewer

A beautiful, interactive log viewer for structured JSON logs with filtering, search, and real-time capabilities.

Features

  • šŸ“Š 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

Usage

  1. Visit the application at the deployed URL
  2. Paste your logs in the input area or upload a log file
  3. Click "Parse Logs" or use "Load Sample" to see example data
  4. 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
  5. Switch between Table View (high-density) and List View (detailed)
  6. Click on individual log entries to expand and see detailed JSON view
  7. Use "Expand All" / "Collapse All" for bulk operations in List View

Log Format

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

Project Structure

ā”œā”€ā”€ 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