Error Pages

404 Page

A 404 page may be accessed very often so Blitz provides a static 404 page by default without having to add any additional files.

Customizing The 404 Page

To create a custom 404 page you can create a app/pages/404.js file. This file is statically generated at build time.

// app/pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

500 Page

By default Blitz provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated.

Customizing The Error Page

500 errors are handled both client-side and server-side by the Error component. If you wish to override it, define the file app/pages/_error.js and add the following code:

function Error({statusCode}) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  )
}

Error.getInitialProps = ({res, err}) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return {statusCode}
}

export default Error

app/pages/_error.js is only used in production. In development you’ll get an error with the call stack to know where the error originated from.

Reusing the built-in error page

You can render the built-in error page by importing ErrorComponent.

It accepts two props:

• statusCode - a number to display as the error code
• title - a string to display as the error message

import {ErrorComponent} from "blitz"

export default function Page() {
  return <ErrorComponent statusCode={404} />
}

import {ErrorComponent} from "blitz"

export default function Page() {
  return <ErrorComponent statusCode={401} title="Unauthorized" />
}