How to handle errors from streaming in RR7 app with custom express server

[edbella]

I've encountered an issue of late where for some logical business reason, a streamed response returns an error, my server terminates with an PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 259) error because the source of that error is a streamed response.

export async function loader({}: Route.LoaderArgs) {
	try {
		// note this is NOT awaited and rejects after 5 seconds due to some failed call to resolve data from an API or database
		let nonCriticalData = new Promise((res, reject) => setTimeout(() => reject("non-critical"), 5000));

		let criticalData = await new Promise((res) => setTimeout(() => res("critical"), 300));

		return { nonCriticalData, criticalData };
	} catch (error) {
		// Lets assume errors are supposed to be caught here
	}
}

The simple fix here would be to await nonCriticalData and handle the error in the catch block but I want to be sure if there is a way to mitigate against this without sacrificing the streaming approach?.

[GabenGar]

You have to provide errorElement prop of <Await> component in order to capture the errors from promise data.

[edbella]

I actually did that but it only worked for a bit when navigating to the route with the said error. If I perform a full document reload on the said route, the error element does not show up and my server still closes with the error.

[GabenGar]

Do you really need streamable server render in the first place?