> ## 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>}>
  Hook React pour lire et gérer les erreurs dans ACUL (Advanced Customization of Universal Login).
  Il inclut toutes les erreurs de validation et côté serveur. Il regroupe les erreurs en trois catégories :

  * `server` — erreurs retournées par Auth0 ou par votre propre backend.
  * `client` — erreurs issues de la validation côté client (p. ex., données de formulaire non valides).
  * `developer` — erreurs causées par une intégration incorrecte ou une mauvaise utilisation du SDK.

  ## Valeur de retour

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

  Un objet de type [UseErrorsResult](/docs/fr-CA/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult), qui contient :

  * `errors` — la liste complète des erreurs de type [ErrorsResult](/docs/fr-CA/libraries/acul/react-sdk/API-Reference/Types/interfaces/ErrorsResult), avec des fonctions utilitaires :
    * `errors.byKind(kind, filter?)` — filtre par catégorie d’erreur et, en option, par champ.
    * `errors.byField(field, filter?)` — filtre par champ et, en option, par catégorie.
  * `hasError` — `true` si au moins une erreur est actuellement présente.
  * `dismiss(id)` — supprime une erreur précise par son ID.
  * `dismissAll()` — efface toutes les erreurs actuellement suivies.

  L’utilisation typique se fait dans un formulaire ou un composant d’écran où vous devez
  afficher les erreurs de façon réactive et offrir des moyens de les ignorer :

  ## Écrans pris en charge

  * Le hook `useErrors` est disponible sur chaque écran ACUL.

  ```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>
    );
  }
  ```

  En plus de l’affichage des messages, vous pouvez filtrer par champ ou par catégorie :

  ```ts theme={null}
  console.log(errors.byKind('client')); // toutes les erreurs côté client
  console.log(errors.byKind('client', { field: 'username' })); // erreurs côté client pour le champ 'username'
  console.log(errors.byField('username')); // toutes les erreurs pour le champ 'username'
  console.log(errors.byField('username', { kind: 'server' })); // erreurs côté serveur pour le champ 'username'
  ```

  <Expandable title="Paramètres">
    <ParamField body="options" type={<span><a href='/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorOptions'>[UseErrorOptions]</a> = {}</span>}>
      **Propriétés**

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