Implementing global error handling

[kimsagro1]

Describe the bug

I am trying to implement a global error page and am having difficulties.

I have a sample here where you can try uncommenting the throw statements to see various scenarios
https://stackblitz.com/edit/github-rodaot?file=src%2Fmain.tsx

Attempt 1 - ErrorBoundary

I first tried adding an ErrorBoundary to the root of my component tree, but it seem's like tanstack router has it's own in-built Something went wrong error component so my error boundary was never triggered.

Attempt 2 - defaultErrorComponent

I next tried adding a defaultErrorComponent however the issue with this is that if the error is raised in the index component then the defaultErrorComponent is wrapped in the root layout. If the error is raised in the root component then the defaultErrorComponent is not wrapped in root layout. I'm trying to achieve an error page that looks the same in all scenarios.

Issue 1

It doesn't appear possible to achieve an error component that looks the same regardless of where the error is thrown and handles all scenarios?

Issue 2

I also noticed that the error being thrown in the about loader doesn't seem to trigger the error component.

Your Example Website or App

https://stackblitz.com/edit/github-rodaot?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

1. Uncomment // throw 'error from index'; to see the message defaultErrorComponent: Something went wrong but wrapped in the root layout
2. Uncomment // throw 'error from root'; to see the message defaultErrorComponent: Something went wrong but not wrapped in the root layout
3. Uncomment // throw 'error from about loader'; to see the the error component is not shown

Expected behavior

As a user I expected a way to show a fallback error component (much like when you specify a notFoundComponent on the root route) that displays the same regardless of where the error is thrown. Or perhaps a way to opt out completely and use my own error boundary

Screenshots or Videos

No response

Platform

NA

Additional context

No response

[jaens]

EDIT: nevermind, this does not seem to work, it's still always caught here with no way to disable:

router/packages/react-router/src/Matches.tsx

Lines 92 to 106 in 249e41e

	<matchContext.Provider value={matchId}>
	<CatchBoundary
	getResetKey={() => router.state.resolvedLocation.state?.key!}
	errorComponent={ErrorComponent}
	onCatch={(error) => {
	warning(
	false,
	`The following error wasn't caught by any route! 👇 At the very least, consider setting an 'errorComponent' in your RootRoute!`,
	)
	console.error(error)
	}}
	>
	{matchId ? <Match matchId={matchId} /> : null}
	</CatchBoundary>
	</matchContext.Provider>

This is a workaround, for now (which "disables" error handling):

createRouter({
    ...
    defaultErrorComponent: (({ error }) => {
        throw error;
    }) satisfies ErrorRouteComponent,
});

It would indeed be nice to be able to disable error handling, in case the router is used in an environment that expects to handle errors completely on its own, eg. Storybook with Chromatic.

[geoff-harper]

#724

[schiller-manuel]

is this still relevant?

[BrendanC23]

Here's the same StackBlitz as @kimsagro1 with the latest TanStack Router packages. Now:

• Throw error from root: defaultErrorComponent is shown, navbar is not rendered (navbar is part of the root route, so this is expected behavior)
• Throw error from index: defaultErrorComponent is shown, navbar is rendered
• Throw error from about: defaultErrorComponent is shown, navbar is rendered

This part of the original issue is still unsolved:

If the error is raised in the root component then the defaultErrorComponent is not wrapped in root layout. I'm trying to achieve an error page that looks the same in all scenarios.

This part is now working:

Issue 2
I also noticed that the error being thrown in the about loader doesn't seem to trigger the error component.

---

An alternative approach can be seen in this StackBlitz. I removed the error boundary and defaultErrorComponent, and am instead using an errorComponent in the root route. The errorComponent renders the same thing as the root route (so the navbar is duplicated). This ensures that the same UI is shown regardless of where the error originates.

@schiller-manuel I think this can be closed.

[SeanCassiere]

Closing this since this should no longer be an issue with the user being able to set an errorComponent only on the root route and let the error bubble up to there.

https://stackblitz.com/edit/github-mx6tcy?file=src%2Froutes%2Fabout.tsx