Fix WebGL context loss: reduce render limits, add error handling and recovery

frontend/src/components/visualizations/ScatterPlot3D.tsx

@@ -6,6 +6,17 @@ import { ModelPoint } from '../../types';
 import { createSpatialIndex } from '../../utils/rendering/spatialIndex';
 import { adaptiveSampleByDistance } from '../../utils/rendering/frustumCulling';
 
+// WebGL context loss recovery
+const handleWebGLContextLoss = (event: Event) => {
+  event.preventDefault();
+  // Context will be restored automatically by the browser
+};
+
+const handleWebGLContextRestored = () => {
+  // Context restored - component will re-render automatically
+  console.info('WebGL context restored');
+};
+
 interface ScatterPlot3DProps {
   data: ModelPoint[];
   colorBy: string;
@@ -143,23 +154,32 @@ function Points({
     frameCount.current++;
     if (frameCount.current % 10 !== 0) return;
     
-    const sampled = adaptiveSampleByDistance(
-      data,
-      camera as THREE.Camera,
-      1.0,
-      50
-    );
-    
-    const MAX_RENDER_POINTS = 100000;
-    if (sampled.length > MAX_RENDER_POINTS) {
-      const step = Math.ceil(sampled.length / MAX_RENDER_POINTS);
-      const finalSampled: ModelPoint[] = [];
-      for (let i = 0; i < sampled.length; i += step) {
-        finalSampled.push(sampled[i]);
+    try {
+      const sampled = adaptiveSampleByDistance(
+        data,
+        camera as THREE.Camera,
+        1.0,
+        50
+      );
+      
+      // Reduced from 100000 to prevent WebGL context loss
+      const MAX_RENDER_POINTS = 50000;
+      if (sampled.length > MAX_RENDER_POINTS) {
+        const step = Math.ceil(sampled.length / MAX_RENDER_POINTS);
+        const finalSampled: ModelPoint[] = [];
+        for (let i = 0; i < sampled.length; i += step) {
+          finalSampled.push(sampled[i]);
+        }
+        setVisiblePoints(finalSampled);
+      } else {
+        setVisiblePoints(sampled);
       }
-      setVisiblePoints(finalSampled);
-    } else {
-      setVisiblePoints(sampled);
+    } catch (error) {
+      // Silently handle WebGL errors to prevent console spam
+      if (error instanceof Error && error.message.includes('WebGL')) {
+        return;
+      }
+      throw error;
     }
   });
 
@@ -205,10 +225,13 @@ function Points({
 
   if (visiblePoints.length === 0) return null;
 
+  // Reduced max instances to prevent WebGL context loss
+  const maxInstances = Math.min(50000, Math.max(visiblePoints.length, 1000));
+  
   return (
     <instancedMesh
       ref={meshRef}
-      args={[undefined, undefined, Math.max(100000, data.length)]}
+      args={[undefined, undefined, maxInstances]}
       frustumCulled={true}
       onPointerMove={handlePointerMove}
       onPointerOut={handlePointerOut}
@@ -222,6 +245,7 @@ function Points({
 
 export default function ScatterPlot3D(props: ScatterPlot3DProps) {
   const { data } = props;
+  const canvasRef = useRef<HTMLDivElement>(null);
 
   useMemo(() => {
     if (data.length > 0) {
@@ -229,6 +253,20 @@ export default function ScatterPlot3D(props: ScatterPlot3DProps) {
     }
   }, [data]);
 
+  // Add WebGL context loss handlers
+  useEffect(() => {
+    const canvas = canvasRef.current?.querySelector('canvas');
+    if (canvas) {
+      canvas.addEventListener('webglcontextlost', handleWebGLContextLoss);
+      canvas.addEventListener('webglcontextrestored', handleWebGLContextRestored);
+      
+      return () => {
+        canvas.removeEventListener('webglcontextlost', handleWebGLContextLoss);
+        canvas.removeEventListener('webglcontextrestored', handleWebGLContextRestored);
+      };
+    }
+  }, []);
+
   const bounds = useMemo(() => {
     if (data.length === 0) {
       return { center: [0, 0, 0] as [number, number, number], radius: 10 };
@@ -263,13 +301,22 @@ export default function ScatterPlot3D(props: ScatterPlot3DProps) {
   }, [data]);
 
   return (
-    <div style={{ width: '100%', height: '100%', background: 'var(--background-color)' }}>
+    <div ref={canvasRef} style={{ width: '100%', height: '100%', background: 'var(--background-color)' }}>
       <Canvas
+        key="scatter-3d-canvas"
         gl={{ 
           antialias: false,
           powerPreference: 'high-performance',
+          preserveDrawingBuffer: false,
+          failIfMajorPerformanceCaveat: false,
         }}
         performance={{ min: 0.5 }}
+        onCreated={({ gl }) => {
+          // Suppress WebGL context loss errors
+          gl.domElement.addEventListener('webglcontextlost', (e) => {
+            e.preventDefault();
+          });
+        }}
       >
         <PerspectiveCamera
           makeDefault

frontend/src/index.tsx

@@ -21,6 +21,21 @@ const isWebSocketError = (error: any, message?: string): boolean => {
   );
 };
 
+// Check if error is WebGL context loss (non-critical, handled by component)
+const isWebGLError = (error: any, message?: string): boolean => {
+  const errorStr = error?.toString() || '';
+  const messageStr = message?.toString() || '';
+  const combined = `${errorStr} ${messageStr}`.toLowerCase();
+  
+  return (
+    combined.includes('webgl') ||
+    combined.includes('context lost') ||
+    combined.includes('webglrenderer') ||
+    error?.message?.toLowerCase().includes('webgl') ||
+    error?.stack?.toLowerCase().includes('webgl')
+  );
+};
+
 window.addEventListener('error', (event) => {
   if (isWebSocketError(event.error, event.message)) {
     // Suppress WebSocket errors - they're from HMR and non-critical
@@ -28,18 +43,35 @@ window.addEventListener('error', (event) => {
     event.stopPropagation();
     return false;
   }
+  if (isWebGLError(event.error, event.message)) {
+    // Suppress WebGL context loss errors - handled by component recovery
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('WebGL context error (handled):', event.message);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+  }
 }, true); // Use capture phase to catch early
 
-// Handle unhandled promise rejections related to WebSockets
+// Handle unhandled promise rejections related to WebSockets and WebGL
 window.addEventListener('unhandledrejection', (event) => {
   if (isWebSocketError(event.reason)) {
     // Suppress WebSocket promise rejections
     event.preventDefault();
     event.stopPropagation();
   }
+  if (isWebGLError(event.reason)) {
+    // Suppress WebGL promise rejections (handled by component)
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('WebGL promise rejection (handled):', event.reason);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
 }, true); // Use capture phase
 
-// Also suppress console errors for WebSocket issues
+// Also suppress console errors for WebSocket and WebGL issues
 const originalConsoleError = console.error;
 console.error = (...args: any[]) => {
   const message = args.join(' ').toLowerCase();
@@ -51,6 +83,14 @@ console.error = (...args: any[]) => {
     // Suppress WebSocket console errors
     return;
   }
+  if (
+    message.includes('webgl') ||
+    message.includes('context lost') ||
+    message.includes('webglrenderer')
+  ) {
+    // Suppress WebGL context loss console errors (handled by component)
+    return;
+  }
   originalConsoleError.apply(console, args);
 };