ErrorComponentProps#error incorrectly models the error type

[michaelbull]

Which project does this relate to?

Router

Describe the bug

The ErrorComponentProps type, that replaces the deprecated ErrorRouteProps, incorrectly models the error as an Error .

In our production app, our fetch behaviour does not throw an Error, but instead a detailed rich object that consumers can dig into.

In the simplest example, a route's loader could throw a primitive data type such as a string instead of an Error, however the props of the associated errorComponent (modelled as ErrorComponentProps) presume that the error will always be an Error.

Your Example Website or App

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

Steps to Reproduce the Bug or Issue

Throw a non-Error data type in a loader, for example throw 'hello'.

Observe that the props of the loader's errorComponent incorrectly model the error prop as an Error type, even though we called throw with a typeof string.

Expected behavior

Preferably:

- export type ErrorComponentProps = {
-  error: Error
+ export type ErrorComponentProps<E> = {
+  error: E
  info?: { componentStack: string }
  reset: () => void
}

or at least:

- export type ErrorComponentProps = {
-  error: Error
+ export type ErrorComponentProps = {
+  error: unknown
  info?: { componentStack: string }
  reset: () => void
}

Screenshots or Videos

Platform

@tanstack/react-router@1.127.9

Additional context

[michaelbull]

@leesb971204 @schiller-manuel I don't think the fix fully solves the problem.

When I pass an ErrorComponent that uses a string for the error, I get this compilation error:

[michaelbull]

I think the generic TError type needs chasing through to the framework-specific routers:

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

Line 558 in a1d54c4

export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>

router/packages/solid-router/src/route.tsx

Line 502 in a1d54c4

export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>

[leesb971204]

@leesb971204 @schiller-manuel I don't think the fix fully solves the problem.

When I pass an ErrorComponent that uses a string for the error, I get this compilation error:

Apologies for the incomplete work.
I’ve created an additional #4727 to address it — please take a look when you have a moment.