sneak
65cc2014c6
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
85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
# 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
|
|
|
|
## 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
|
|
- 5-second timeout for unresponsive hosts
|
|
- Canvas-based sparkline rendering
|
|
- Tailwind CSS v4 for styling
|
|
|
|
## Build
|
|
|
|
```bash
|
|
# Install dependencies
|
|
yarn install
|
|
|
|
# Development server
|
|
yarn dev
|
|
|
|
# Production build
|
|
yarn build
|
|
|
|
# Preview production build
|
|
yarn preview
|
|
```
|
|
|
|
## 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
|
|
|
|
## 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
|