NetWatch

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

Features

Real-time monitoring: Updates every 2s with 300s history sparklines
9 WAN hosts: Google Cloud, AWS, GitHub, Cloudflare, Azure, DigitalOcean, Fastly, Akamai, datavi.be
Local network group: Local gateway (192.168.100.1) tracked separately
Health indicator: Overall status box — green (HEALTHY) or red (DEGRADED) based on WAN reachability
Summary stats: Reachable count, min/max/avg latency across WAN hosts only
Visual latency display: Large color-coded figures with canvas sparkline graphs
Color coding:
- Green: <50ms (excellent)
- Lime: <100ms (good)
- Yellow: <200ms (moderate)
- Orange: <500ms (poor)
- Red: >500ms (bad)
- Gray: offline/unreachable
Fixed chart axes: Y-axis 0–1000ms, X-axis 0–300s
Play/pause: Pause stops probes but history keeps scrolling (blank gaps, no false outage)
Clickable URLs: Service URLs open in new tabs
>1000ms clamped: Anything over 1s is treated as 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
1-second timeout for unresponsive hosts (>1000ms clamped to unreachable)
Canvas-based sparkline rendering with fixed axes
Tailwind CSS v4 for styling
Local gateway excluded from WAN summary statistics

# Install dependencies
yarn install

# Development server
yarn dev

# Production build
yarn build

# Preview production build
yarn preview

docker build -t netwatch .
docker run -p 8080:80 netwatch

The nginx config:

Trusts X-Forwarded-For from RFC1918 reverse proxies (10/8, 172.16/12, 192.168/16)
Access log goes to stdout
Static assets cached with immutable headers

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

Or use the Docker image behind a reverse proxy.

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