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:
authored and GitHub committed 2026-09-14 13:20:02 -06:00
1 parent 62fe0fca4a
commit c3ccf9179f
1 file changed
+14
+14
View File
@@ -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