500 Incident Report

Error15: 500 Incident Report

A server-error page that gives support something to work with: under the headline sits a bordered incident table of reference, timestamp, service and state, followed by a retry seal button and a status page link.

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/error15?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/error15.tsx, plus the two design-system primitives it renders through: badge6 for the square eyebrow and button1 for the retry seal button.

Quick start

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

import { Error15, error15Demo } from "@/components/beste/block/error15";

export default function NotFound() {
  return <Error15 {...error15Demo} />;
}

The detail rows are a plain array, so fill them from your own error boundary:

"use client";

import { Error15 } from "@/components/beste/block/error15";

export default function ErrorPage({ reset }: { reset: () => void }) {
  return (
    <Error15
      label="Server Error"
      code="500"
      heading="Something broke <strong>on our side</strong>."
      description="Your request never reached the finish line and the team has been paged."
      labels={{ retry: "Run it again", detailsTitle: "Incident details" }}
      details={[
        { title: "Reference", value: "REQ-8F31-C0A2" },
        { title: "Service", value: "Checkout API" },
      ]}
      link={{ label: "Follow the status page", href: "/status" }}
      onRetry={reset}
    />
  );
}

Props

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

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

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

Behavior notes

• The retry button is a real button, not a link: it renders only when labels.retry is set and does nothing unless onRetry is passed, which makes it a natural fit for a Next.js error.tsx reset() function.
• The incident table is a dl with dt/dd pairs separated by divide-y, so the label and value relationship survives for screen readers instead of reading as two loose columns.
• Rows wrap rather than truncate: a long reference value drops to its own line at narrow widths instead of colliding with its label.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; <strong> takes the accent colour. Keep the value under your own control, never user input.
• The whole detail panel, including its caption, only renders when details is non-empty, so the same block covers errors you cannot describe in detail.