35 lines
1.4 KiB
Markdown
35 lines
1.4 KiB
Markdown
|
---
|
||
|
|
title: "Real-Time Metrics Dashboard"
|
||
|
|
date: 2024-11
|
||
|
|
status: "live"
|
||
|
|
tags: ["React", "WebSockets", "D3.js", "Go", "dashboard", "metrics"]
|
||
|
|
repo: ""
|
||
|
|
demo: "https://example.com"
|
||
|
|
---
|
||
|
|
|
||
|
|
# Real-Time Metrics Dashboard
|
||
|
|
|
||
|
|
Platform metrics dashboard streamed over WebSockets with server-side aggregations.
|
||
|
|
|
||
|
|
## Description
|
||
|
|
|
||
|
|
An internal dashboard for monitoring KPIs of a SaaS platform in real time: active users, hourly revenue, 5xx errors, p95 latency. The frontend is React with D3 charts; the backend is Go opening a WebSocket stream to all connected dashboards.
|
||
|
|
|
||
|
|
## Tech stack
|
||
|
|
|
||
|
|
- **Frontend:** React, D3.js (custom charts, not Recharts)
|
||
|
|
- **Backend:** Go with gorilla-style WebSockets
|
||
|
|
- **Transport:** Server-Sent Events style streaming with 5s aggregations
|
||
|
|
- **Charts:** D3 for transitions between time windows (1h, 24h, 7d)
|
||
|
|
|
||
|
|
## Main features
|
||
|
|
|
||
|
|
1. Real-time KPI tiles (active users, hourly revenue, error rate, p95 latency)
|
||
|
|
2. Streaming updates via WebSocket with 5s server-side aggregation
|
||
|
|
3. Backpressure: when the browser tab is backgrounded, server reduces frequency to 1/min
|
||
|
|
4. Custom D3 charts with smooth transitions between time windows
|
||
|
|
|
||
|
|
## Learnings
|
||
|
|
|
||
|
|
Avoiding memory leaks when switching time windows was tricky. Implemented a ring buffer per series and explicit disposal of Resize observers on unmount. The backpressure mechanism was the most impactful change in production — it stopped a flood of needless work when users had many tabs open.
|