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