Live Monitoring Dashboard

A monitoring screen has to keep up with a fast, unreliable stream without freezing the browser. Naive React re-renders on every message, memory grows without limit, and a single malformed or hostile frame can break the page or inject markup.

A React 19 dashboard on a simulated socket that emits raw JSON frames, including drops, malformed frames and XSS payloads.

• Stream client: a connection state machine (connecting, live, paused, reconnecting, error) with exponential backoff, jitter and stale detection.
• Validation: every frame is size checked, parsed, validated and rebuilt from whitelisted fields before it reaches the store.
• Store: a small external store that batches updates, so the UI renders a few times per second whatever the message rate.
• Widgets: KPI cards, a severity mix, a canvas latency chart and a virtualized events list, each subscribed to its own slice.

1. Batching instead of per-message renders. Ingest writes to O(1) structures; subscribers hear about changes at most once per throttle interval, on an animation frame.
2. Slice-level subscriptions. useSyncExternalStore with referentially stable slices: the chart does not re-render when only a counter moves.
3. Bounded memory. Events, chart points and the pending queue live in ring buffers. Bursts drop the oldest pending events and count them.
4. The right algorithm for each job. Binary search for the time window, LTTB to draw 500 points without hiding spikes, one-second buckets for rolling stats.
5. XSS-safe by construction. Stream text is only rendered as text nodes, lint rules forbid innerHTML, and a test proves hostile payloads stay literal.

Unit and component tests sit beside the code they cover, CI runs lint, type checks, tests and the build on every push, and a stress run at 1,000 msg/s went from 1,868 dropped events to zero after moving queue draining onto the flush timer.