Custom 500 (server error) page

[kidonng]

Summary

Support a src/pages/500.{astro,js,ts} file to customize the server error page.

Background & Motivation

I use Astro to power backend-only projects. No kidding. It's quite fascinating that Astro is the only (AFAIK) framework that tick all these boxes:

• File-based routing
• WHATWG responses/requests
• Vercel Many adapters

Not a small feat even for something as big as Next.js... well, they do have some nice features, one being customizable 500 page.

I wonder, since we have custom 404 page, why not also this? Indeed it's not something users (should) see a lot, but it's an improvement, say, over the provider one:

Goals

• File convention for server error page
• Support Astro components (SSR) and endpoints (API routes), like 404 page
• Alternatively provide a mechanism to catch server errors globally

Example

Just like any other page out there:

import type {APIRoute} from 'astro'

export const get: APIRoute = async function () {
	// Renders on server error!
	return new Response('Oops!')
}

[xriter]

I am wondering if there is any way right now to create a 'catch-all', to prevent the server from crashing...

[kidonng]

Available since Astro 4.10.3 🎉 (according to the docs): https://docs.astro.build/en/basics/astro-pages/#custom-500-error-page