fma-ds

Error Pages

Error screens on top of empty and icon-stack: NotFound (404), Forbidden (403) and UnexpectedError, plus the bare ErrorPage for other cases (maintenance, expired link).

originalMITexperimentalChangelogRegistry JSON

Overview

Each shows an icon, the status code as a small label, the title as the page's h1, a description and your actions (home, back, support).

  • Layout: layout="page" fills the viewport; layout="inline" fills the content area of the app's layout.
  • `UnexpectedError`: puts a "Try again" button first with onRetry (pending while its promise runs). With error, it adds a collapsible ErrorDetails with the message and stack and a button that copies them — leave error out where users shouldn't see it.
  • In the app: wiring to the router (error and not-found routes), reporting and automatic reloads.

Built-in text is in English; translate it with i18n.labels, or override title and description.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/error-pages

    Files land in components/fma-ds/error-pages/error-pages.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0