A rejected promise in <Await> in a notFoundComponent is not caught by the defaultErrorComponent

[lo1tuma]

Which project does this relate to?

Router

Describe the bug

I‘m using <Await> to fetch some data in a notFoundComponent. When using renderToPipeableStream() I can see the following object has been thrown and not caught by an error boundary:

{
  data: { data: { data: [Object], __isServerError: true } },
  __isServerError: true
}

Your Example Website or App

https://stackblitz.com/edit/github-yk78pg-wpq5bb

Steps to Reproduce the Bug or Issue

• checkout the example
• run npm i
• run npm run compile
• run node dist/main.js

Expected behavior

I would expect:

1. the defaultErrorComponent being invoked with the rejected promise from <Await />
2. to get an actual instance of Error instead of the serialized server error object

Screenshots or Videos

No response

Platform

• Version: 1.52.4

Additional context

No response

[SeanCassiere]

Please attach a valid minimal reproduction showing off the issue in question.
You can fork our Stackblitz starter to make the setup process easier - https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based

[lo1tuma]

This issue only happens during server-side-rendering. So I’ve used basic-ssr-file-based as an example. See https://stackblitz.com/edit/github-5vsdzx

What has been changed:

• the index route has a loader which directly throws notFound()
• the router has a defaultErrorComponent which also logs the props to the console
• the root route has a notFoundComponent which use <Await> to wait for a promise that always rejects

Steps to reproduce:

• start the example on stackblitz (which should happen automatically or via npm install && npm run dev
  • Note: in case of the stackblitz browser just renders "Upgrade Required", try to click the link in the terminal within the log message: Client Server: http://localhost:3000
• -> Once the the dev server loads the index page in the browser it immediately crashes
• -> the following error should be visible in the terminal

{
 data: { data: { data: [Object], __isServerError: true } },
 __isServerError: true
}
Error: 💣

[SeanCassiere]

An <Await> with a Promise is not something typically found in a notFoundComponent.

@lo1tuma what's your expectation as to what's supposed to happen here?

@tannerlinsley what's Start's desired expectation here?

[lo1tuma]

An <Await> with a Promise is not something typically found in a notFoundComponent.

See also this discussion I’m basically looking for a unified way to load data in a notFoundComponent.

@lo1tuma what's your expectation as to what's supposed to happen here?

My expectation would be that the error is getting caught and instead of rendering the notFoundComponent the errorComponent should get rendered.