防止整个页面在3时崩溃.WebGLRenderer:创建WebGL上下文出错

Question

我在react/next网站上有一个3D项目，对一些用户在Chrome中导致一些问题。错误(THREE.WebGLRenderer: Error creating WebGL context.)导致整个页面崩溃。并非适用于所有浏览器和所有机器。不过，在一台Macbook上安装Chrome浏览器总是这样。我怀疑这可能与创建WebGL上下文的错误有关。三js chrome?

恐怕我不能在这一点上解决崩溃的根本原因，但我需要找到一个方法来"保存"。剩下的部分。因此，当它发生时，只有受影响的部分消失，而不是整个页面。我试着把它放在一个try/catch，但没有帮助(也许是因为它是一个"未处理的运行时错误")。

是否有办法防止整个页面崩溃?

所讨论的部分在<Suspense>

<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>

移除<Canvas>时没有错误，可以"隔离"吗?<Canvas>不知怎么的?

PS:我们现在卡在react 17.0.2上，虽然我们正在考虑在不久的将来升级到18。这也意味着我们不能将@react-three/fiber升级到v8(目前在7.0.29)

Answer 1

尝试使用react-error-boundary库添加错误边界，它应该处理运行时错误