500 — server error

When to use it

API down, unhandled exception caught by the global error boundary.

• Acknowledge fault honestly
• Provide retry + correlation id

Layout regions

• header
• main

States

• error

Example

Next.js App Router error.tsx — Sentry capture + reset

// app/error.tsx
'use client'
import { useEffect } from 'react'
import * as Sentry from '@sentry/nextjs'

export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => { Sentry.captureException(error) }, [error])
  return (
    <Container className="py-24">
      <Stack align="center" size="4">
        <Icon name="warning" variant="hierarchical" size="2xl" />
        <h1 className="text-title1">Something went wrong</h1>
        <p className="text-body text-label-secondary">We've been notified and are looking into it.</p>
        {error.digest && <p className="text-footnote text-label-tertiary">Reference: <code className="font-mono">{error.digest}</code></p>}
        <Stack variant="row" size="3">
          <Button onClick={() => reset()}>Try again</Button>
          <Button asChild variant="outline"><a href="/support">Contact support</a></Button>
        </Stack>
      </Stack>
    </Container>
  )
}

The full 500 — server error pattern specifies 4 exact microcopy strings, 1 motion spec, 4 composition rules, 2 more code examples — all gated behind the full recipe. Get the full recipe.

Related