Zum Hauptinhalt springen

ErrorBoundary

ErrorBoundary in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Fehlergrenze und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Fehlergrenzen sind Wrapper, die eine Fallback-Komponente rendern, wenn eines der zugehörigen untergeordneten Elemente einen Fehler aufweist.

<ErrorBoundary>
    <BadComponent/>
</ErrorBoundary>

Anpassungsbeispiel​

Sie können Eigenschaften an die Fehlergrenze-Komponente übergeben, die dann an ihre Fallback-Komponente übergeben werden.

<ErrorBoundary noticeStyle="card" showErrorMessage>
    <BadComponent/>
</ErrorBoundary>

Beispiel für eine einfache benutzerdefinierte Fallback-Komponente​

Sie können eine eigene Fallback-Komponente definieren, die beim Auftreten eines Fehlers gerendert wird.

function AlternateFallback () {
    return (
        <strong>An error occurred.</strong>
    )
}

...

<ErrorBoundary fallbackComponent={AlternateFallback}>
    <BadComponent/>
</ErrorBoundary>

Beispiel für benutzerdefinierte Fallback-Komponente mit Fehlermeldung​

Ein Objekt wird an die Fallback-Komponente übergeben, die das error-JavaScript-Objekt als eine ihrer Eigenschaften enthält.

function AlternateFallback({error}) {
    return (
        <span><strong>An error occurred:</strong>&nbsp;{error.message}</span>
    )
}

...

<ErrorBoundary fallbackComponent={AlternateFallback}>
    <BadComponent/>
</ErrorBoundary>

Beispiel für benutzerdefinierte Fallback-Komponente mit Eigenschaften​

Zusätzliche Eigenschaften, die an die Fehlergrenze-Komponente übergeben werden, werden als Eigenschaften für die an fallbackComponent übergebene Komponente hinzugefügt.

function MakeToast(error) {
    ToastProvider.toast({
    message: error.message,
    autoClose: 3000,
    type: "error",
    });
}

function AlternateFallback({error, buttonLabel}) {
    return (
        <>
          <ToastProvider />
          <Button label={buttonLabel} onClick={(error) => MakeToast(error)}/>
        </>
    )
}

...

<ErrorBoundary 
      fallbackComponent={AlternateFallback}
      buttonLabel="Click for notification"
    >
    <BadComponent/>
</ErrorBoundary>