By Fresh authors

 

Fresh supports customizing the 404 Not Found, and the 500 Internal Server Error pages. These are shown when a request is made but no matching route exists, and when a middleware, route handler, or page component throws an error respectively.

 

The 404 page can be customized by creating a _404.tsx file in the routes/ folder. The file must have a default export that is a regular Preact component. A props object of type UnknownPageProps is passed in as an argument.

 

/** @jsx h */
import { h } from "preact";
import { UnknownPageProps } from "$fresh/server.ts";

export default function NotFoundPage({ url }: UnknownPageProps) {
  return <p>404 not found: {url.pathname}</p>;
}

 

The 500 page can be customized by creating a _500.tsx file in the routes/ folder. The file must have a default export that is a regular Preact component. A props object of type ErrorPageProps is passed in as an argument.

 

/** @jsx h */
import { h } from "preact";
import { ErrorPageProps } from "$fresh/server.ts";

export default function Error500Page({ error }: ErrorPageProps) {
  return <p>500 internal error: {(error as Error).message}</p>;
}