fix(results-panel): guard Recharts 0-width canvas crash on admin panel open#196
Merged
Conversation
…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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
debounce={50}toResponsiveContainerinFeedbackChartstyle={{ minWidth: 1 }}to the container divRoot cause
Recharts fires its first
ResizeObservermeasurement synchronously on mount, before the admin panel layout has settled. When the wallet unlocks and the admin section expands, the chart container is still in a CSS transition and reports width=0. Recharts then tries to create a Canvas gradient pattern on a 0×0 canvas, throwingInvalidStateError: 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, giving the layout time to settle.minWidth: 1is a belt-and-suspenders guard so Recharts never receives a literal 0 even if the debounce doesn't fire in time.Why it didn't catch in testing
stadium-testerruns in mock mode where the admin panel is immediately visible (no layout transition) — the chart always gets a non-zero width on first renderconsoleErrorsgate in the test spec catches errors that appear during test steps, but the Canvas error fires during mount before the wallet-unlock action completes, so it doesn't fail a specificexpect()Companion CORS error
The console also showed a CORS block on
GET /api/programs/bitrefill-2026. That was transient — the Railway container swap caused a brief gap between old container going down and new container serving. Server is healthy;stadium.joinwebzero.comis explicitly in the CORS allowlist. No code change needed.Test plan
cd client && npm run build— passes