Output page intermittently shows "Failed to render Output — Cannot read properties of null (reading 'id')"

Description

Clicking Measure → Output in the dashboard intermittently shows the error boundary:

⚠️ Failed to render Output
Cannot read properties of null (reading 'id')
Try reloading the dashboard (Ctrl+Shift+P → "AI Engineer Coach: Reload Data")

(Screenshot below — please drag-drop the attached image into this issue after creation; the GitHub API cannot upload binary attachments to issue bodies.)

The error originates from Chart.js, which reads .id off the canvas element it is given. The string Cannot read properties of null (reading 'id') is the standard message produced when new Chart(null, …) is called.

Root cause

createChart in src/webview/shared.ts passes whatever document.getElementById(canvasId) returns straight to Chart.js with only a type cast, no null check:

const c = new Chart(document.getElementById(canvasId) as HTMLCanvasElement, { ... });

If the canvas is not in the live DOM at the moment createChart runs, Chart.js dereferences .id on null and throws. The error then bubbles into the withErrorBoundary('Output', …) wrapper in src/webview/app.ts, producing the panel shown in the screenshot.

The Output page is the most exposed surface because both renderProductionTab and renderTokenUsageTab in src/webview/page-output.ts follow this shape:

1. Capture const target = document.getElementById('output-tab-content')!
2. Render a spinner
3. await rpc(...) — async gap, nothing is cancelled
4. Re-render the tab markup containing canvases
5. Call createChart('creditWeeklyChart', …), createChart('prodModelChart', …), etc.

Between steps 3 and 5 the user can change DOM state. The known race windows are:

• Switch nav pages while Output is loading — renderPage (src/webview/app.ts lines 626–631) calls unmount(content); content.textContent = ''; destroyCharts(). The stale Output promise then resolves and renders into a detached tree; document.getElementById('creditWeeklyChart') returns null from the live DOM → crash.
• Switch the inner Output tab (Code Output ↔ Token Usage) before the slow tab finishes. The new render replaces #output-tab-content with the other tab's canvases. The stale promise calls createChart('creditWeeklyChart', …) but only prodModelChart / prodDailyChart / prodHarnessChart / prodLangChart / prodWsChart exist → crash.
• Fast clicking on the date-range buttons. The handler at the bottom of renderOutput fires void renderActiveTab() per click; two concurrent runs race.
• Re-index / reload data while Output is the active page — destroyCharts() runs and renderPage re-runs, but any RPC already in flight from the previous Output mount keeps going and renders into a stale root.

Secondary contributor: several unguarded non-null assertions in the same path (e.g. document.getElementById('output-tab-content')!, document.getElementById('creditModelTable')!, document.getElementById(panelMap[tab || 'tokens'])!.classList.add('active')) would also throw similar null-derefs if any future change ever rendered the Output shell asynchronously.

Steps to Reproduce

The bug is timing-sensitive and not 100% reproducible. The following all increase likelihood:

1. Open the dashboard with a large session corpus (the user's instance shows 341K on Output and 532 sessions on Timeline).
2. Click Measure → Output.
3. Immediately do one of:
   a. Click another nav page (e.g. Timeline) before the spinner clears, then click Output again, or
   b. Toggle between the Code Output and Token Usage tabs as fast as possible, or
   c. Click multiple date-range buttons (Last 7 days → Last 4 weeks → Last 3 months) in rapid succession, or
   d. Run the AI Engineer Coach: Reload Data command while Output is mid-load.
4. Observe the error boundary panel.

Expected Behavior

• The Output page should render charts when data is available, or show an empty state when not.
• Stale async work from a previous mount / previous tab / previous range click should never reach the rendering DOM; it should be cancelled or no-op out.
• If a canvas is somehow missing, createChart should log a warning and skip that chart rather than tearing down the whole page.

Suggested Fix

Two layered guards:

1. In createChart (src/webview/shared.ts) — bail out cleanly when the canvas is missing:

   const el = document.getElementById(canvasId) as HTMLCanvasElement | null;
   if (!el) { console.warn(`createChart: canvas '${canvasId}' not in DOM (stale render?)`); return null; }
   

   (Adjust the return type accordingly.) This alone prevents the page crash.
2. In renderOutput (src/webview/page-output.ts) — add a per-mount generation counter. Bump it on every renderActiveTab call and on unmount. After each await in renderProductionTab / renderTokenUsageTab, return early if the generation has changed. This avoids wasted renders and visual flicker.

Extension Version

0.1.0

VS Code Version

(please fill in — Help → About)

Operating System

Windows 11

Start with createChart in src/webview/shared.ts and the renderOutput, renderProductionTab, and renderTokenUsageTab entry points in src/webview/page-output.ts; review renderPage and destroyCharts in src/webview/app.ts. Reproduce the race by switching pages, tabs, or date ranges during loading. Done means stale work no-ops, missing canvases do not crash the Output page, and valid data or empty states still render.