Traitement des erreurs serveur

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Expliquer comment gérer les erreurs de serveur qui se produisent lorsque vous liez une propriété
• Expliquer comment gérer les erreurs de serveur qui se produisent lorsque vous liez une fonction
• Expliquer comment gérer les erreurs de serveur qui se produisent lorsque vous appelez une fonction LDS ou Apex de manière impérative
• Identifier la méthode recommandée d’interaction avec les données et de gestion des erreurs pour un cas d’utilisation spécifique

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Gestion des erreurs de serveur dans les composants Web Lightning

Les erreurs générées par les adaptateurs Wire de LDS, les fonctions LDS et les appels à Apex sont structurées de façon spécifique. Pour récupérer des informations au sujet d’une erreur, vous devez traiter la réponse d’erreur dans votre code JavaScript. Vous pouvez ensuite informer l’utilisateur du contenu de l’erreur.

En tant que développeur, vous décidez comment présenter les erreurs à l’utilisateur, par exemple en utilisant un panneau d’erreurs ou un message flottant. À des fins d’apprentissage, les exemples de ce module font apparaître les erreurs en référençant une propriété errors dans le balisage, comme présenté ci-dessous :

errors.html

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

La manière dont vous gérez les erreurs de serveur dans JavaScript dépend de la manière dont vous interagissez avec les données Salesforce. Étudions trois exemples : les propriétés liées, les fonctions liées et les appels de fonction impératifs.

Gestion des erreurs dans les propriétés liées

Lorsque vous utilisez @wire pour décorer une propriété, les erreurs sont accessibles dans l’attribut de la propriété error. Ceci est valable lorsque vous utilisez @wire avec un adaptateur Wire de LDS ou avec Apex.

wireApexProperty.js

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

Points marquants du code :

• Ligne 2 : nous importons la fonction d’assistance reduceErrors à partir du module ldsUtils. (Vous ajouterez le module ldsUtils à votre projet plus tard dans cette unité.)
• Lignes 6 à 7 : nous décorons la propriété contacts avec @wire pour la lier à la fonction getContactsBornAfter.
• Ligne 8 : nous définissons une fonction d’obtention qui crée une propriété nommée errors. Chaque fois que this.contacts.error est modifié, la fonction d’obtention met à jour la valeur de la propriété errors. Cela se produit en raison de la réactivité.
• Ligne 10 : nous utilisons la fonction d’assistance reduceErrors dans la fonction d’obtention afin de formater this.contacts.error. La fonction réduit les objets d’erreur reçus et renvoie un tableau comportant tous les messages d’erreur produits.

Dans cet exemple, la fonction d’assistance reduceErrors provient du module ldsUtils de l’exemple d’application LWC Recipes. LWC Recipes contient des exemples faciles à comprendre de modèles courants implémentés en tant que composants Web Lightning. N’hésitez pas à copier le module ldsUtils dans votre projet et à utiliser la fonction reduceErrors.

Gestion des erreurs dans les fonctions liées

Lorsque vous utilisez @wire pour décorer une fonction, celle-ci reçoit comme paramètre un objet qui inclut des erreurs (le cas échéant). Cette action s’applique lorsque vous utilisez @wire avec des adaptateurs Wire LDS ou Apex.

wireApexFunction.js

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

Points marquants du code :

• Ligne 2 : nous importons la fonction d’assistance reduceErrors du module ldsUtils (comme nous l’avons fait dans l’exemple wireApexProperty).
• Ligne 3 : nous importons la fonction getContactsBornAfter à partir de la classe AccountController.
• Ligne 6 : nous définissons la propriété errors.
• Lignes 7 à 8 : nous décorons la fonction wiredContacts avec @wire pour la lier à la fonction getContactsBornAfter.
• Ligne 10 : chaque fois que la fonction liée reçoit une erreur, nous utilisons la fonction d’assistance reduceErrors pour la formater. La fonction renvoie un tableau de toutes les erreurs qui se sont produites.

Gestion des erreurs lors de l’appel impératif d’une fonction

Si vous appelez une fonction LDS ou une méthode Apex de manière impérative, le serveur renvoie des erreurs en tant que paramètres à la fonction de rappel de la méthode catch.

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getContactsBornAfter from '@salesforce/apex/AccountController.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
            });
    }
}

Points marquants du code :

• Ligne 2 : nous importons la fonction d’assistance reduceErrors.
• Ligne 6 : nous définissons une propriété nommée errors.
• Ligne 8 : nous appelons de manière impérative la fonction getContactsBornAfter. La fonction renvoie une promesse.
• Lignes 11 à 13 : si la promesse est résolue, nous traitons contacts.
• Lignes 14 à 16 : si la promesse est rejetée, nous utilisons la fonction d’assistance reduceErrors pour formater l’erreur reçue et la stocker dans la propriété errors.

Gestion des erreurs dans le composant accountList

Intégrons la gestion des erreurs au composant accountList que vous avez créé.

1. Dans le fichier accountList.html, ajoutez le code suivant après le <modèle> qui inclut lightning-datatable :
   

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

2. Copiez le dossier ldsUtils de LWC Recipes (Recettes LWC) et incluez-le dans le répertoire force-app/main/default/lwc de votre projet. Ce composant contient la fonction reduceErrors.
3. Importez la fonction reduceErrors vers le début du fichier accountList.js.
   

   import { reduceErrors } from 'c/ldsUtils';

4. Dans accountList.js, insérez la fonction d’obtention suivante, qui définit une propriété errors :
   

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

5. Pour tester la gestion des erreurs, forcez la méthode getAccounts (dans AccountController.cls) à générer une erreur en commentant le corps de la méthode (temporairement) et en ajoutant le code suivant à sa place :
   

   throw new AuraHandledException('Forced error');

6. Enregistrez les trois fichiers que vous avez modifiés : accountList.html, accountList.js et AccountController.cls.
7. Déployez les fichiers de projet (depuis force-app/main/default).
8. Ouvrez votre Trailhead Playground (s’il n’est pas déjà ouvert).
9. Pour vérifier le résultat, actualisez la page Working with Data.
   Astuce : étant donné que Lightning Data Service met en cache les résultats, vous devrez peut-être vider le cache avant de voir votre erreur forcée en action.

Récapitulatif

Vous connaissez désormais plusieurs façons d’interagir avec les données Salesforce dans vos composants Web Lightning. Certaines solutions sont privilégiées par rapport à d’autres dans certaines circonstances. Ce tableau résume les solutions recommandées selon les cas d’utilisation.

Cas d’utilisation relatifs aux interactions avec les données Salesforce

La gestion des erreurs varie lorsque vous exploitez des données dans des composants Web Lightning. La manière dont vous accédez aux erreurs dépend de la manière dont vous interagissez avec les données.

Traitement des erreurs de serveur

Conclusion

Dans ce module, vous avez découvert différentes manières d’utiliser les données Salesforce dans les composants Web Lightning. Vous avez découvert les avantages et les inconvénients de chaque méthode, l’utilisation recommandée de chaque solution et la manière de les mettre en œuvre. Vous avez également appris à gérer les erreurs de serveur dans les composants Web Lightning, en fonction de votre interaction avec les données Salesforce.

Pour en savoir plus sur l’utilisation des données Salesforce dans les composants Web Lightning, consultez les ressources fournies dans ce module. Consultez également Prise en main rapide : exploration de l’exemple d’application Recipes pour découvrir d’autres d’exemples et le code nécessaire afin de les implémenter.

Ressources

• Guide du développeur de composants Web Lightning : Gestion des erreurs dans Lightning Data Service
• Blog : Bonnes pratiques de gestion des erreurs relatives aux composants Web Lightning