ErrorDisplay

Bannière d'erreur rouge avec bouton de fermeture. Affiche le message d'une ApiError et se masque au clic sur le bouton.

Utilisation — pattern Guard

Le pattern le plus courant : si une erreur est présente, on affiche uniquement la bannière à la place du contenu.

import { ErrorDisplay } from "@ramses1er/cbk-toolkit/client";

function MonComposant() {
  const { data, error } = useGetUsers();

  if (error) {
    return <ErrorDisplay error={error} />;
  }

  return <div>...</div>;
}

Utilisation — pattern Bannière

Pour afficher l'erreur au-dessus du contenu sans le masquer entièrement (utile quand plusieurs requêtes peuvent échouer).

import { ErrorDisplay } from "@ramses1er/cbk-toolkit/client";

function MonComposant() {
  const listA = useGetA();
  const listB = useGetB();

  const queryError = listA.error || listB.error;

  return (
    <div className="space-y-6">
      {queryError && <ErrorDisplay error={queryError} />}
      <Contenu />
    </div>
  );
}

Utilisation — dans un tableau

Dans un composant de tableau, on wrapper l'ErrorDisplay dans un div et on utilise une key pour forcer le ré-affichage si l'erreur change.

import { ErrorDisplay } from "@ramses1er/cbk-toolkit/client";

function MonTableau() {
  const banner = error ? (
    <div className="mb-4">
      <ErrorDisplay key={error.message} error={error} />
    </div>
  ) : null;

  return (
    <>
      {banner}
      <table>...</table>
    </>
  );
}

API de référence

Prop	Type	Défaut	Description
error	ApiError \| null	requis	L'erreur à afficher. Si `null`, le composant ne rend rien.

Comportement

Si error est null → ne rend rien
Si l'utilisateur clique sur X→ se masque (state interne dismissed)
Pour ré-afficher après dismiss, changer la key (ex: key={error.message})