Server Error Record

Error21: Server Error Record

A monochrome server-error page: a display headline and a retry pill up top, then a ruled two-column record of the reference, timestamp, subsystem and state, so a support reply can quote something precise.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error21?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error21?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error21.tsx, plus the two design-system primitives it renders through: badge7 for the parenthetical eyebrow and button12 for the retry pill.

Quick start

The installed file exports error21Demo alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line.

import { Error21, error21Demo } from "@/components/beste/block/error21";

export default function ErrorPage() {
  return <Error21 {...error21Demo} />;
}

In a Next.js error.tsx the retry pill maps directly onto reset():

"use client";

import { Error21 } from "@/components/beste/block/error21";

export default function ErrorPage({ reset }: { reset: () => void }) {
  return (
    <Error21
      badge={{ label: "500" }}
      heading="Something on our side <strong>gave way</strong>."
      description="This one is ours, not yours. The request has been recorded with the reference below."
      labels={{ retry: "Try that again", detailsTitle: "For the record" }}
      details={[
        { title: "Reference", value: "ERR-4C19-7B02" },
        { title: "State", value: "Being worked on" },
      ]}
      link={{ label: "Read the status page", href: "/status" }}
      onRetry={reset}
    />
  );
}

Props

type Error21Labels = {
  retry?: string;
  detailsTitle?: string;
};

type DetailRow = {
  title: string;
  value: string;
};

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• The retry pill is a real button, not a link: it renders only when labels.retry is set and does nothing without onRetry, which makes it a direct fit for a Next.js error.tsx reset() function.
• The record is a dl laid out as a ruled grid: each pair sits under its own top border, one column on mobile and two from the sm breakpoint up. There is no boxed table chrome.
• Values are set at display size above their small muted labels, so a reference code reads as the primary information in the row.
• The record and its eyebrow only render when details is non-empty, leaving a bare statement page when there is nothing to quote.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; text inside <strong> drops to muted grey. Keep the value under your own control, never user input.