Handle loading errors with useLoader

[dnlipko]

Hi. I use useLoader to load gltf model. In case of loading errors I want to catch that error and as fallback return null.
https://codesandbox.io/s/error-handling-hd8k8?file=/src/index.tsx

In this example if GLTFLoader throws error, ErrorBoundary doesn't help to catch it.

<ErrorBoundary>
  <Suspense fallback={null}>
    <Furniture />
  </Suspense>
</ErrorBoundary>

export const Furniture = ({ url }) => {
  const furniture = useLoader(GLTFLoader, url);
  return !!furniture && <primitive object={furniture.scene} />;
};

I handled loading error, but want to know how to do it in the right way with useLoader hook

const useCustomLoader = (Loader, url) => {
  const [model, setModel] = useState(null);

  useEffect(() => {
    const loader = new Loader();
    loader.load(url, function (gltf) {
      setModel(gltf);
    }, undefined, function ( error ) {
      console.error( error );
    } );

  }, [Loader, url]);

  return model;
}