Request Activity Monitor

A real-time request activity visualization system that tracks and displays all HTTP requests to your Val Town application with live updates via Server-Sent Events (SSE).

• Real-time monitoring: Live updates of all incoming requests via SSE
• Request statistics: Total requests, success rate, error count, and average response time
• Request details: Method, path, status code, duration, IP address, and user agent
• Test endpoints: Built-in buttons to generate test traffic
• Responsive design: Works on desktop and mobile devices
• Always returns 200 OK: The monitoring endpoint itself never fails

├── backend/
│   └── index.ts             # Main Hono server with SSE and request logging
├── frontend/
│   └── index.html           # Dashboard UI with live updates
└── README.md               # This file

1. Request Middleware: All requests are logged via Hono middleware that captures:

   • Request method, path, and headers
   • Response status and duration
   • Client IP and user agent
   • Unique request ID and timestamp

2. Server-Sent Events: The /api/events endpoint maintains persistent connections with browsers and broadcasts new request data in real-time

3. In-Memory Storage: Recent requests (last 100) are stored in memory for quick access and initial page load

4. Live Dashboard: The frontend connects via SSE and updates the UI immediately when new requests arrive

• GET / - Main dashboard (always returns 200 OK)
• GET /api/events - SSE endpoint for live request updates
• GET /api/requests - JSON API for recent requests
• GET /api/test - Test endpoint for generating activity
• POST /api/test - Test POST endpoint
• GET /api/slow - Slow endpoint (2s delay) for testing
• GET /* - Any other path returns 404 (also logged)

1. Visit the main dashboard at /
2. The page will automatically connect to the SSE stream
3. Use the test buttons to generate sample requests
4. Watch requests appear in real-time with full details
5. Monitor statistics in the summary cards

• Built with Hono for the backend API framework
• Uses native Server-Sent Events for real-time updates
• TailwindCSS for responsive styling
• No external dependencies for the frontend
• Handles SSE connection failures with automatic reconnection
• Animates new requests for better visual feedback

The dashboard shows connection status with colored indicators:

• 🟢 Green: Connected to SSE stream
• 🟡 Yellow: Connecting/reconnecting
• 🔴 Red: Disconnected

The system automatically attempts to reconnect if the SSE connection is lost.