Skip to content
EvolveEvolveEvolve

errors

@evolve-storefront/errors · v1.0.0

Turns backend error codes into localized messages. A GraphQL error's code maps to a message through next-intl, with a fallback for codes it does not know, so a shopper never sees a raw server message; the server's message is for debugging only.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/errors next next-intl react
    Requirements3
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Add its translations to your message files with evolve messages.

Then render it on a page:

"use client";


import { isServerMutationError } from "@evolve-storefront/errors/error";
import { mapServerErrors } from "@evolve-storefront/errors/map";
import { useErrorMessages } from "@evolve-storefront/errors/use-error-messages";


// In a mutation's `onError`: field errors go to `<Form serverErrors>`, the rest above it.
export function useMutationErrors() {
  const resolve = useErrorMessages();


  return (error: unknown) =>
    isServerMutationError(error)
      ? mapServerErrors(error.errors, resolve)
      : { fields: {}, formError: resolve("unknown") };
}

Hooks

1 hook to read and change the data yourself, for when you build your own UI. The example above only needs useErrorMessages. All hooks

More in this package