Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new 500.astro error prop #8392

Merged
merged 17 commits into from
Jun 19, 2024
Merged
Changes from 12 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion src/content/docs/en/basics/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,38 @@ Files with the `.html` file extension can be placed in the `src/pages/` director

## Custom 404 Error Page

For a custom 404 error page, you can create a `404.astro` or `404.md` file in `/src/pages`.
For a custom 404 error page, you can create a `404.astro` or `404.md` file in `src/pages`.
florian-lefebvre marked this conversation as resolved.
Show resolved Hide resolved

This will build to a `404.html` page. Most [deploy services](/en/guides/deploy/) will find and use it.

## Custom 500 Error Page
florian-lefebvre marked this conversation as resolved.
Show resolved Hide resolved

For a custom 500 error page to show for pages in your `hybrid` or `server` project that are [rendered on demand](/en/guides/server-side-rendering/#enable-on-demand-server-rendering), create the file `src/pages/500.astro`. This custom page is not available for prerendered pages.

If an error occurs rendering this page, your host's default 500 error page will be shown to your visitor.

### Use the `error` prop
florian-lefebvre marked this conversation as resolved.
Show resolved Hide resolved

<p><Since v="4.11.0" /></p>

`src/pages/500.astro` is a special page that is automatically passed an `error` prop for any error thrown during rendering. This allows you to use the details of an error (e.g. from a page, from middleware, etc.) to display information to your visitor.

The error prop's data type can be anything, which may affect how you type or use the value in your code:

```astro title="src/pages/500.astro"
---
interface Props {
error: unknown
}

const { error } = Astro.props
---

<div>{error instanceof Error ? error.message : 'Unknown error'}</div>
```

Be careful not to leak any sensitive information such as the error's stack.
florian-lefebvre marked this conversation as resolved.
Show resolved Hide resolved

## Page Partials

<p><Since v="3.4.0" /></p>
Expand Down
Loading