Design an Observability Dashboard – Frontend System Design

We’ll walk through the frontend system design for an observability dashboard like Datadog or Grafana: a page of linked charts, a query builder that can explode into a million series, a live log tail, and a trace waterfall that has to stay at 60fps. You’ll see why the time range lives in a store backed by the URL, why the client never plots more points than the screen has pixels, how a worker turns a fat query response into a pair of typed arrays, and why a span is a WebGL quad instead of a DOM node.

This is not the data table question, and it is not “put Chart.js in a grid.” A table of 10,000 rows is virtualization. A dashboard that fans one brush out to twenty high-cardinality widgets is a data-volume problem. The interviewer is asking whether you can keep React off the hot path.

Problem Statement

Design the frontend for a metrics, traces, and logs dashboard used by on-call engineers.

Requirements:

• A grid of... premium content.