From 609ff5849ff18af44e1926f5c4a5a5032fc399b1 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <mvanhorn@users.noreply.github.com>
Date: Mon, 16 Mar 2026 06:22:17 -0700
Subject: [PATCH] fix(frontend): gracefully handle missing WebGL context
 (#1147)

Wrap the OGL Renderer instantiation in a try-catch so the app does not
crash when WebGL is unavailable (e.g. hardware acceleration disabled).
The Galaxy background simply does not render instead of taking down the
entire page.

Fixes #1144

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 frontend/src/components/ui/galaxy.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/galaxy.jsx b/frontend/src/components/ui/galaxy.jsx
index 549e0e8..c1d20ab 100644
--- a/frontend/src/components/ui/galaxy.jsx
+++ b/frontend/src/components/ui/galaxy.jsx
@@ -198,11 +198,28 @@ export default function Galaxy({
   useEffect(() => {
     if (!ctnDom.current) return;
     const ctn = ctnDom.current;
-    const renderer = new Renderer({
-      alpha: transparent,
-      premultipliedAlpha: false,
-    });
+
+    let renderer;
+    try {
+      renderer = new Renderer({
+        alpha: transparent,
+        premultipliedAlpha: false,
+      });
+    } catch (error) {
+      console.warn(
+        "Galaxy: WebGL is not available. The galaxy background will not be rendered.",
+        error,
+      );
+      return;
+    }
+
     const gl = renderer.gl;
+    if (!gl) {
+      console.warn(
+        "Galaxy: WebGL context is null. The galaxy background will not be rendered.",
+      );
+      return;
+    }
 
     if (transparent) {
       gl.enable(gl.BLEND);