router icon indicating copy to clipboard operation
router copied to clipboard

SSR error handling

Open SamiHonkasalo opened this issue 2 years ago • 0 comments

Describe the bug

Errors in matched routes (for example an error thrown in a route loader) are not caught by the CatchBoundary on the server and the application rendering fails completely during renderToString (or renderToPipeableStream).

If the route is wrapped in <Suspense/> using wrapInSuspense: true, the error will not crash the rendering. However in this case, the error is not included in the dehydrated data so the client side rendering will fail because the status of the match is error, but error is undefined. The match error should also be serialized to the dehydrated data and then deserialized on the client side. This propably needs some extra handling since JS Error object serializes to {}

I'm not sure if wrapping the route in <Suspense/> during SSR is the correct solution, or if there is a workaround to make an ErrorBoundary work during SSR

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-kevfhx

Steps to Reproduce the Bug or Issue

  1. Click the Posts link
  2. Hit refresh on the frame browser

Expected behavior

The errors should be caught and dehydrated and then hydrated on the client side

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 120.0

Additional context

No response

SamiHonkasalo avatar Jan 10 '24 13:01 SamiHonkasalo