[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_200":201,"_202":203},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_38":-7,"_119":-5,"_19":120,"_121":122,"_123":124,"_125":126,"_127":128,"_21":129,"_130":-5,"_131":-5,"_132":24,"_133":134,"_135":82,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","jeffreyyoung","name","network_activity_visualizer","branchName","main","path","frontend/index.html","project",{"_32":70,"_13":14,"_36":71,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":-5,"_78":-5,"_30":66,"_79":80,"_81":82,"_83":82,"_84":-5,"_85":26,"_40":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_51":99,"_100":101,"_102":103,"_104":24},"file",{"_61":62,"_13":63,"_64":21,"_65":24,"_69":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_21":53,"_54":-5,"_55":-5,"_56":-5,"_57":-5,"_58":59},"id","5ac6b926-9405-11f0-ab17-0224a6c84d84","branchId","ffc715f2-9404-11f0-8450-0224a6c84d84","createdAt",["D",1758141116705],"version",2,"orgId","fd372ed8-9526-47fc-9a7a-9bdb45c58177","parentId","38e919e8-9405-11f0-bc07-0224a6c84d84","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":66,"_40":41,"_11":12,"_67":68},{"_61":62,"_13":63,"_64":21,"_65":24},"pull","merge","revert","multiple","commits",[60],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_21":53,"_54":-5,"_55":-5,"_56":-5},"fileId","5ac56fbc-9405-11f0-ab17-0224a6c84d84","index.html","fileType","deleted","3b4e808e-fb1b-4130-93cd-9c30e28e6cfb","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlBiWmVId3NYSFQ1VmtnTTZSQ1BCM082Tk0ifQ","deletedAtVersion","ffc6db14-9404-11f0-8450-0224a6c84d84",["D",1758140964046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","pinnedFileId","38e7d1fa-9405-11f0-bc07-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_118":68},"org",{"_11":12,"_114":-5,"_67":68,"_30":66,"_115":116,"_117":24},"branch",{"_38":105,"_13":16,"_32":35,"_106":70,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"isOwned",4,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":70,"_13":14,"_36":196,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":-5,"_78":-5,"_30":66,"_79":80,"_81":82,"_83":82,"_84":-5,"_85":26,"_40":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_51":197,"_100":198,"_102":199,"_104":24},"tree",[161,163,165],"files",[161,162,163,164,165],"counts",{"_150":26,"_151":152,"_153":26,"_154":155,"_156":157},"contents",[],{"_32":140,"_13":63,"_61":62,"_42":141,"_34":35,"_142":39,"_143":82,"_36":144,"_38":26,"_64":21,"_145":146,"_65":24,"_147":-5,"_17":148},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"5ac56ee0-9405-11f0-ab17-0224a6c84d84","f2d17730-3037-4971-9232-26977c7791f5","branchVersion","latest",["D",1758141116705],"content","\n\n\n \n \n Request Activity Monitor\n \n \n \n\n\n

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","label",[149,63],"frontend","pulls","branches",1,"forks","envVars",{"_158":26,"_160":26},"connections",{"_158":26,"_159":26},"count","unfilledCount","emptyCount",{"_32":192,"_13":191,"_61":185,"_42":-5,"_34":35,"_142":152,"_143":82,"_36":193,"_38":26,"_64":180,"_145":-5,"_65":24,"_147":-5,"_172":194,"_17":195},{"_32":183,"_13":184,"_61":80,"_42":185,"_34":35,"_142":105,"_143":82,"_36":186,"_38":152,"_64":187,"_145":188,"_65":24,"_147":-5,"_172":189,"_17":190},{"_32":178,"_13":149,"_61":141,"_42":-5,"_34":35,"_142":39,"_143":82,"_36":179,"_38":26,"_64":180,"_145":-5,"_65":24,"_147":-5,"_172":181,"_17":182},{"_32":140,"_13":63,"_61":62,"_42":141,"_34":35,"_142":39,"_143":82,"_36":175,"_38":26,"_64":21,"_145":146,"_65":24,"_147":-5,"_172":176,"_17":177},{"_32":166,"_13":167,"_61":168,"_42":-5,"_34":35,"_142":169,"_143":82,"_36":170,"_38":26,"_64":21,"_145":171,"_65":24,"_147":-5,"_172":173,"_17":174},"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.","children",[],[167],["D",1758141116705],[],[149,63],"5ac589b6-9405-11f0-ab17-0224a6c84d84",["D",1758141116705],"directory",[164],[149],"6adc442a-9405-11f0-aab5-0224a6c84d84","index.ts","fe8a0078-b9ed-4ffd-a8d2-66338c03bb7e",["D",1758141143698],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Store for active SSE connections\nconst sseConnections = new Set();\n\n// Store recent requests (in-memory for simplicity)\nconst recentRequests: Array<{\n id: string;\n timestamp: string;\n method: string;\n path: string;\n userAgent?: string;\n ip?: string;\n status: number;\n duration?: number;\n}> = [];\n\n// Middleware to log all requests\napp.use(\"*\", async (c, next) => {\n const startTime = Date.now();\n const requestId = crypto.randomUUID();\n \n const requestData = {\n id: requestId,\n timestamp: new Date().toISOString(),\n method: c.req.method,\n path: c.req.path,\n userAgent: c.req.header(\"user-agent\"),\n ip: c.req.header(\"cf-connecting-ip\") || c.req.header(\"x-forwarded-for\") || \"unknown\",\n status: 200, // Will be updated after response\n };\n\n await next();\n \n const duration = Date.now() - startTime;\n const finalRequestData = {\n ...requestData,\n status: c.res.status,\n duration,\n };\n\n // Add to recent requests (keep last 100)\n recentRequests.unshift(finalRequestData);\n if (recentRequests.length > 100) {\n recentRequests.pop();\n }\n\n // Broadcast to all SSE connections\n const message = `data: ${JSON.stringify(finalRequestData)}\\n\\n`;\n for (const controller of sseConnections) {\n try {\n controller.enqueue(new TextEncoder().encode(message));\n } catch (error) {\n // Remove dead connections\n sseConnections.delete(controller);\n }\n }\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main dashboard route\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data\n const initialData = {\n recentRequests: recentRequests.slice(0, 50), // Send last 50 requests\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// SSE endpoint for live updates\napp.get(\"/api/events\", c => {\n const stream = new ReadableStream({\n start(controller) {\n // Add connection to active connections\n sseConnections.add(controller);\n \n // Send initial connection message\n const welcomeMessage = `data: ${JSON.stringify({\n type: \"connected\",\n timestamp: new Date().toISOString(),\n message: \"Connected to request activity stream\"\n })}\\n\\n`;\n \n controller.enqueue(new TextEncoder().encode(welcomeMessage));\n },\n cancel() {\n // Remove connection when client disconnects\n sseConnections.delete(this);\n }\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n});\n\n// API endpoint to get recent requests\napp.get(\"/api/requests\", c => {\n return c.json({\n requests: recentRequests.slice(0, 50),\n total: recentRequests.length,\n });\n});\n\n// Test endpoints to generate activity\napp.get(\"/api/test\", c => {\n return c.json({ message: \"Test endpoint hit!\", timestamp: new Date().toISOString() });\n});\n\napp.post(\"/api/test\", async c => {\n const body = await c.req.json().catch(() => ({}));\n return c.json({ message: \"POST test endpoint hit!\", body, timestamp: new Date().toISOString() });\n});\n\napp.get(\"/api/slow\", async c => {\n // Simulate slow endpoint\n await new Promise(resolve => setTimeout(resolve, 2000));\n return c.json({ message: \"Slow endpoint completed\", timestamp: new Date().toISOString() });\n});\n\n// Catch-all route for 404s\napp.notFound(c => {\n return c.json({ error: \"Not found\", path: c.req.path }, 404);\n});\n\nexport default app.fetch;",[],[191,184],"backend","38e7ec44-9405-11f0-bc07-0224a6c84d84",["D",1758141059888],[162],[191],["D",1758140964046],{"_11":12,"_118":68},{"_11":12,"_114":-5,"_67":68,"_30":66,"_115":116,"_117":24},{"_38":105,"_13":16,"_32":35,"_106":70,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"ctx",{"_51":-5,"_137":233,"_234":235,"_236":237,"_238":24,"_239":24,"_240":24,"_241":82,"_242":-5,"_243":-7,"_244":-7,"_245":26,"_246":24,"_247":24,"_248":-5,"_249":24,"_250":24,"_251":24,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":16,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html