Implementing global error handling

[kimsagro1]

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.

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

Summary

Is is possible to achieve an error component that looks the same regardless of where the error is thrown and handles all scenarios?

Can you tell the router to just use your error boundary?

[schiller-manuel]

duplicate of #1181