ErrorPage

Code

import { NotFoundPage, ServerErrorPage } from "@fadymondy/nasaq/web";export const NotFound = () => <NotFoundPage onHome={() => router.push("/")} onBack={() => router.back()} />;export const Crashed = ({ id }: { id: string }) => (  <ServerErrorPage errorId={id} onRetry={() => router.refresh()} onContactSupport={() => openChat()} />);

Loading & States · beta

Live examples and controls: ErrorPage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/error-pages.json

The screens a product shows when it cannot show what was asked for. One ErrorPage takes a kind, and seven named wrappers (NotFoundPage, ServerErrorPage, OfflinePage, MaintenancePage, ForbiddenPage, UnknownWorkspacePage, ComingSoonPage) save you typing it. Each says what happened, what to do next and offers the right buttons. It never shows a stack trace. It is presentational: it takes handlers and never navigates itself.

When to useCopy Anchor Link

• Your router's not-found and error boundaries, the offline fallback, the maintenance switch.
• A workspace URL that does not match, or a module behind a coming-soon flag.

When not to useCopy Anchor Link

• An empty list or a failed panel inside a page: use EmptyState and ErrorState.
• A notice above content that still works: use Alert.

ImportCopy Anchor Link

import { NotFoundPage } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { NotFoundPage, ServerErrorPage } from "@fadymondy/nasaq/web";

export const NotFound = () => <NotFoundPage onHome={() => router.push("/")} onBack={() => router.back()} />;

export const Crashed = ({ id }: { id: string }) => (
  <ServerErrorPage errorId={id} onRetry={() => router.refresh()} onContactSupport={() => openChat()} />
);

AnatomyCopy Anchor Link

ErrorPage            data-slot="error-page" (data-kind), a <main>
├─ logo              ProductLogo of the provider brand, or your own
├─ icon tile
├─ status code       data-slot="error-page-code", always LTR
├─ title + text      the h1 and the sentence
├─ extras            maintenance ETA, error ID with copy, "we will tell you" confirmation
└─ actions           defaults per kind, or your own

APICopy Anchor Link

Every main prop except title and children, plus:

useOnlineStatus() returns a boolean from navigator.onLine and the online / offline events. statusCodeFor(kind) returns the default code.

ExamplesCopy Anchor Link

Offline that notices the connection coming back

import { OfflinePage, useOnlineStatus } from "@fadymondy/nasaq/web";

export function Offline() {
  const online = useOnlineStatus();
  return <OfflinePage online={online} onRetry={() => location.reload()} />;
}

AccessibilityCopy Anchor Link

• The page is a <main> with one <h1>. The 500 page announces itself as an alert. Status is icon plus words, not colour alone.
• Async buttons show a spinner and cannot be pressed twice.

RTL & i18nCopy Anchor Link

• English and Arabic follow the locale. The status code and error ID stay left-to-right. The "back" arrow mirrors. The logo never mirrors.

Styling & tokensCopy Anchor Link

• Uses bg-background, bg-card, text-display, and the danger and warning text tokens. Target [data-slot="error-page"].

Do / Don'tCopy Anchor Link

• Do give a way forward on every page: home, retry, switch workspace.
• Do show an error ID on 500 so support can find the log.
• Don't show stack traces or internal messages.
• Don't reuse the 403 page to hide that something exists if that is sensitive: use not found instead.

RelatedCopy Anchor Link

• States
• Alert