Any way to handle useLoader fail

[WilfredDube]

I have this piece of code where I try to load an OBJ file stored on the cloud. My challenge is that when the file is not there or there is a network issue the whole page crashes:

let obj = null;
 obj = useLoader(OBJLoader, url, (loader) => {
   materials.preload();
   loader.setMaterials(materials);
 });

Example of an error that occured:

Could not loadhttps://cloudservice.com/file.obj: undefined

Is there a way to handle errors that occur in this hook?

[CodyJasonBennett]

I'd look into error boundaries for this. You can catch errors from multiple components there.

We use this for the Canvas component to contain errors within it:

/**
 * Generic error boundary. Calls its `set` prop on error.
 */
class ErrorBoundary extends React.Component<{ set: React.Dispatch<any> }, { error: boolean }> {
  state = { error: false }
  static getDerivedStateFromError = () => ({ error: true })
  componentDidCatch(error: any) {
    this.props.set(error)
  }
  render() {
    return this.state.error ? null : this.props.children
  }
}

[drcmda]

there's also https://github.com/bvaughn/react-error-boundary (react team member) i use that all the time, it's great! :)

[ashleymvanduzer]

what is the best way to go about handling this situation when it comes to loading textures? For example, passing a broken link as the url parameter? does the error boundary approach still apply? EDIT: If anyone has this issue in the future and finds their way here, yes, error boundary approach still applies.

[bel7aG]

Using ErrorBoundary on the Canvas level can cause an empty scene especially with PCDLoader & 502 response..

But putting try..catch on the render level can solve the issue of the useLoader.

  let geometry: THREE.BufferGeometry = null
  try {
    geometry = useLoader(PCDLoader, src, (loader) => {
      loader.setCrossOrigin('cors')
      loader.setWithCredentials(true)
    })
  } catch {
    // tslint:disable
  }

[StephenHaney]

I've noticed that some useGLTF errors don't get caught by the error boundary (since react error boundaries only handle errors that impact the react tree).

If you cause the decoding to fail, by say deleting random bytes out of a glb file, something inside useGLTF will throw but not be caught by the error boundary. This just causes the app to crash and a blank canvas. I'm running into this on a high traffic site where a small percentage of network requests for my glb file get interrupted.

Any advice on how to handle cases like these?

[StephenHaney]

As a workaround, I'm wrapping my useGLTF in a try/catch (in addition to the error boundary around the component) and then throwing an error in the catch, so that the React tree picks it up.

[CodyJasonBennett]

Can you create an issue with these comments? Old threads have low visibility.

[StephenHaney]

For sure, for future googlers: #3181