Recipe
Event Log Viewer with Filters
Build a real-time event log dashboard with severity filters, search, and auto-scroll. Uses native WebSocket and Tailwind CSS.
Error
Warning
Info
Debug
14:32:01ERRORConnection refused on port 443
14:32:04WARNRetry attempt 2/5 in 3s
14:32:07INFOReconnected successfully
14:32:10DEBUGHeartbeat sent — latency 12ms
14:32:15INFOSession token refreshed
Showing 5 of 142 events
Implementation Notes
- • Connect to WebSocket endpoint for live event stream
- • Filter by severity using toggle chips above the log
- • Search filters client-side by message content
- • Auto-scroll locks to bottom unless user scrolls up
- • Virtualize rows for large event volumes