In plain words

Signature

const ErrorPage: LazyExoticComponent<(props: ErrorPageProps) => JSX.Element>

// ErrorPageProps is not exported
interface ErrorPageProps {
  code?: string | number;    // the large number at the top
  title?: string;            // default t('common.errors.<code>')
  message?: string;          // default t('common.errors.error_occurred')
  actionText?: string;       // default t('common.elements.back_home')
  actionHref?: string;       // default '/'
  showAction?: boolean;      // default true
  LinkComponent?: ComponentType<{
    to: string; className?: string; style?: CSSProperties; children: ReactNode;
  }>;                        // default: a plain <a href>
  children?: ReactNode;      // between the message and the button
}

Try it live

import { ErrorPage, Link } from '@salla.sa/twilight-theme-engine/components/common';

export function NotFound() {
  return <ErrorPage code={404} LinkComponent={Link} />;
}

Example

import { ErrorPage, Link } from '@salla.sa/twilight-theme-engine/components/common';
import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';

export function ProductGone() {
  const { t } = useTranslation();
  return (
    <ErrorPage
      code={404}
      message={t('pages.product.gone', 'This product is no longer available.')}
      actionText={t('pages.product.see_offers', 'See the offers')}
      actionHref="/offers"
      LinkComponent={Link}
    />
  );
}

How it behaves

• Layout: a container with the code in an <h1>, the title in an <h2>, the message in a <p>, your children, then the button, colored with the CSS variables --color-primary and --color-primary-reverse.

• The router made by createRouter() uses it for its default error screen: 404 for NotFoundError, 401 without the button for UnauthorizedError, 400 for API errors and 500 for anything else, each with the error's message.

• It is lazy (code-split).

Gotchas

• The default texts are translation keys, and a missing translation returns the key itself (i18next's behaviour), so the ?? 'Error' fallbacks in the source never apply. Salla's storefront translations cover common.errors.404 and no other code: code={500} shows the heading "common.errors.500", and a page with neither code nor title shows "common.errors.undefined". Pass a title for any code but 404.

• Without LinkComponent the button is a plain <a href="/">: clicking it reloads the whole app, and actionHref gets no locale. Pass LinkComponent={Link} from the same import.

Related

Source and docs

• Engine source: packages/theme-engine/src/components/common/ErrorPage.tsx