Request Activity Monitor

\n \n Connecting...\n

\n \n

Total Requests

Success (2xx)

Errors (4xx/5xx)

0ms

Avg Duration

\n \n

\n \n \n \n \n \n

\n \n

Live Request Feed

\n \n

\n\n \n\n",[],[180,187],[180],{"_103":196,"_95":197,"_152":198,"_154":-5,"_155":137,"_156":199,"_158":159,"_105":200,"_100":32,"_161":190,"_163":201,"_164":22,"_165":-5,"_166":202,"_98":203},"68767c46-9405-11f0-bf8e-0224a6c84d84","README.md","68767d18-9405-11f0-bf8e-0224a6c84d84",3,["D",1758141139677],"# Request Activity Monitor\n\nA 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).\n\n## Features\n\n- **Real-time monitoring**: Live updates of all incoming requests via SSE\n- **Request statistics**: Total requests, success rate, error count, and average response time\n- **Request details**: Method, path, status code, duration, IP address, and user agent\n- **Test endpoints**: Built-in buttons to generate test traffic\n- **Responsive design**: Works on desktop and mobile devices\n- **Always returns 200 OK**: The monitoring endpoint itself never fails\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with SSE and request logging\n├── frontend/\n│ └── index.html # Dashboard UI with live updates\n└── README.md # This file\n```\n\n## How It Works\n\n1. **Request Middleware**: All requests are logged via Hono middleware that captures:\n - Request method, path, and headers\n - Response status and duration\n - Client IP and user agent\n - Unique request ID and timestamp\n\n2. **Server-Sent Events**: The `/api/events` endpoint maintains persistent connections with browsers and broadcasts new request data in real-time\n\n3. **In-Memory Storage**: Recent requests (last 100) are stored in memory for quick access and initial page load\n\n4. **Live Dashboard**: The frontend connects via SSE and updates the UI immediately when new requests arrive\n\n## API Endpoints\n\n- `GET /` - Main dashboard (always returns 200 OK)\n- `GET /api/events` - SSE endpoint for live request updates\n- `GET /api/requests` - JSON API for recent requests\n- `GET /api/test` - Test endpoint for generating activity\n- `POST /api/test` - Test POST endpoint\n- `GET /api/slow` - Slow endpoint (2s delay) for testing\n- `GET /*` - Any other path returns 404 (also logged)\n\n## Usage\n\n1. Visit the main dashboard at `/`\n2. The page will automatically connect to the SSE stream\n3. Use the test buttons to generate sample requests\n4. Watch requests appear in real-time with full details\n5. Monitor statistics in the summary cards\n\n## Technical Details\n\n- Built with Hono for the backend API framework\n- Uses native Server-Sent Events for real-time updates\n- TailwindCSS for responsive styling\n- No external dependencies for the frontend\n- Handles SSE connection failures with automatic reconnection\n- Animates new requests for better visual feedback\n\n## Connection Status\n\nThe dashboard shows connection status with colored indicators:\n- 🟢 Green: Connected to SSE stream\n- 🟡 Yellow: Connecting/reconnecting\n- 🔴 Red: Disconnected\n\nThe system automatically attempts to reconnect if the SSE connection is lost.",[],[197],"files",[149,168,178,185,195],"counts",{"_208":32,"_209":157,"_210":32,"_211":32},"pulls","branches","forks","envVars","contents",[],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":136,"_158":159,"_105":215,"_100":157,"_161":173,"_163":174,"_164":22,"_165":-5,"_98":216},["D",1758141143698],[151,170],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":225,"_147":230,"_204":246,"_190":247,"_212":249,"_250":-5,"_251":22,"_252":-5,"_253":-5,"_254":-5,"_255":256},{"_103":104,"_95":96,"_105":226,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":227,"_131":228,"_134":229,"_146":22},["D",1758140964046],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[231,237,243],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":232,"_98":236},[233],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":136,"_158":159,"_105":172,"_100":157,"_161":173,"_163":174,"_164":22,"_165":-5,"_166":234,"_98":235},[],[151,170],[151],{"_103":179,"_95":180,"_152":181,"_154":-5,"_155":137,"_156":182,"_158":159,"_105":183,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":238,"_98":242},[239],{"_103":186,"_95":187,"_152":188,"_154":181,"_155":137,"_156":182,"_158":159,"_105":189,"_100":32,"_161":190,"_163":191,"_164":22,"_165":-5,"_166":240,"_98":241},[],[180,187],[180],{"_103":196,"_95":197,"_152":198,"_154":-5,"_155":137,"_156":199,"_158":159,"_105":200,"_100":32,"_161":190,"_163":201,"_164":22,"_165":-5,"_166":244,"_98":245},[],[197],[231,233,237,239,243],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":136,"_158":159,"_105":215,"_100":157,"_161":173,"_163":174,"_164":22,"_165":-5,"_98":248},[151,170],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]