How to handle error in useGLTF

Questions
1

Hi guys,

I try to load an OBJ file stored on S3. When the file is not there the page crashes:
Is there a way to handle errors in this hook?
I will use this example in CodeSandbox React Three Fiber Boilerplate - useGLTF - CodeSandbox

const Models = [
  {
    title: 'Hammer',
    url:
      'https://cdn.jsdelivr.net/gh/Sean-Bradley/React-Three-Fiber-Boilerplate@useGLTF/public/models/hammer.glb'
  },
  
]

function Model({ url }) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} />
}

Once url is not right, it will give the error “Could not load”. I was wondering if it can give me an error message, so I could show this alert, but not crash the app. Thanks.

2

useGLTF is for loading gltf and glb files.

To load an obj, use something like,

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { useLoader } from '@react-three/fiber'

function Model() {
  const obj = useLoader(OBJLoader, '/model.obj')
  return <primitive object={obj} />
}
3

you catch errors with error boundaries, like any other error.

codesandbox will still show the error overlay, ignore it and click the X and you will see the fallback. in prod you’d only see the fallback.

you can use error boundaries raw but i prefer this lib react-error-boundary - npm

4

this doesn’t look quite right, you’ve got an object as the function parameter, i may be mistaken when it comes to r3f but typically this should probably look like the following…

function Model( url ) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} />
}
5

no no its correct. props are given as an object, and if you want to pull single values you would typically destruct

2 Likes
6

Thank for your solution, I don’t want overlay, I will try react-error-boundary to see what I get.

7

:woozy_face: R3f is just syntactical wizardry that just always seems to allude me

8

The same feeling as you :sweat_smile:

9

you do not normally get an overlay, this is coming from codesandbox. error boundaries is how you catch errors in react, it’s just that csb has this “feature” where they show that dialog. some bundlers do it as well. in prod you only have the fallback.

10

Hey @drcmda,

can you guide me on how to use the error-boundary library the right way. I’ve read the docu but can’t quite achieve what i want:

Basically i want to handle errors, if OFL_TB is not a valid path. First i tried to wrap the MSM into the ErrorBoundary, that did not work out. Then i tried wrapping the locations where i am using TürOberfläche and wrapping it into ErrorBoundary, that worked. Here is how i use it in a basic mesh:

      <mesh>
        <boxGeometry />
        <ErrorBoundary
          fallbackRender={({ resetErrorBoundary }) => {
            resetErrorBoundary();
            // return <ErrorDialog variable={OFL_TB} />;
          }}
          onReset={() => {
            console.error("error message");
            setOFL_TB("working path");
          }}
        >
          <TürOberfläche OFL_TB={OFL_TB} />
        </ErrorBoundary>
      </mesh>

Here is the TürOberfläche component that can throw the error if the path is not valid:

export const TürOberfläche = ({ OFL_TB }) => {
  const AFLG = useTĂĽrenStore((state) => state.AFLG);

  const map = useTexture(`./textures/tuerblattTexture/${AFLG}/${OFL_TB}.jpg`);
  map.colorSpace = THREE.NoColorSpace;
  map.wrapS = map.wrapT = THREE.MirroredRepeatWrapping;
  map.repeat.set(2, 2);

  return (
    <>
      <meshStandardMaterial
        map={map}
        color={color}
        roughness={roughness}
        //
      />
    </>
  );
};

The problem with this is that i get this warning for the setOFT_TB: TestUV.jsx:53 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
The other thing i want to achieve is displaying an UI Error component i already created but that does not work with this approach…

Here is a codesandbox of what i described: https://codesandbox.io/p/sandbox/errortest-xf9gfl