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

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 getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    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 getRelatedContacts.
  • 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.
Remarque

Remarque

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 getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexFunction extends LightningElement {
    @api recordId;
    errors;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    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 getRelatedContacts à 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 getRelatedContacts.
  • 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 getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    errors;
    handleButtonClick() {
        getRelatedContacts({
            accountId: '$recordId'
        })
            .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 getRelatedContacts. 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 composant ldsUtils de LWC Recipes et ajoutez-le dans le dossier 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

Cas d’utilisation
Solution recommandée
Notes
Consulter ou modifier un enregistrement en spécifiant sa présentation ou une liste de champs
lightning-record-form

Consulter un enregistrement avec une présentation de formulaire personnalisée ou un rendu personnalisé des données d’enregistrement
lightning-record-view-form

Modifier un enregistrement avec une présentation de formulaire personnalisée, un rendu personnalisé des données d’enregistrement ou des valeurs de champ préremplies
lightning-record-edit-form

Lire des métadonnées ou des données pour un enregistrement
Adaptateurs Wire de LDS
Association possible, mais les opérations s’exécuteront sur des transactions indépendantes
Créer, modifier ou supprimer un enregistrement
Fonctions LDS
Association possible, mais les opérations s’exécuteront sur des transactions indépendantes
Lire plusieurs enregistrements
Appeler Apex avec @wire
Annotez la méthode Apex avec cacheable=true
Lire plusieurs enregistrements lors d’une invocation unique ou modifier plusieurs enregistrements
Appeler Apex de manière impérative
Pour les lectures, annotez la méthode Apex avec cacheable=true

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

Exploitation des données

Accès aux erreurs du serveur

Utilisez un adaptateur Wire de LDS ou une méthode Apex et décorez une propriété
Utilisez reduceErrors pour gérer l’erreur renvoyée à la propriété liée dans decoredProperty.error
Utilisez un adaptateur Wire de LDS ou une méthode Apex et décorez une fonction
Utilisez reduceErrors pour gérer l’erreur renvoyée dans le paramètre d’objet reçu par la fonction liée

decoratedFunction({data, error}) {...}
Appel impératif d’une fonction Wire de LDS ou d’une méthode Apex
Utilisez reduceErrors pour gérer l’erreur reçue en tant que paramètre sur la fonction de rappel de la méthode catch

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

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