> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# useErrors

<ParamField body="useErrors(options)" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult">UseErrorsResult</a></span>}>
  React hook for reading and managing errors in ACUL (Advanced Customization of Universal Login).
  With all validation and server-side errors. It groups errors into three kinds:

  * `server` — errors returned by Auth0 or your own backend.
  * `client` — errors from client-side validation (e.g., invalid form input).
  * `developer` — errors caused by incorrect integration or SDK misuse.

  ## Returns

  [`UseErrorsResult`](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult)

  An object of type [UseErrorsResult](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult), containing:

  * `errors` — the full error list of type [ErrorsResult](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ErrorsResult), with helpers:
    * `errors.byKind(kind, filter?)` — filter by error kind and optionally by field.
    * `errors.byField(field, filter?)` — filter by field and optionally by kind.
  * `hasError` — `true` if any error is currently present.
  * `dismiss(id)` — remove a specific error by its ID.
  * `dismissAll()` — clear all tracked errors.

  Typical usage is inside a form or screen component where you need to
  reactively display errors and provide ways to dismiss them:

  ## Supported Screens

  * The `useErrors` hook is available on every ACUL screen.

  ```tsx Example theme={null}
  import { useErrors } from "@auth0/auth0-acul-react";

  export function SignupForm() {
    const { errors, hasError, dismiss, dismissAll } = useErrors();

    return (
      <div>
        {hasError && (
          <div className="mb-4">
            {errors.byKind("server").map(err => (
              <div key={err.id} className="text-red-600">
                {err.message}
                <button onClick={() => dismiss(err.id)}>Dismiss</button>
              </div>
            ))}
          </div>
        )}

        <button onClick={dismissAll}>Clear All Errors</button>
      </div>
    );
  }
  ```

  In addition to rendering messages, you can filter by field or kind:

  ```ts theme={null}
  console.log(errors.byKind('client')); // all client errors
  console.log(errors.byKind('client', { field: 'username' })); // client errors for field 'username'
  console.log(errors.byField('username')); // all errors for field 'username'
  console.log(errors.byField('username', { kind: 'server' })); // server errors for field 'username'
  ```

  <Expandable title="Parameters">
    <ParamField body="options" type={<span><a href='/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorOptions'>[UseErrorOptions]</a> = {}</span>}>
      **Properties**

      <ParamField body="includeDevErrors?" type="boolean" />
    </ParamField>
  </Expandable>
</ParamField>