Observability Dashboard
Real-time monitoring dashboard for this portfolio's own infrastructure.
Live Demo
The Problem
At Schneider Electric, I stood in front of NOC screens watching UPS systems across data centers. At the data center, I monitored power, cooling, and network health. The dashboards I used were powerful but often overwhelming — too much data, unclear priorities, slow to load.
This portfolio runs on Cloudflare's edge infrastructure. Why not build a dashboard that monitors itself? Real metrics, real alerts, real operational data.
The Connection
Years of watching gauges and indicators taught me what matters in monitoring:
- Signal over noise — Dashboards fail when everything is equally prominent. Critical alerts need visual hierarchy.
- Trends matter more than snapshots — A gauge at 80% is meaningless without context. Is it climbing or stable?
- Response time is trust — Laggy dashboards erode confidence. If the monitoring is slow, what else is broken?
The Approach
SolidJS was chosen specifically for its fine-grained reactivity — perfect for real-time data that updates frequently without re-rendering the entire UI.
The dashboard monitors: - Cloudflare Workers metrics (requests, errors, latency) - D1 database performance - KV store operations - Durable Object activity - Real-time visitor presence
Technical Deep Dive
SolidJS signals update individual DOM nodes without virtual DOM diffing. For a dashboard receiving WebSocket updates every second, this matters.
Each metric is a signal. When the server pushes new data, only the affected elements re-render. The chart library integrates with SolidJS reactivity, so even complex visualizations stay performant.
// Fine-grained reactive metrics
const [metrics, setMetrics] = createSignal<Metrics>({
requests: 0,
errors: 0,
p99Latency: 0
});
// Only the specific DOM nodes update
createEffect(() => {
const m = metrics();
// This runs only when metrics change
if (m.errors > ERROR_THRESHOLD) {
triggerAlert('error-spike', m.errors);
}
});SolidJS fine-grained reactivity for real-time metrics
What I Learned
What worked well:
What I'd change:
Trade-offs accepted: