Status pages

Whole pages for the states every site has: not found, failed, offline, down, not allowed.

Overview

A route that cannot show its content: use the status page that names the state.

Pick page

Do

Page not found

The page you are looking for does not exist or has moved.

Back to home
import { NotFound } from "@hackcove/ui";

<NotFound homeHref="#" />
A missing page is NotFound: the reader needs a way home, and a retry would load the same nothing.
Don't

Something went wrong

An error stopped this page from loading. You can try again.

Back to home
import { ErrorPage } from "@hackcove/ui";

<ErrorPage onRetry={() => {}} homeHref="#" />
ErrorPage with a retry for a missing page promises that trying again helps, and it does not.

Error detail

Do

Something went wrong

An error stopped this page from loading. You can try again.

Error
Request 4f2a91 failed: upstream timed out
Back to home
import { ErrorPage } from "@hackcove/ui";

<ErrorPage detail="Request 4f2a91 failed: upstream timed out" onRetry={() => {}} homeHref="#" />
detail is a request id or a short message the reader can quote, and onRetry offers another go.
Don't

Something went wrong

An error stopped this page from loading. You can try again.

Error
TypeError: Cannot read properties of undefined
  at loadBuild (build.ts:42:9)
  at async handler (route.ts:17:3)
Back to home
import { ErrorPage } from "@hackcove/ui";

<ErrorPage
  detail={
    "TypeError: Cannot read properties of undefined\n  at loadBuild (build.ts:42:9)\n" +
    "  at async handler (route.ts:17:3)"
  }
  onRetry={() => {}}
  homeHref="#"
/>
A stack trace shows the reader your internals and buries the one line they can act on.

Usage

  • Pick the page by the state: NotFound for a missing page (404), Forbidden for a page the reader may not see (403), ErrorPage for a failure (500), Offline for no connection, Maintenance for a site that is down on purpose.
  • The copy is fixed, so every site reads the same. Change the heading with title and the text with children only when the state needs a specific line.
  • homeHref adds a "Back to home" button; with a router, renderHome draws it with the app's own <Link>.
  • onRetry adds a "Try again" button on ErrorPage and Offline; action replaces it with the one action that fits, and the home link turns outline beside it. Do not offer a retry where trying again cannot help.
  • On ErrorPage, detail is a request id or a short message a reader can quote. Never a stack trace.
  • Render one as the content of an AppShell, or on its own in a Container.

Accessibility

  • Each page is a CenteredLayout card, so the title is the page's h1 and the copy under it is a paragraph.
  • detail is shown in a CodeBlock labelled "Error".
  • The buttons are a Button and a ButtonLink, with their own focus rings; "Back to home" is a real link.
  • The pages do not set an HTTP status; send the 404, 403 or 500 from the server.

API

NotFound

404: the page is not there.

action

The primary action; the home link turns outline beside it.

Type
ReactNode
children

Replaces the default body copy.

Type
ReactNode
homeHref

Adds a "Back to home" button linking here. With neither this nor renderHome there is no home link.

Type
string
renderHome

Draws the home link with the app's own router <Link>, as on ButtonLink.

Type
LinkRender
title

Replaces the default heading.

Type
ReactNode

Forbidden

403: signed in, or not, but not allowed here.

action

The primary action; the home link turns outline beside it.

Type
ReactNode
children

Replaces the default body copy.

Type
ReactNode
homeHref

Adds a "Back to home" button linking here. With neither this nor renderHome there is no home link.

Type
string
renderHome

Draws the home link with the app's own router <Link>, as on ButtonLink.

Type
LinkRender
title

Replaces the default heading.

Type
ReactNode

ErrorPage

500 or any failure. detail is the error text, shown in a CodeBlock under the copy; pass it only where a reader may see it (a request id, a message), never a stack trace. onRetry adds a "Try again" button, unless action replaces it.

action

The primary action; the home link turns outline beside it.

Type
ReactNode
children

Replaces the default body copy.

Type
ReactNode
detail
Type
string
homeHref

Adds a "Back to home" button linking here. With neither this nor renderHome there is no home link.

Type
string
onRetry
Type
() => void
renderHome

Draws the home link with the app's own router <Link>, as on ButtonLink.

Type
LinkRender
title

Replaces the default heading.

Type
ReactNode

Offline

The device has no connection. onRetry adds a "Try again" button, unless action replaces it.

action

The primary action; the home link turns outline beside it.

Type
ReactNode
children

Replaces the default body copy.

Type
ReactNode
homeHref

Adds a "Back to home" button linking here. With neither this nor renderHome there is no home link.

Type
string
onRetry
Type
() => void
renderHome

Draws the home link with the app's own router <Link>, as on ButtonLink.

Type
LinkRender
title

Replaces the default heading.

Type
ReactNode

Maintenance

The site is down on purpose and will be back.

action

The primary action; the home link turns outline beside it.

Type
ReactNode
children

Replaces the default body copy.

Type
ReactNode
homeHref

Adds a "Back to home" button linking here. With neither this nor renderHome there is no home link.

Type
string
renderHome

Draws the home link with the app's own router <Link>, as on ButtonLink.

Type
LinkRender
title

Replaces the default heading.

Type
ReactNode