Passer au contenu principal

Limite d'erreur

Limite d'erreur dans Storybook

Utilisation​

Présentation​

Le composant de limite d'erreur est un composant wrapper qui accepte les composants enfants et quelques personnalisations en option. Lorsque le rendu d'un composant enfant est normal, le composant de limite d'erreur ne réagit pas. Toutefois, si un composant enfant génère une erreur lors du rendu, le composant de limite d'erreur intervient et remplace ce composant par une interface utilisateur d'erreur prédéfinie.

limite d'erreur englobant un micro front-end

Le composant de limite d'erreur intercepte les erreurs JavaScript générées par les composants React et les signale aux événements Jutro par défaut, mais ce comportement peut être modifié si nécessaire. Il présente également une action de récupération et empêche l’application entière de planter.

L'interface utilisateur d'erreur se compose d'une icône, d'un texte d'erreur et d'un texte d'erreur détaillé, ainsi que d'un bouton d'action. Vous pouvez personnaliser tous ces éléments et utiliser le composant n'importe où dans votre application. Par défaut, il est utilisé autour du modèle d'application Jutro et englobe également tous les modules micro front-end. L'ensemble des paramètres du composant de limite d'erreur et des exemples des différents styles, tels que fiche ou pleine hauteur, est disponible dans Storybook.

Intégrer un composant avec une limite d'erreur​

Vous pouvez intégrer le composant de votre choix dans un composant de limite d'erreur. Toutefois, nous vous recommandons de l'utiliser principalement pour les composants qui reposent sur des appels réseau ou qui interagissent avec des API ou des bases de données, car ils sont plus susceptibles d'échouer. Vous pouvez intégrer un composant dans un composant de limite d'erreur de la façon suivante :

const MyComponentWithBoundary = (props) => (
  <ErrorBoundary noticeStyle="card">
    <MyComponent {...props} />
  </ErrorBoundary>
);

Personnalisation​

Vous pouvez personnaliser toutes les parties du composant de limite d'erreur à l'aide de métadonnées ou de JSX. Vous pouvez également choisir d'afficher ou non l'erreur technique générée par un composant enfant.

Par exemple, vous pouvez configurer les métadonnées de façon à ce que l'erreur technique représentée par la propriété showErrorMessage apparaisse de la façon suivante :

{
  "id": "generated-f620b8f5-44fd-43a4-b828-1a88a51c80f5",
  "type": "container",
  "component": "ErrorBoundary",
  "content": [
    {
      "id": "generated-fb18c51a-a30e-4488-a66a-8d99d948c24f",
      "type": "element",
      "component": "BadComponent"
    }
  ],
  "componentProps": {
    "showErrorMessage": true
  }
}

Vous pouvez faire la même chose dans JSX en intégrant une propriété supplémentaire, showErrorMessage, de la façon suivante :

const BasicTemplate: ErrorBoundaryStory = (args) => (
  <ErrorBoundary
    showErrorMessage
    {...args}>
    <BadComponent />
  </ErrorBoundary>
);

De même, vous pouvez intégrer et personnaliser d'autres propriétés comme noticeStyle, mainMessage, detailedMessage et actions avec leurs fonctions de rappel respectives.

Vous pouvez également remplacer le composant d'interface utilisateur d'erreur par défaut par un composant personnalisé. Consultez Storybook pour obtenir plus d'exemples de personnalisation.