Zum Hauptinhalt springen

Fehlergrenze

Fehlergrenze in Storybook

Verwendung​

Überblick​

Die Fehlergrenze-Komponente ist eine Wrapper-Komponente, die untergeordnete Komponenten und einige optionale Anpassungen unterstützt. Wenn eine untergeordnete Komponente normal gerendert wird, führt die Fehlergrenze-Komponente keine Aktion aus. Wenn jedoch eine untergeordnete Komponente während des Renderns einen Fehler auslöst, wird die Fehlergrenze-Komponente aktiviert und ersetzt diese Komponente durch eine vordefinierte Fehler-Benutzeroberfläche.

ErrorBoundary-Umschließung eines Micro Frontend

Die Fehlergrenze-Komponente fängt die von React-Komponenten ausgelösten JavaScript-Fehler ab und meldet sie standardmäßig an Jutro-Ereignisse. Dieses Verhalten kann jedoch bei Bedarf geändert werden. Sie stellt außerdem eine Wiederherstellungsaktion bereit und verhindert, dass die gesamte Anwendung abstürzt.

Die Fehler-Benutzeroberfläche besteht aus einem Symbol, einem Fehlertext und einem detaillierten Fehlertext sowie einer Aktionsschaltfläche. Alle können kundenspezifisch angepasst und die Komponente überall in der Anwendung verwendet werden. Standardmäßig wird sie um die Jutro-Anwendungsvorlage herum verwendet und umschließt auch alle Micro Frontends. Alle Parameter für die Fehlergrenze-Komponente und Beispiele für die verschiedenen Stile, z. B. „card“ oder „full height“, sind in Storybook verfügbar.

Komponente mit einer Fehlergrenze umschließen​

Jede Komponente kann in einer Fehlergrenze-Komponente umschlossen werden. Es wird jedoch empfohlen, sie hauptsächlich für Komponenten zu verwenden, die auf Netzwerkaufrufen basieren oder mit APIs oder Datenbanken interagieren, da bei diesen Komponenten häufiger Fehler auftreten. Eine Komponente kann wie folgt mit einer Fehlergrenze-Komponente umschlossen werden:

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

Anpassung​

Sie können alle Bereiche der Fehlergrenze-Komponente mithilfe von Metadaten oder JSX anpassen. Außerdem können Sie festlegen, ob der technische Fehler angezeigt wird, der von einer untergeordneten Komponente ausgelöst wurde.

Beispielsweise können Sie die Metadaten so konfigurieren, dass der durch die Eigenschaft showErrorMessage dargestellte technische Fehler wie folgt angezeigt wird:

{
  "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
  }
}

So können Sie auch in JSX verfahren, indem Sie die zusätzliche Eigenschaft showErrorMessage übergeben:

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

Sie können andere Eigenschaften, z. B. noticeStyle, mainMessage, detailedMessage und actions mit ihren jeweiligen Rückruffunktionen auf die gleiche Weise übergeben und anpassen.

Außerdem können Sie die standardmäßige Fehler-Benutzeroberfläche durch eine benutzerdefinierte Komponente ersetzen. Weitere Anpassungsbeispiele finden Sie in Storybook.