106 lines
3.0 KiB
Markdown
106 lines
3.0 KiB
Markdown
# 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
|
||
|
||
## Technical Details
|
||
|
||
- 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
|
||
|
||
## Build
|
||
|
||
```bash
|
||
# Install dependencies
|
||
yarn install
|
||
|
||
# Development server
|
||
yarn dev
|
||
|
||
# Production build
|
||
yarn build
|
||
|
||
# Preview production build
|
||
yarn preview
|
||
```
|
||
|
||
## Docker
|
||
|
||
```bash
|
||
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
|
||
|
||
## Deployment
|
||
|
||
After running `yarn build`, deploy the contents of the `dist/` directory to any static file host:
|
||
|
||
- AWS S3
|
||
- Google Cloud Storage
|
||
- Cloudflare Pages
|
||
- Vercel
|
||
- Netlify
|
||
- GitHub Pages
|
||
|
||
Or use the Docker image behind a reverse proxy.
|
||
|
||
## Output Structure
|
||
|
||
```
|
||
dist/
|
||
├── index.html
|
||
└── assets/
|
||
├── index-*.css
|
||
└── index-*.js
|
||
```
|
||
|
||
All assets are bundled and minified. No external dependencies at runtime.
|
||
|
||
## Browser Compatibility
|
||
|
||
Requires modern browser with:
|
||
- ES modules support
|
||
- Fetch API
|
||
- Canvas API
|
||
- CSS custom properties
|
||
|
||
## Limitations
|
||
|
||
- **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.
|
||
|
||
## License
|
||
|
||
MIT
|