如何避免THREE.WebGLRenderer创建上下文错误导致整页崩溃？

针对React 17.0.2 + @react-three/fiber 7.0.29的环境，以下两种方法可以隔离<Canvas>组件的错误，避免整页崩溃：

1. 使用错误边界（Error Boundary） #

React 17中只有类组件可以作为错误边界，它能捕获子组件树中的渲染错误、生命周期方法错误，包括@react-three/fiber的<Canvas>抛出的未处理异常，将错误限制在局部区域。

第一步：实现错误边界组件 #

import React from 'react';

class CanvasErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    // 更新状态，显示fallback内容
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可选：上报错误日志到监控系统
    console.error('Canvas加载失败:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <div>3D预览暂时无法加载，请尝试更换浏览器</div>;
    }
    return this.props.children;
  }
}

第二步：用错误边界包裹Canvas组件 #

将原有的<Suspense>和<Canvas>一起放入错误边界中：

<CanvasErrorBoundary fallback={<div>3D内容不可用</div>}>
  <Suspense fallback={<Spinner />}>
    <Canvas
      dpr={Math.max(window.devicePixelRatio, 2)}
      camera={{ fov: 43, near: 0.1, far: 2000, position: [0, 0, 8] }}
    >
      <ambientLight intensity={0.7} />
      <pointLight position={[5, 5, 5]} />
      <Object3D file={file} />
    </Canvas>
  </Suspense>
</CanvasErrorBoundary>

2. 预检测WebGL支持 #

在渲染<Canvas>前先判断浏览器是否能创建WebGL上下文，提前规避错误场景：

实现WebGL检测函数 #

function isWebGLAvailable() {
  try {
    const canvas = document.createElement('canvas');
    return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
  } catch (e) {
    return false;
  }
}

条件渲染Canvas #

结合错误边界使用，双重保障：

{isWebGLAvailable() ? (
  <CanvasErrorBoundary fallback={<div>3D预览暂时不可用</div>}>
    <Suspense fallback={<Spinner />}>
      <Canvas
        dpr={Math.max(window.devicePixelRatio, 2)}
        camera={{ fov: 43, near: 0.1, far: 2000, position: [0, 0, 8] }}
      >
        <ambientLight intensity={0.7} />
        <pointLight position={[5, 5, 5]} />
        <Object3D file={file} />
      </Canvas>
    </Suspense>
  </CanvasErrorBoundary>
) : (
  <div>您的浏览器不支持3D预览功能</div>
)}

为什么try/catch无效？ #

THREE.WebGLRenderer: Error creating WebGL context错误通常发生在组件挂载后的异步初始化阶段，或者React渲染流程之外的底层逻辑中，普通的try/catch只能捕获同步执行的代码错误，无法覆盖这些场景，而错误边界是React官方提供的专门用于捕获子组件树错误的机制，能处理这类跨生命周期的异常。

内容的提问来源于stack exchange，提问作者jost21