500.astro content is not showing when throwing an error from a middleware

[ahmad-ali14]

Astro Info

Astro                    v3.2.1
Node                     v20.4.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

I have a sequence of middleware, the auth middleware may throw an error if it is not happy with the user credentials.

export const onRequest = sequence(
  onRequestInterceptor, // prepare the request and logging
  onRequestAuth, // auth
  onResponseInterceptor // report >400 responses
);

when the middleware or the page throws it is showing the normal browser 500 error (image below).

Note: to reporduce, please try the 'preview' command rather than 'dev' cause I noticed different behaviours sometimes.

What's the expected result?

If the middleware throws, I expect the content of 500.astro to appear on the page, that is the nicely designed page with the site identity.

A few notes:

• I don't expect redirection to happen.
• I used to do redirect() to /error, but I want the user to stay on the same url just with a nice view showing the error.

I also have a few questions:

• How can I pass some custom messages to my 500.astro (without using cookies, if possible)?
• If I return a Response object from the first middleware, does it stop the other middlewares in the sequence?
• How can I make a one general page for all >400 responses? right now I have 400, 404, 500.astro but I would like a general error.astro

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qhuzp1?file=package.json

Participation

• I am willing to submit a pull request for this issue.

[lilnasy]

Minimal reproduction: https://stackblitz.com/edit/github-qhuzp1-nejsyp

[mb21]

How can I pass some custom messages to my 500.astro (without using cookies, if possible)?

I had the same question and seems I'm not alone: https://stackoverflow.com/questions/74524452/astro-js-server-side-rendering-custom-error-page

Should we open a roadmap discussion for this, or is improving error pages something that's planned already anyway?

[lilnasy]

It should be possible to, for example, set a message with Astro.locals.setMessage() and read it from 500.astro.

[mb21]

@lilnasy okay... but how do you force the 500.astro to be rendered? just throw an Error?

And how would you force the 404.astro to be rendered? (very common case is if you don't have something in the database under the id that was requested) (edit: seems this currently does the trick? Astro.response.status = 404)

Note: I just also discovered withastro/roadmap#681, withastro/roadmap#533 and withastro/roadmap#610