Idea: Better 404 Error handling

[sergiodxa]

Right now there is a routes/404 route which is used to render a not found UI for any request against a route not matching the current routes.

If a route has parameters it will need to handle a case where the resource was not found (e.g. in users/$id the user 10 may not exists), in this case you need to redirect to /404 and change the URL or return a response with the 404 status and an empty response and then in the component conditionally render the not found UI or the actual user, additionally you may need to change the links and meta based on the returned response, to load the styles of your generic 404 page and change the title and meta tags for a not found case.

Idea

Remix could export a NotFoundError class extending from Error, if a loader throw this error instead of the error boundary of the route it should render the routes/404 route with the links and meta of that file.

In most cases that will be enough, but if you want to customize the UI of the 404 status for a certain route then Remix could let you export a NotFound component which will be rendered instead of the normal component, in this case you may not need to load different stylesheets since the error UI is custom and most probably reuse parts of the normal UI, for the meta you can receive the error as the data and conditionally change the title, this is ok in this case because you want something more custom.

[andrelandgraf]

I think it would be cool if you could just create a 404 file at any level of the routes/ folder and a 404 bubbles up until a 404 route is found (latest would be the routes/404). The 404 could then render into the <Outlet /> like any other component which would be a great way to show custom 404s on any level while reusing the current route layout.

[sergiodxa]

This is solved with the CatchBoundary export.