Error page not being shown when using throw render(404) and suspense query

[jasonhilldm]

I am using Tanstack useSuspensQuery and withFallback from vike-react-query to load data for the UI, e.g. an article based on a slug from the URL.

If I am unable to find the article in the database, I want to raise a 404 error so have been calling throw render(404). However, when I do this, I am seeing console errors instead of the error page being rendered:

Uncaught Error: Abort Render

I have created a repro based off a simple bati scaffolded React app:

https://stackblitz.com/edit/vitejs-vite-kbbtzx

When you click the Data Fetching link, I am calling throw render(404) from within the query function, but you will see console errors instead of the error page configured in the Vike app.

What is the correct way to have errors from within the suspense query handled by Vike and to present the user with the error page?

[brillout]

vikejs/vike-react@96da471

[jasonhilldm]

Interesting...thanks for clarifying. I had started returning a NotFound component as an interim measure and it sounds like this might actually be the preferred method of handling this use case. Is there a way to also set the response status code to 404 so that the client receives the correct status code?

Also, a minor point...you have added the same Error Handling section on vike-react-apollo but it references vike-react-query so that could be a little confusing.

[brillout]

AFAICT it's too late to send a status code after the HTML stream started. But this would need to be researched; contribution welcome to dig whether it's possible.

👍 Thanks, it's fixed now.

[jasonhilldm]

Could this suggestion of using the Trailer response header be helpful? Maybe vike could use this header to pass back the error status code triggered after streaming has started and then throw the error client side so that the standard vike error handling can kick in.

https://stackoverflow.com/questions/40251417/http-error-codes-when-streaming-large-binary-files-over-http

[brillout]

It's more of a React question than a Vike one, because React expects the content to be the same otherwise it will show a hydration mismatch error. React has some stream error handling but I ain't sure it supports your use case. Contribution welcome to dig into it.