How to handle errors in routes using createResource

[manast]

So we can define a data function to be used in a route like the example in the README:

function UserData({params, location, navigate, data}) {
  const [user] = createResource(() => params.id, fetchUser);
  return user;
}

<Route path="/users/:id" component={User} data={UserData} />;

This works well when the API call works as expected, but how should we handle API errors? with the example code above we just end with an error in the console and a broken app... anybody knows?

[ryansolid]

There are 2 ways to look at this. You can handle the error automatically like retry logic in the fetcher of your resource. Resource takes a promise so doesn't matter what it is.

The other probably more common option is to handle it where it is read. Wrap with Error Boundary, or use the error property on the resource. You may also want to pass down the refetch option from the resource constructor if you want it to refetch.

[manast]

Thanks for answering. It seems like Error Boundary does what I need. A retry logic on the other hand would not work in this case as the error would be permanent (lack of authorization). Here is what it looks like with Error Boundary:
https://github.com/taskforcesh/nandu/blob/main/packages/dashboard/src/App.tsx#L107-L131