Error Boundary v2 only working in root.tsx file!

[ShourovRoy]

I was trying to get errors from loaders, and actions but the errors are not catching in its route, instead it is catching in root.tsx error boundary. If I remove the error boundary from root.tsx then other route's own error boundary not working. I am using Error Boundary v2. Please help.

I am trying to achieve https://remix.run/docs/en/1.15.0/guides/errors#nested-error-boundaries this nested error boundary which was so easy in original version of error boundary but nested error boundary is not working in V2_error_boundary.

[MichaelDeBoey]

CC/ @brophdawg11 @mcansh

[ShourovRoy]

I have got this.

The problem was coming from Meta function:

by adding meta function like this works like a charm

export const meta: V2_MetaFunction = ({ data }: V2_MetaArgs) => {
return data
? [
{
title: data.productTitle,
},
]
: [];
};

[brophdawg11]

To elaborate here - when you render a nested ErrorBoundary, you still render your root.tsx component which means you still render <Meta /> when displaying the ErrorBoundary. That will run through the meta functions for all route matches (including the leaf route that threw the error, even if a parent ErrorBoundary is handling the rendering). So your meta function is not guaranteed to have data if the loader threw an error, so it should always be defensive if your loader can throw.

[aaronadamsCA]

Note there's been a PR for this for a little while now (#5787), but it's still waiting to be merged.

[aaronadamsCA]

Also note that if the user requests a path that doesn't match any routes in the app, Remix will throw a 404 that is caught by your root ErrorBoundary.

• Assuming your ErrorBoundary includes <Meta />, this means your root meta will run, but your root loader will not! 😫 In this case you must guard against !data.
  • It really seems like a Remix 404 should still run the root loader for exactly this reason.
• Alternatively, you could remove <Meta /> from the root ErrorBoundary. This seems to work quite well, actually; you can even set a <title> tag directly with a specific error message, which you can't do with a meta function.

I can't say I understand why a meta function can currently run without its loader. The function can't possibly return anything useful; it has no data, it can't access context or error, so all it can really return is [], which just blanks the route's metadata. If it at least had access to the thrown error, maybe it could return something useful.