Behandeln von Serverfehlern

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

• Erläutern, wie Serverfehler behandelt werden, die beim Verbinden einer Eigenschaft mit @wire auftreten
  
• Erläutern, wie Serverfehler behandelt werden, die beim Verbinden einer Funktion mit @wire auftreten
  
• Erläutern, wie Serverfehler behandelt werden, die auftreten, wenn Sie eine LDS-Funktion oder Apex imperativ aufrufen
  
• Benennen der empfohlenen Methode für die Interaktion mit Daten und die Fehlerbehandlung in einem spezifischen Anwendungsfall
  

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

Behandeln von Serverfehlern in Lightning-Webkomponenten

Fehler, die von LDS-Wire-Adaptern, LDS-Funktionen und Apex-Aufrufen ausgelöst werden, haben eine ganz spezifische Struktur. Um Informationen zu einem Fehler abzurufen, verarbeiten Sie die Fehlerantwort in Ihrem JavaScript-Code. Dann können Sie den Fehlerinhalt für den Benutzer anzeigen.

Als Entwickler entscheiden Sie, wie Sie dem Benutzer Fehler präsentieren, ob in einem Fehlerbereich, einer Meldung oder in anderer Form. Zu Lernzwecken werden Fehler bei den Beispielen in diesem Modul durch Referenzieren einer Eigenschaft errors im Markup erfasst. Zum Beispiel:

errors.html

<template>
    <template if:true={errors}>
        <p>{errors}</p>
    </template>
</template>

Die Behandlung von Serverfehlern in JavaScript hängt davon ab, wie Sie mit Salesforce-Daten interagieren. Sehen wir uns drei Beispiele an: mit @wire verbundene Eigenschaften, mit @wire verbundene Funktionen und imperative Funktionsaufrufe.

Behandeln von Fehlern bei mit @wire verbundenen Eigenschaften

Wenn Sie eine Eigenschaft mit dem Decorator @wire versehen, können Sie im Attribut error der Eigenschaft auf Fehler zugreifen. Dies gilt, wenn Sie @wire mit einem LDS-Wire-Adapter oder mit Apex verwenden.

wireApexProperty.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class WireApexProperty extends LightningElement {
    @api minBirthDate;
    @wire(getContactsBornAfter, { birthDate: '$minBirthDate' })
    contacts;
    get errors() {
        return (this.contacts.error) ?
            reduceErrors(this.contacts.error) : [];
    }
}

Code-Highlights:

• Zeile 2: Wir importieren die Hilfsfunktion reduceErrors aus dem Modul ldsUtils. (Sie fügen das Modul ldsUtils später in dieser Einheit zu Ihrem Projekt hinzu.)
  
• Zeilen 6–7: Wir versehen die Eigenschaft contacts mit dem Decorator @wire, um sie mit der Funktion getContactsBornAfter zu verbinden.
  
• Zeile 8: Wir definieren eine Getter-Funktion, die eine Eigenschaft namens errors erstellt. Jedes Mal, wenn sich this.contacts.error ändert, aktualisiert der Getter den Wert der Eigenschaft errors. Dies geschieht aufgrund von Reaktionsfähigkeit.
  
• Zeile 10: Im Getter verwenden wir die Hilfsfunktion reduceErrors, um this.contacts.error zu formatieren. Die Funktion reduziert die empfangenen Fehlerobjekte und gibt ein Array aller aufgetretenen Fehler zurück.
  

Die Hilfsfunktion reduceErrors stammt aus dem Modul ldsUtils der Beispielanwendung LWC Recipes. LWC Recipes enthält leicht verständliche Beispiele für gängige Muster, die als Lightning-Webkomponenten implementiert sind. Sie können das Modul ldsUtils gerne in Ihr Projekt kopieren und die Funktion reduceErrors verwenden.

Behandeln von Fehlern bei mit @wire verbundenen Funktionen

Wenn Sie eine Funktion mit dem Decorator @wire versehen, empfängt die Funktion als Parameter ein Objekt, das Fehler enthält (sofern Fehler aufgetreten sind). Dies gilt, wenn Sie @wire mit einem LDS-Wire-Adapter oder mit Apex verwenden.

wireApexFunction.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class WireApexFunction extends LightningElement {
    @api minBirthDate;
    errors;
    @wire(getContactsBornAfter, { birthDate: '$minBirthDate' })
    wiredContacts({data, error}) {
        if (error)
            this.errors = reduceErrors(error);
    }
}

Code-Highlights:

• Zeile 2: Wir importieren die Hilfsfunktion reduceErrors aus dem Modul ldsUtils (wie im Beispiel "wireApexProperty").
  
• Zeile 3: Wir importieren die Funktion getContactsBornAfter aus der Klasse ContactController.
  
• Zeile 6: Wir definieren die Eigenschaft errors.
  
• Zeilen 7–8: Wir versehen die Funktion wiredContacts mit dem Decorator @wire, um sie mit der Funktion getContactsBornAfter zu verbinden.
  
• Zeile 10: Jedes Mal, wenn die mit @wire verbundene Funktion einen Fehler empfängt, verwenden wir die Hilfsfunktion reduceErrors, um ihn zu formatieren. Die Funktion gibt ein Array aller aufgetretenen Fehler zurück.
  

Behandeln von Fehlern beim imperativen Aufruf einer Funktion

Wenn Sie eine LDS-Funktion oder Apex-Methode imperativ aufrufen, gibt der Server Fehler als Parameter an die Rückruffunktion der Methode "catch" zurück.

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class CallApexImperative extends LightningElement {
    @api minBirthDate;
    errors;
    handleButtonClick() {
        getContactsBornAfter({
            birthDate: this.minBirthDate
        })
            .then(contacts => {
                // code to execute if the promise is resolved
            })
            .catch(error => {
                this.errors = reduceErrors(error); // code to execute if the promise is rejected
            });
    }
}

Code-Highlights:

• Zeile 2: Wir importieren die Hilfsfunktion reduceErrors.
  
• Zeile 6: Wir definieren die Eigenschaft namens errors.
  
• Zeile 8: Wir rufen die Funktion getContactsBornAfter imperativ auf. Die Funktion gibt ein Versprechen zurück.
  
• Zeilen 11–13: Wird das Versprechen erfüllt, verarbeiten wir contacts.
  
• Zeilen 14–16: Wird das Versprechen abgelehnt, verwenden wir die Hilfsfunktion reduceErrors, um den empfangenen Fehler zu formatieren und in der Eigenschaft errors zu speichern.
  

Behandeln von Fehlern in der Komponente "accountList"

Wir fügen nun die Fehlerbehandlung zu der von Ihnen erstellten Komponente "accountList" hinzu.

1. Fügen Sie in der Datei "accountList.html" nach der <template>, die die lightning-datatable beinhaltet, folgenden Code hinzu:
   

   <template if:true={errors}>
       <p>{errors}</p>
   </template>

2. Kopieren Sie den Ordner ldsUtils aus LWC recipes und legen Sie ihn im Verzeichnis force-app/main/default/lwc Ihres Projekts ab. Diese Komponente enthält die Funktion reduceErrors.
   
3. Importieren Sie die Funktion reduceErrors am Beginn von "accountList.js".
   

   import { reduceErrors } from 'c/ldsUtils';

4. Fügen Sie in "accountList.js" folgende Getter-Funktion ein, die eine Eigenschaft namens errors definiert:
   

   get errors() {
       return (this.accounts.error) ?
           reduceErrors(this.accounts.error) : [];
   }

5. Um die Fehlerbehandlung zu testen, zwingen Sie die Methode getAccounts (in "AccountController.cls"), einen Fehler zurückzugeben, indem Sie den Hauptteil der Methode (vorübergehend) zu Kommentaren machen und stattdessen folgenden Code hinzufügen:
   

   throw new AuraHandledException('Forced error');

6. Speichern Sie die drei Dateien, die Sie bearbeitet haben: "accountList.html", "accountList.js" und "AccountController.cls".
   
7. Stellen Sie die Projektdateien bereit (aus force-app/main/default).
   
8. Öffnen Sie Ihren Trailhead Playground, falls er nicht bereits geöffnet ist.
   
9. Um das Ergebnis zu prüfen, aktivieren Sie die Seite "Working with Data".
   Tipp: Da Lightning Data Service Ergebnisse im Cache zwischenspeichert, müssen Sie eventuell den Cache leeren, bevor Sie Ihren erzwungenen Fehler in Aktion sehen.
   

Übersicht

Sie kennen jetzt ein paar Möglichkeiten für die Interaktion mit Salesforce-Daten in Ihren Lightning-Webkomponenten. Unter bestimmten Umständen sind einige Lösungen anderen vorzuziehen. Die folgende Tabelle enthält eine Übersicht über die empfohlenen Lösungen nach Anwendungsfall.

Anwendungsfälle für die Interaktion mit Salesforce-Daten

Bei der Arbeit mit Daten in Lightning-Webkomponenten variiert die Fehlerbehandlung. Der Zugriff auf Fehler hängt davon ab, wie Sie mit den Daten interagieren.

Behandeln von Serverfehlern

functionToInvoke()
.then(data => {...})
.catch(error => {...});

Nachbetrachtung

In diesem Modul wurden verschiedene Möglichkeiten für die Arbeit mit Salesforce-Daten in Lightning-Webkomponenten behandelt. Sie haben die Vor- und Nachteile der einzelnen Verfahren kennengelernt, erfahren, wann sie jeweils bevorzugt verwendet werden sollten, und gelernt, wie Sie die einzelnen Lösungen implementieren. Außerdem wurde erklärt, wie Sie Serverfehler in Lightning-Webkomponenten behandeln, je nachdem wie Sie mit Salesforce-Daten interagieren.

Links zu weiteren Informationen über das Arbeiten mit Salesforce-Daten in Lightning-Webkomponenten finden Sie im Abschnitt "Ressourcen" dieses Moduls. Im Projekt Schnelleinstieg: Kennenlernen der Recipes-Beispielanwendung finden Sie weitere Beispiele und den Code für ihre Implementierung.

Ressourcen

• Entwicklerhandbuch für Lightning-Webkomponenten: Behandeln von Fehlern in Lightning Data Service (Englisch)
• Blog: Bewährte Methoden für die Fehlerbehandlung von Lightning-Webkomponenten (Englisch)