mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
fix(www): skip the careers-page globe when WebGL is unavailable (#50350)
## Summary
- `cobe`'s `createGlobe()` resolves the canvas context internally as
`getContext('webgl2') || getContext('webgl') || 'experimental-webgl'` (a
context-name *string*, not an actual context). When both `webgl2` and
`webgl` are unavailable, it falls through to that string, but modern
browsers no longer support the `experimental-webgl` context name, so the
resulting context is `null` and cobe crashes internally reading
`.enable(...)` on it.
- `apps/www/components/Globe.tsx` (used only on `/careers`) had no guard
for this, so a browser/device with WebGL disabled or unavailable (GPU
blocklist, corporate policy, privacy setting) crashes the entire careers
page via `globalErrorBoundary`.
- Fix: detect WebGL support ourselves (`getContext('webgl2') ||
getContext('webgl')`) before mounting the globe, and skip rendering it
(no globe, rest of the page renders fine) when unsupported.
## Evidence (Sentry, past week)
- [WWW-41](https://supabase.sentry.io/issues/7731263201/) — `TypeError:
Cannot read properties of null (reading 'enable')` on `/careers`, leaf
frame inside `cobe`/`phenomenon`.
## Test plan
- [ ] Manually confirmed `Globe.tsx` is only imported by
`apps/www/pages/careers.tsx`
- [ ] No automated test added (this is a purely decorative,
non-interactive canvas element with no existing test coverage); happy to
add one if reviewers want it
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM
---
_Generated by [Claude
Code](https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM)_
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
This commit is contained in:
1 file changed
+14
@@ -2,11 +2,25 @@ import createGlobe from 'cobe'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
// cobe crashes internally when neither webgl2 nor webgl is available instead
|
||||
// of failing gracefully, so we check ourselves before mounting it.
|
||||
const isWebGLAvailable = (canvas: HTMLCanvasElement) => {
|
||||
try {
|
||||
return !!(canvas.getContext('webgl2') || canvas.getContext('webgl'))
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const Globe = () => {
|
||||
const { resolvedTheme } = useTheme()
|
||||
const canvasRef = useRef<any | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!canvasRef.current || !isWebGLAvailable(canvasRef.current)) {
|
||||
return
|
||||
}
|
||||
|
||||
let rotation = 0
|
||||
let width = 0
|
||||
let previousWidth = 0
|
||||
|
||||
Reference in new issue
Block a user