Skip to content
Twilight React Playground
ثيم رائدaren

ErrorPage

componentBeginnerserverbrowserlive demo

A full error screen with a code, a title, a message and a button home; the default router error screen uses it.

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

In plain words

When a page cannot be shown (it does not exist, or something broke), the shopper should see a clear message and a way back, not a blank screen. ErrorPage is that screen: a big code such as 404, a title, a sentence, and a "Back home" button, in the page's language.

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

ErrorPage with Salla's storefront translations. Leave a text control empty to get the translated default.Try this: pick 500: Salla's translations have no common.errors.500, so the title is the key itself, as on the router's default error screen. Then switch LinkComponent off.
Storefront canvas · en · LTR

404

Page not found 404

Unexpected error occurred, please try again

Back home
Controls
Empty: the common.errors.<code> translation.
Empty: common.errors.error_occurred.
showAction
Empty: common.elements.back_home.
Without it the button is a plain anchor.
What a theme writes
import { ErrorPage, Link } from '@salla.sa/twilight-theme-engine/components/common';

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

Example

app/components/ProductGone.tsx
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

NotFoundError, RedirectError, UnauthorizedError

The error classes behind the loader helpers, so an error screen can tell a missing page, a redirect and a refused guest apart.

NoContent

The empty-state block: an icon, a message and an optional button, as the engine shows for an empty cart or category.

Link

An anchor that moves between store pages without reloading, adding the language (and, on localhost or the preview host, the store) to the path.

Source and docs