Review a live analytics chart

Review exercise · TypeScript

Advanced45 min

Review brief

An analytics dashboard server-renders an initial series and then polls while the user changes date ranges. The chart library owns canvas resources and can resize an existing chart. Dashboard tabs are commonly left open in the background, and all server aggregation uses UTC calendar boundaries.

Behavioral contract

Own exactly one chart instance per mounted canvas, update it in place, and destroy it on unmount.
Observe the stable chart container and resize the chart without mutating the observed dimension.
A response may update the chart only if it belongs to the currently selected range.
Ranges are half-open UTC intervals from 00:00:00Z on the first date to 00:00:00Z after the last date, matching the server seed.
The date input supplies a valid ISO calendar date; invalid-date validation is outside this review.
Poll every five seconds while visible and pause polling while the document is hidden; refresh promptly when it becomes visible again.

Review instructions

1Review only the changed code and the behavior described in the brief.
2Trace ownership and asynchronous work across range changes, resize callbacks, and unmounting.
3Identify issues on the narrowest relevant line and recommend a direction rather than replacement code.
4Prioritize no more than five findings.

Learning objectives

• Manage imperative resources within a long-lived view
• Prevent stale polling across range changes
• Keep date meaning consistent across server and browser

src/analytics-types.tsTypeScript

@@ -0,0 +1,28 @@

1+export interface AnalyticsRange {

2+ start: string;

3+ end: string;

4+}

6+export interface AnalyticsPoint {

7+ timestamp: string;

8+ value: number;

9+}

10+

11+export interface AnalyticsSnapshot {

12+ range: AnalyticsRange;

13+ points: AnalyticsPoint[];

14+}

15+

16+export interface AnalyticsClient {

17+ fetchSnapshot(range: AnalyticsRange): Promise<AnalyticsSnapshot>;

18+}

19+

20+export interface ChartInstance {

21+ update(snapshot: AnalyticsSnapshot): void;

22+ resize(width: number, height: number): void;

23+ destroy(): void;

24+}

25+

26+export interface ChartFactory {

27+ create(canvas: HTMLCanvasElement, snapshot: AnalyticsSnapshot): ChartInstance;

28+}

Reference solution

A strong review should identify the following issues, in roughly this priority order.

Findings

1. Every snapshot creates another chart without destroying the old one

Location: src/use-live-analytics-chart.ts:38-43

The snapshot effect calls charts.create and overwrites chartRef.current on the seed and after every poll. The prior chart remains attached to the canvas with its listeners and buffers, and the final instance is not destroyed on unmount. A long-lived dashboard steadily accumulates chart resources.

Create one instance when the canvas becomes available, update its data for later snapshots, and return an unmount cleanup that destroys the owned instance exactly once.

2. The resize observer changes the size it is observing

Location: src/use-live-analytics-chart.ts:45-58

The observer watches the canvas's content box, then writes new intrinsic width and height attributes from that measurement. Without a separately constrained CSS box, those attributes affect the canvas's rendered dimensions and trigger the observer again, creating a resize feedback loop and repeated redraws.

Observe the stable container and pass its dimensions to the existing chart instance without writing a dimension that feeds back into the observation target.

3. A poll from the previous range can overwrite the current range

Location: src/use-live-analytics-chart.ts:23-36

Changing ranges clears the old interval but cannot cancel a request it already started. That request still calls setSnapshot when it resolves, even if a newer range and response have already been displayed.

Abort obsolete requests or capture a range generation and accept a response only when it still matches the current selection.

4. Browser ranges use local midnights instead of UTC calendar boundaries

Location: src/analytics-range.ts:3-16

The numeric Date constructor creates local-calendar midnights. Converting those instants with toISOString shifts the boundaries by the browser's offset, so a user outside UTC requests a different interval from the server-rendered seed.

Construct the stated UTC boundaries explicitly, such as with Date.UTC, and keep the half-open end date consistent with server aggregation.

5. Polling continues at foreground frequency in hidden tabs

Location: src/use-live-analytics-chart.ts:22-36

The interval runs every five seconds regardless of document.visibilityState. Background dashboards continue consuming API, parsing, and rendering resources even though no result is visible.

Stop the interval when hidden, listen for visibility changes, and perform a current-range refresh when the document becomes visible before restarting the cadence.

Reasonable non-findings

Reusing the server-rendered snapshot until the first poll completes is expected.
Clearing an interval during effect cleanup is correct for future ticks; it simply does not invalidate a request already in flight.
Using a resize observer is appropriate when it observes a stable container and only resizes the chart instance.
Five seconds is the required visible-page cadence, so the interval length itself is not a finding.