Go to file

sneak 3069b4692d Add fixed axes, color-coded lines, summary stats, and >1000ms clamping - 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		2026-01-31 14:22:35 -08:00
src	Add fixed axes, color-coded lines, summary stats, and >1000ms clamping	2026-01-31 14:22:35 -08:00
.gitignore	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00
index.html	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00
package.json	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00
README.md	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00
vite.config.js	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00
yarn.lock	Initial implementation of NetWatch network latency monitor	2026-01-29 21:32:19 -08:00

NetWatch

Real-time network latency monitor SPA designed to be served from a static bucket.

Features

Real-time monitoring: Updates every 250ms
10 monitored hosts: Google Cloud, AWS, GitHub, Cloudflare, Azure, DigitalOcean, Fastly, Akamai, local gateway (192.168.100.1), and datavi.be
Visual latency display: Large color-coded latency figures (NNNms format)
Sparkline graphs: 300-second history visualization for each host
Color coding:
- Green: <50ms (excellent)
- Lime: <100ms (good)
- Yellow: <200ms (moderate)
- Orange: <500ms (poor)
- Red: >500ms (bad)
- Gray: offline/unreachable
Zero runtime dependencies: All resources bundled into build artifacts
IPv4 only: Designed for IPv4 connectivity testing

Latency measured via HEAD requests with cache-busting
Uses mode: 'no-cors' to allow cross-origin requests where CORS headers aren't present
5-second timeout for unresponsive hosts
Canvas-based sparkline rendering
Tailwind CSS v4 for styling

# Install dependencies
yarn install

# Development server
yarn dev

# Production build
yarn build

# Preview production build
yarn preview

After running yarn build, deploy the contents of the dist/ directory to any static file host:

dist/
├── index.html
└── assets/
    ├── index-*.css
    └── index-*.js

All assets are bundled and minified. No external dependencies at runtime.

Requires modern browser with:

CORS: Some hosts may block cross-origin HEAD requests. The app uses no-cors mode which allows the request but provides opaque responses. Latency is still measurable based on request timing.
Local gateway: The 192.168.100.1 endpoint requires the host to be accessible from your network.
Network conditions: Measurements reflect browser-to-endpoint latency, which includes your local network, ISP, and internet routing.

MIT