Degrade gracefully when WebGL2 is unavailable#26
Conversation
The whole app rendered a blank page on browsers/configs that disable
WebGL (e.g. Librewolf's per-domain allow list). new Canvas() ran during
the synchronous SolidJS render and GLContext threw "WebGL2 not supported"
when getContext("webgl2") returned null, aborting the entire render —
even pages that don't need WebGL.
Canvas now catches the failure, exposes a `supported` flag, and guards
all GL operations so the decorative background simply doesn't render.
The room (which needs WebGL for video) is gated behind canvas.supported
and shows a clear "WebGL is required" notice instead of a blank page.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 56 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
1 participant
What
Stops the app from rendering a blank page when the browser has WebGL disabled.
Why
On browsers/configs that disable WebGL (e.g. Librewolf's per-domain allow list, or privacy extensions that block WebGL to prevent fingerprinting), the entire site rendered a blank page. The cause:
new Canvas()runs during the synchronous SolidJS render, andGLContextthrewWebGL2 not supportedwhengetContext("webgl2")returned null. That exception aborted the whole render — even the landing/info pages that don't need WebGL at all — leaving only a console error:How
The animated GL background is purely decorative and used on every page, while the room genuinely needs WebGL for video rendering. So the handling is split:
app/src/room/canvas.ts—Canvasnow wraps WebGL context creation in try/catch, exposes areadonly supportedflag, and guards every GL operation (resize, render loop,#render,cleanup). When WebGL is unavailable the app runs fine, just without the animated background. Thegl/glContext/cameragetters still throw if accessed while unsupported, but the room is gated so they're never reached in that state.app/src/sup.tsx— the room'sApp(which drives WebGL video) is wrapped in<Show when={props.canvas.supported}>with a newWebGLUnsupportednotice as fallback, explaining that WebGL must be enabled and the page reloaded.Result
Notes for reviewer
tsc --noEmitandbiome checkpass on the changed files.🤖 Generated with Claude Code