[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_188":189,"_190":191},"routes/_app.x.$handle.$name",{"_93":92,"_31":42,"_101":83,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":24,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","68767d18-9405-11f0-bf8e-0224a6c84d84","name","fileType","content","# 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.","createdAt",["D",1758141139677],"branchVersion","branchId","ffc715f2-9404-11f0-8450-0224a6c84d84","id","ffc6db14-9404-11f0-8450-0224a6c84d84","network_activity_visualizer",["D",1758140964046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","3b4e808e-fb1b-4130-93cd-9c30e28e6cfb","pinnedFileId","38e7d1fa-9405-11f0-bc07-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","fd372ed8-9526-47fc-9a7a-9bdb45c58177","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},"branch",{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"isOwned",4,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jeffreyyoung","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlBiWmVId3NYSFQ1VmtnTTZSQ1BCM082Tk0ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":184,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":185,"_77":186,"_79":187,"_81":24},"tree",[155,157,159],"files",[155,156,157,158,159],"counts",{"_145":59,"_146":142,"_147":59,"_148":149,"_150":151},"contents",[123,124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":139,"_31":140,"_29":141,"_127":-5,"_38":39,"_37":142,"_128":55,"_35":143,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_26":144},{"_40":132,"_31":133,"_29":134,"_127":-5,"_38":39,"_37":135,"_128":55,"_35":136,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_26":138},{"_40":126,"_31":27,"_29":30,"_127":-5,"_38":39,"_37":14,"_128":55,"_35":129,"_13":59,"_32":20,"_33":34,"_23":24,"_130":-5,"_26":131},"68767c46-9405-11f0-bf8e-0224a6c84d84","parentId","latest",["D",1758141139677],"label",[27],"5ac589b6-9405-11f0-ab17-0224a6c84d84","frontend","f2d17730-3037-4971-9232-26977c7791f5",2,["D",1758141116705],"directory",[133],"38e7ec44-9405-11f0-bc07-0224a6c84d84","backend","fe8a0078-b9ed-4ffd-a8d2-66338c03bb7e",1,["D",1758141059888],[140],"pulls","branches","forks","envVars",{"_152":59,"_154":59},"connections",{"_152":59,"_153":59},"count","unfilledCount","emptyCount",{"_40":139,"_31":140,"_29":141,"_127":-5,"_38":39,"_37":142,"_128":55,"_35":181,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_161":182,"_26":183},{"_40":174,"_31":175,"_29":53,"_127":141,"_38":39,"_37":142,"_128":24,"_35":176,"_13":59,"_32":177,"_33":178,"_23":24,"_130":-5,"_161":179,"_26":180},{"_40":132,"_31":133,"_29":134,"_127":-5,"_38":39,"_37":135,"_128":55,"_35":171,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_161":172,"_26":173},{"_40":164,"_31":165,"_29":166,"_127":134,"_38":39,"_37":135,"_128":55,"_35":167,"_13":59,"_32":20,"_33":168,"_23":24,"_130":-5,"_161":169,"_26":170},{"_40":126,"_31":27,"_29":30,"_127":-5,"_38":39,"_37":14,"_128":55,"_35":160,"_13":59,"_32":20,"_33":34,"_23":24,"_130":-5,"_161":162,"_26":163},["D",1758141139677],"children",[],[27],"5ac56ee0-9405-11f0-ab17-0224a6c84d84","index.html","5ac56fbc-9405-11f0-ab17-0224a6c84d84",["D",1758141116705],"\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",[],[133,165],["D",1758141116705],[158],[133],"38e7d146-9405-11f0-bc07-0224a6c84d84","index.ts",["D",1758141059888],"script","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;",[],[140,175],["D",1758141059888],[156],[140],["D",1758140964046],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"ctx",{"_75":-5,"_120":221,"_222":223,"_224":225,"_226":24,"_227":24,"_228":24,"_229":55,"_230":-5,"_231":-7,"_232":-7,"_233":59,"_234":24,"_235":24,"_236":-5,"_237":24,"_238":24,"_239":24,"_240":-5},"ENV",{"_192":193,"_194":195,"_196":83,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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"]

Diff · v3