Throught my application, every time a request fails i redirect to a 404 but its getting kind of complicated knowing what rquest trigger the error, how can i give more context? I use Astro.redirect
#What is the best way to handle page errors in Astro?
jagged nova
dusky phoenixBOT
Hi @jagged nova. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The best way to handle page errors in Astro, especially when you want to provide more context about what went wrong, is to use a custom 500 error page (src/pages/500.astro). Unlike a 404 page, the 500 page is automatically passed an error prop containing details about the error that occurred during rendering. This allows you to display specific information to the user or log it for debugging purposes.
For example, your 500.astro page can access the error like this:
---
// src/pages/500.astro
interface Props { error: unknown; }
const { error } = Astro.props;
---
<div>
{error instanceof Error ? error.message : "Unknown error"}
</div>
This approach is more flexible than always redirecting to a 404 page, as it allows you to differentiate between different types of errors and provide more meaningful feedback or logging. You can also avoid leaking sensitive information by carefully choosing what to display from the error object Custom 500 Error Page.
If you’re using on-demand rendering, this 500 page will be shown for server errors. For 404s (not found), you should still use a 404.astro or 404.md page, but for unexpected errors, the 500 page is the best place to provide context.
Additionally, if you want to handle errors in your own logic (e.g., when fetching data), you can throw errors or use error handling patterns and then let Astro’s error page system display the context. For example, you can throw an error with a message that describes what failed, and Astro will pass that to the 500 page.
Summary:
- Use
Astro.redirect('/404')for not found errors. - For unexpected errors, throw an error and let Astro render your custom
500.astropage, which receives the error context. - Display or log error details in
500.astrofor better debugging and user feedback.
More details: Custom 500 Error Page
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
jagged nova
@dusky phoenix How can i trigger the redirect to a 500 page, i just have to throw the error?
dusky phoenixBOT
Let me check the knowledge base for you again. One moment! :books:
Yes, to trigger the 500 error page in Astro, you just need to throw an error during rendering or in your server logic. Astro will automatically catch the error and render your custom src/pages/500.astro page, passing the error as a prop. This allows you to display or log the error details for debugging or user feedback.
For example, in a .astro file or an endpoint, you can do:
if (somethingWentWrong) {
throw new Error("Something went wrong with the request.");
}
Astro will then render your 500.astro page and provide the error to it:
---
// src/pages/500.astro
interface Props { error: unknown; }
const { error } = Astro.props;
---
<div>
{error instanceof Error ? error.message : "Unknown error"}
</div>
This mechanism is described in the Astro documentation:
For a custom 500 error page to show for pages that are rendered on demand, create the file
src/pages/500.astro. This custom page is not available for prerendered pages and can’t be prerendered.
src/pages/500.astrois a special page that is automatically passed anerrorprop for any error thrown during rendering.
Custom 500 Error Page
So, simply throwing an error is enough to trigger the 500 error page in Astro.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
green aspen
@dusky phoenixCan i throw this error from the client?
dusky phoenixBOT
Let me check the knowledge base for you again. One moment! :books:
No, you cannot trigger the Astro 500 error page by throwing an error from the client side. The mechanism for rendering the custom 500.astro page is only available for errors that occur during server-side rendering or in server logic. The documentation specifies that the 500.astro page is shown for errors thrown during rendering on the server, and there is no mention of client-side errors being able to trigger this behavior Custom 500 Error Page.
Client-side errors (such as those thrown in browser JavaScript) will not be caught by Astro’s server and will not result in the 500 error page being displayed. You would need to handle client-side errors separately, for example by showing a custom error message or redirecting the user using client-side JavaScript.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
green aspen
@dusky phoenix How can i do it then using JS or the navigate from the astro/client side
dusky phoenixBOT
Let me check the knowledge base for you again. One moment! :books:
Based on the provided knowledge sources, there is no built-in way in Astro to programmatically trigger the server-rendered 500 error page from client-side JavaScript or by using the navigate function from astro:transitions/client.
The 500.astro error page is only triggered by errors thrown during server-side rendering or in server logic. Client-side errors (those that occur in the browser after the page has loaded) are not handled by Astro’s server and will not cause the 500 error page to be displayed Custom 500 Error Page.
The navigate function is used for client-side navigation between pages and does not have a mechanism to signal a server error or trigger the 500 error page Trigger navigation.
If you want to show an error state on the client, you will need to implement your own client-side error handling UI. For example, you could navigate to a dedicated client-side error page or display an error message in your app, but this would not be the same as triggering Astro’s server-side 500 error page.
Summary:
- You cannot trigger the 500 error page from the client using JS or
navigate. - Client-side errors must be handled with your own UI logic.