Architecture:
- Extract AppState and HostState classes (no global mutable state)
- Extract SparklineRenderer class with static methods
- Extract CONFIG object for all constants
- Break monolithic functions into focused helpers
Features:
- Clickable service URLs (open in new tab, existing styling)
- Health status box above summary (red DEGRADED if >half unreachable)
- Local Gateway separated into bottom group
- Local Gateway excluded from WAN min/max/avg summary stats
- Pause stops probes but history keeps scrolling (blank gaps, no false outage)
- WAN_HOSTS / LOCAL_HOSTS separation with indexed rendering
- Fixed Y-axis (0-1000ms) with tick labels
- Fixed X-axis showing seconds ago (-0s to -300s)
- Sparkline segments color-coded by latency value
- Summary line showing reachable count, min/max/avg across hosts
- Latencies >1000ms now clamped to unreachable/timeout
- Canvas height increased to 80px for axis labels
Resource Timing entries are added asynchronously after fetch resolves,
causing a race condition. The simple performance.now() around fetch
gives accurate latency measurements without this issue.
Resource Timing API records latency even for error responses.
Now we check for timing data regardless of fetch success/failure,
only reporting unreachable if no timing data is available.
- Use Resource Timing API for accurate network latency instead of
performance.now() around fetch (fixes ~600ms measurement error)
- Chart now shows latest sample at right edge, growing left
- Reduce request timeout from 5000ms to 1000ms
- Update interval changed from 250ms to 2000ms (150 history points)
- Add large play/pause toggle button in header
- Show running/paused status indicator
- Pause stops all network requests, resume restarts them
SPA for real-time latency monitoring to 10 internet hosts:
- 250ms update interval with 300s history sparkline graphs
- Color-coded latency display (green <50ms to red >500ms)
- HEAD request timing with no-cors mode for cross-origin support
- Built with Vite + Tailwind CSS v4, all dependencies bundled
- Designed for static bucket deployment
