I have a simple hierarchy like so:
root.tsx (CatchBoundary A)
routes
| main
| | index.tsx
| index.tsx (redirects to /main) (CatchBoundary B)
| main.tsx (CatchBoundary C)
I can navigate to /main and see my DOM correctly root -> main -> main/index
Now, when trying a route that does not exist: /main/foo, I would expect the CatchBoundary inside main.tsx (CatchBoundary C) to handle the error. Instead, the error bubbles all the way up to root CatchBoundary A. It skips CatchBoundary C and B.
Removing CatchBoundary A will result in an “unhandled thrown response” error.
Each CatchBoundary is declared the same way:
export function CatchBoundary() {
console.log('[A/B/C]');
return (<p>Caught at [A/B/C]</p>);
}
ErrorBoundaries, on the other hand, work as expected. Throwing within loader() will correctly stop at the nearest ErrorBoundary (written similarly).