fix(web): guard MeshGradient against missing WebGL context

Merged
KI
3mo ago
+28-9

Problem

Unhandled TypeErrors from the shared MeshGradient component in two apps: Cannot read properties of null (reading 'uniformMatrix4fv') in the web app (/integrations, /agents) and Argument 1 ('program') ... must be an instance of WebGLProgram on the marketing homepage. Triggered on browsers that cannot provide a WebGL context (GPU blocklisted, headless, software rendering, or context-creation failure). The gradient is purely decorative; the page is otherwise fine.

Root cause

packages/ui/src/components/mesh-gradient.tsx initializes stripe-gradient unconditionally in its mount effect. When canvas.getContext("webgl"/"webgl2") returns null, the library proceeds with the null context and dereferences it, throwing from library internals.

Fix

Fix at the failure site in the shared component (no Sentry-side suppression):

  • Feature-detect WebGL on a throwaway canvas (webgl2 || webgl) before constructing the gradient; bail out and leave the static background when unavailable.
  • Wrap the initGradient call in a try/catch scoped to initialization only — on failure, run the existing teardown (pause + decoy-element disconnect) and bail. Errors after successful init are not swallowed.

Behaviour for users with working WebGL is unchanged.

Verification

bunx biome check packages/ui/src/components/mesh-gradient.tsx:

Checked 1 file in 27ms. No fixes applied.

cd packages/ui && bun run typecheck:

$ tsc --noEmit --emitDeclarationOnly false
exit=0

Refs WEB-1W
Refs MARKETING-3E

https://claude.ai/code/session_4d58b950-d21f-466c-ba7a-bb20bf855a26

Summary by cubic

Guarded the shared MeshGradient against missing WebGL to stop runtime errors and leave a static background when WebGL isn’t available. Prevents crashes on web app integrations/agents and the marketing homepage; addresses WEB-1W and MARKETING-3E.

  • Bug Fixes
    • Detect WebGL via a probe canvas; skip gradient init when unsupported.
    • Wrap initGradient in try/catch; on failure, teardown (pause + disconnect) and exit. Behavior is unchanged when WebGL works.

Summary by CodeRabbit

  • Bug Fixes
    • Improved mesh gradient stability by checking WebGL support before initialization.
    • Added safer handling when gradient setup fails.
    • Ensured gradients are properly paused and disconnected during cleanup.