TelemetryDashboard

The Challenge

Diagnosing layout shifts and input latency in production required a lightweight, real-time visualization tool that would not impact client-side performance. The challenge was to ingest high-frequency telemetry data and render complex charts without blocking the main thread or triggering unnecessary React re-renders.

The Solution

• Engineered a lightweight client-side SDK that batches and sends Web Vitals telemetry during browser idle periods.
• Created highly optimized, responsive time-series charts using SVG and Canvas, handling over 5,000 data points in real-time.
• Integrated Zustand for state management, implementing selective rendering to isolate updates to active chart components.