ErrorPage

What a shopper sees when a page failed to render: a title, a line of reassurance, the error's digest to quote to support, and a retry. Reporting the error is the app's, in its error.tsx, before rendering this.

import { ErrorPage } from "@evolve-storefront/layout/error-page";

Preview

DefaultOpen in Storybook ↗

Usage

"use client";

export default function Error({ error, reset }) {
  useEffect(() => captureException(error), [error]);
  return (
    <ErrorPage error={error} onRetry={reset}>
      <Link href="/">{t("home")}</Link>
    </ErrorPage>
  );
}

Props

Prop	Type	Description
error?	{ digest?: string | undefined; } | null	What Next hands an error.tsx. Only digest is shown: a message may leak internals.
onRetry?	(() => void)	Re-render the failed segment (Next's reset). Omit to show no retry.
headingLevel?	HeadingLevel
children?	ReactNode	Further ways on, such as a link home through the app's router.

Any other props go to the root element, like on a plain HTML element.

Examples

PlainWithout onRetry or a digest there is nothing to press and no code to quote.

<ErrorPage headingLevel={2} />;

Open in Storybook ↗