Error recovery in Remix

[hntrl]

The error handling directives offered in remix are great! Past me would've killed for something similar to be implemented natively.

They could be better though...

Right now, with the way <ErrorBoundary /> interacts with the rest of the application it brings an opinionated approach to UX on how errors are handled. If and when an error occurs, it assumes a fatal condition by falling back to whatever's rendered by the closest error boundary.

This isn't very helpful when the goal is to keep the user on the page (like in an e-commerce setting). What would be better is to have a way to safely recover from an error instead of rendering a completely different component.

For instance, look at how Shopify is doing it. You can't do this with the error handling directives offered by Remix currently.

ezgif-3-f79eebfa52.mp4

"Couldn't you reproduce this by handling errors at the component level?"

Yes, but that would mean writing logic for each route that uses loader or action data, underpinning the issues that error boundaries are there to solve.

Error Recovery

Remix should support an additional, non-component directive to <ErrorBoundary /> for handling errors. Here's a couple samplers for how I imagine this looking in a route using this utility:

export const handleError: ErrorHandler = ({ error }) => {
  if (error.canBeHandledSomeWay) {
    return json({ data: error.data })
  } else {
    // error will be passed down to the next ErrorHandler or ErrorBoundary in the tree
    throw error
  }
}

export default function Root() {
  const error = useErrorData(); 
  return (
    <div>
      {...}
      {error && <span>{error.data}</span>}
    </div>
  )
}

Or, to make it even simpler

export const shouldDeferError = () => {
  return true
}

export default function Root() {
  const error = useCatch(); 
  return (
    <div>
      {...}
      {error && <span>{error.data}</span>}
    </div>
  )
}

In effect this would mean that an error occurs somewhere in the page, instead of rendering the error boundary it would pass it back to the component. handleError and error boundaries would work in tandem, where handleError catches all errors that can be recovered (like subsequent data loads and form submissions), and error boundaries for all the ones that cant (initial data loads and component errors [unless there was a way to stop the component from updating on the DOM]).

Thoughts?