Blocks / Shell

Route Error States

The app's error surfaces: a shared RouteError component every error.tsx renders, message-based error classification, an (app) group boundary, a translated 404, and a dependency-free global-error.

$pnpm exec shadcn add @intelligo/route-error

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

The app's error surfaces: a shared RouteError component every error.tsx renders, message-based error classification, an (app) group boundary, a translated 404, and a dependency-free global-error. Error reporting goes through the lib/error-reporting.ts seam (a no-op until you bind a reporter), so no SDK enters the registry. Items that ship an error.tsx depend on this one - install it first.

yours to edit
  • lib/error-reporting.ts

messages/en/route-error.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

built from

alert, button

npm packages it adds

lucide-react · next-intl

what shadcn add writes · 8 files
Routes
  • app/[locale]/(app)/error.tsx
  • app/[locale]/not-found.tsx
  • app/not-found.tsx
  • app/global-error.tsx
Components
  • components/shared/route-error.tsx
Actions, config and messages
  • lib/errors/get-error-type.ts
  • lib/error-reporting.ts
  • messages/en/route-error.json

Ready to try it? Three commands and the app runs against a stub model.