Error Pages

404, 500, and maintenance page layouts for error handling.

404 Not Found

Clean 404 page with headline, description, and home/back actions.

Preview

Page not found

Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.

404 Not Found.tsx
import { NotFound } from "@launchapp/design-system/blocks/errors";import Link from "next/link";export default function NotFoundPage() {  return (    <NotFound      homeAction={<Link href="/">Go home</Link>}      backAction={<button type="button" onClick={() => history.back()}>Go back</button>}    />  );}

500 Server Error

Server error page with retry action and support contact.

Preview

Something went wrong

We're experiencing an internal server error. Please try again in a few moments.

500 Server Error.tsx
import { ServerError } from "@launchapp/design-system/blocks/errors";export default function ErrorPage() {  return (    <ServerError      onRetry={() => window.location.reload()}    />  );}

Maintenance Page

Maintenance mode page with status message and estimated return time.

Preview

We'll be back soon

We're performing scheduled maintenance. This should only take a few minutes.

Estimated completion: 30 minutes

Status updates

  • Database migration
  • Service restart
  • Cache warm-up
Maintenance Page.tsx
import { Maintenance } from "@launchapp/design-system/blocks/errors";export default function MaintenancePage() {  return (    <Maintenance      title="We'll be back soon"      description="We're performing scheduled maintenance. Estimated downtime: 30 minutes."      estimatedReturn="2024-01-01T15:00:00Z"    />  );}

404 Not Found

Clean 404 page with headline, description, and home/back action buttons.

Preview

Page not found

Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.

404 Not Found.tsx
import { NotFound } from "@launchapp/design-system/blocks/errors";export default function NotFoundPage() {  return (    <NotFound      homeAction={<a href="/">Go home</a>}      backAction={<button type="button" onClick={() => history.back()}>Go back</button>}    />  );}

500 Server Error

Server error page with retry action and home link.

Preview

Something went wrong

We're experiencing an internal server error. Please try again in a few moments.

500 Server Error.tsx
import { ServerError } from "@launchapp/design-system/blocks/errors";export default function ErrorPage() {  return (    <ServerError      retryAction={<button type="button" onClick={() => window.location.reload()}>Try again</button>}      homeAction={<a href="/">Go home</a>}    />  );}