Can't catch all useGLTF errors with React Error Boundaries about react-three-fiber HOT 7 OPEN

I think it's expected behavior of react error boundaries that they won't catch errors in async code – my understanding is that the error needs to happen in the React tree's render stack to catch it.

Here's a repro (I deleted random info in the GLB file to simulate a bad network request)
https://codesandbox.io/p/sandbox/dazzling-lederberg-8dhfcv

You'll see that even though there's an error boundary, the error thrown by useGLTF is causing the entire app to crash.

Seems odd that I'd be the first person to find this so I could definitely be missing something... although you might only notice
if you're paying careful attention within large amounts of traffic.

from react-three-fiber.

Okay, we're probably not catching errors thrown from promises. We don't intend for this tricky behavior to be possible.

from react-three-fiber.

Here is my workaround code for now in case it is helpful for folks.

Note: this isn't idiomatic React and probably causes other problems in some situations.

export const BambooBox = () => {
  try {
    const { nodes, materials } = useGLTF(path);

    return (
        <mesh
          geometry={nodes.Cylinder.geometry}
          material={materials.Bamboo}
        />
    );
  } catch (err) {
    return <Fallback />;
  }
};

from react-three-fiber.

I'd need to see an example, but this sounds like a React bug which should be taken upstream. You can harden your workaround by continuing to throw a promise if passed to err so Suspense works as expected.

• https://github.com/CodyJasonBennett/react-nylon/blob/main/src/hooks.ts#L304

from react-three-fiber.

The way it happened in the wild was a valid URL but a network error on Poki (so not a 404 but not the full file returned either) happening once every thousand users or so.

from react-three-fiber.