Some support for render loop error handling is needed

[Omxjep3434]

Feature Request

I'm requesting some implementation for error handling within the render loop. Even if it's not easy or possible to use React error boundaries, there needs to be some way to capture errors within useFrame() and the render loop in general. Right now, any errors will cause the render loop to keep executing, even if frameloop = "demand", and flood the console with error messages. Not only is this difficult to debug, but it could be a big performance issue on the user's device if the error would happen to occur in production.

Here are a few examples:

  <Canvas>
    {/* This seems silly, but you can imagine this happening in a complex application where the geometry is set to some variable that happens to be null. */}
    <mesh geometry={null} />
  </Canvas>

useFrame(() => {
  const someObject = null;
  const result = someObject.someField; // Cannot read properties of null (reading 'someField')
});

Proposal

I wouldn't focus on some big refactor to get React error boundaries working. I think some solution needs to get out the door. Perhaps something like:

<Canvas onRenderError={(state, error) => {
  // This will stop the error from being logged repeatedly.
  state.setRenderloop("never");

  // Could optionally set some state to unmount the canvas and show something else, similar to a React error boundary.
  // In this case, setRenderloop() may not be needed. 
}}>
  <mesh geometry={null} />
</Canvas>