Skip to content

fix(results-panel): guard Recharts 0-width canvas crash on admin panel open#197

Merged
sacha-l merged 2 commits into
mainfrom
develop
Jun 25, 2026
Merged

fix(results-panel): guard Recharts 0-width canvas crash on admin panel open#197
sacha-l merged 2 commits into
mainfrom
develop

Conversation

@sacha-l

@sacha-l sacha-l commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds debounce={50} and style={{ minWidth: 1 }} to ResponsiveContainer in FeedbackChart inside ProgramResultsSummarySection

Root cause

When the admin wallet unlocks and the completed-program results panel expands, the CSS layout transition means ResponsiveContainer fires its first ResizeObserver tick with width=0. Recharts then attempts to create a Canvas gradient pattern on a 0×0 canvas:

Uncaught InvalidStateError: Failed to execute 'createPattern' on
'CanvasRenderingContext2D': The image argument is a canvas element
with a width or height of 0.

debounce={50} defers the first measurement by 50ms so the layout settles first. minWidth: 1 is a belt-and-suspenders guard.

Why it didn't catch in testing

  • stadium-tester runs in mock mode — admin panel is already visible before data loads, no layout transition, chart always gets non-zero width on first render
  • Console error gate in the Playwright spec only fails when an expect() assertion fails; this error fires during mount, not tied to any UI state assertion
  • No post-deploy smoke test catches JS exceptions on the production build

Companion CORS error (no code change needed)

The console also showed No 'Access-Control-Allow-Origin' header on GET /api/programs/bitrefill-2026. That was a transient Railway container-swap gap during deploy — old container down before new one was serving. Server is healthy; stadium.joinwebzero.com is in the explicit CORS allowlist.

Test plan

  • Unlock admin wallet on bitrefill-2026 in production, open the completed program → feedback charts render with no console errors
  • cd client && npm run build passes ✓ (verified pre-PR)

Fixes prod regression introduced by #195.

sacha-l added 2 commits June 25, 2026 18:16
…l open

Add debounce=50 and minWidth:1 to ResponsiveContainer in FeedbackChart.
Recharts fires its first resize measurement before the admin panel layout
settles, getting width=0, which causes createPattern to throw on a 0-dim
canvas. debounce defers the first render tick; minWidth prevents a 0 from
ever being reported.
fix(results-panel): guard Recharts 0-width canvas crash on admin panel open
@vercel

vercel Bot commented Jun 25, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
stadium Ready Ready Preview, Comment Jun 25, 2026 5:28pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant