Gestionar errores del servidor

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Explicar cómo gestionar errores de servidor que se producen cuando conecta una propiedad.
  
• Explicar cómo gestionar errores de servidor que se producen cuando conecta una función.
  
• Explicar cómo gestionar errores de servidor que se producen cuando llama una función de LDS (Servicio de datos Lightning) o Apex de forma imperativa.
  
• Identificar la forma recomendada de interactuar con datos y gestionar errores para un caso de uso específico.
  

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Gestionar errores de servidor en componentes web Lightning

Los errores generados por adaptadores de red de LDS, funciones de LDS y llamadas a Apex tienen estructuras específicas. Para recuperar información acerca de un error, procesa la respuesta de error en su código JavaScript. A continuación puede mostrar el contenido del error al usuario.

Como el desarrollador, usted decide cómo presentar errores al usuario: un panel de error, un mensaje emergente u otra cosa. Para fines de aprendizaje, los ejemplos en este módulo afloran errores haciendo referencia a una propiedad errors (errores) en el marcado, como esta:

errors.html

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

El modo de gestionar los errores de servidor en JavaScript depende de cómo se interactúa con los datos de Salesforce. Exploremos tres ejemplos: propiedades conectadas, funciones conectadas y llamadas de función imperativas.

Gestión de errores en propiedades conectadas

Cuando utiliza @wire para decorar una propiedad, los errores son accesibles en el atributo error de la propiedad. Esto es válido cuando utiliza @wire con un adaptador de red de LDS o con Apex.

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) : [];
    }
}

Aspectos destacados de código:

• Línea 2: Importamos la función de auxiliar reduceErrors desde el módulo ldsUtils. (Agregue el módulo ldsUtils a su proyecto más adelante en esta unidad).
  
• Línea 6 a 7: Decoramos la propiedad contacts (contactos) con @wire para conectarla a la función getContactsBornAfter.
  
• Línea 8: Definimos una función de captador que crea una propiedad denominada errors (errores). Cada vez que this.contacts.error cambia, el captador actualiza el valor de la propiedad errors (errores). Esto se produce debido a la reactividad.
  
• Línea 10: En el captador, utilizamos la función de auxiliar reduceErrors para asignar un formato a this.contacts.error. La función reduce los objetos de error recibidos y devuelve una matriz de todos los mensajes de error que se produjeron.
  

La función de auxiliar reduceErrors en este ejemplo procede del módulo ldsUtils de la aplicación de muestra LWC Recipes. LWC Recipes contiene ejemplos de patrones comunes fáciles de resumir implementados como componentes web Lightning. No dude en copiar el módulo ldsUtils en su proyecto y utilizar la función reduceErrors.

Gestión de errores en funciones conectadas

Cuando utiliza @wire para decorar una función, la función recibe como parámetro un objeto que incluye errores (si existe algún error). Esto se aplica cuando utiliza @wire con adaptadores de red de LDS o Apex.

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);
    }
}

Aspectos destacados de código:

• Línea 2: Importamos la función de auxiliar reduceErrors desde el módulo ldsUtils (como hicimos en el ejemplo de wireApexProperty).
  
• Línea 3: Importamos la función getContactsBornAfter desde la clase ContactController.
  
• Línea 6: Definimos la propiedad errors (errores).
  
• Línea 7 a 8: Decoramos la función wiredContacts con @wire para conectarla a la función getContactsBornAfter.
  
• Línea 10: Cada vez que la función conectada recibe un error, utilizamos la función de auxiliar reduceErrors para asignarle un formato. La función devuelve una matriz de todos los errores que se produjeron.
  

Gestión de errores al llamar una función de forma imperativa

Si llama una función LDS o un método de Apex de forma imperativa, el servidor devuelve errores como un parámetro a la función de devolución de llamadas del método catch.

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
            });
    }
}

Aspectos destacados de código:

• Línea 2: Importamos la función de auxiliar reduceErrors.
  
• Línea 6: Definimos una propiedad denominada errors (errores).
  
• Línea 8: Invocamos la función getContactsBornAfter de forma imperativa. La función devuelve un compromiso.
  
• Línea 11 a 13: Si se resuelve el compromiso, procesamos contacts.
  
• Línea 14 a 16: Si se rechaza el compromiso, utilizamos la función de auxiliar reduceErrors para asignar formato al error recibido y almacenarlo en la propiedad errors (errores).
  

Gestionar errores en el componente accountList

Agreguemos la gestión de errores al componente accountList que creó.

1. En el archivo accountList.html, tras la <template> (plantilla) que incluye lightning-datatable, agregue este código:
   

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

2. Copie la carpeta ldsUtils desde recetas de LWC e inclúyala en el directorio force-app/main/default/lwc en su proyecto. Este componente contiene la función reduceErrors.
   
3. Importe la función reduceErrors cerca del inicio de accountList.js.
   

   import { reduceErrors } from 'c/ldsUtils';

4. En accountList.js, inserte este captador, que define una propiedad errors (errores):
   

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

5. Para probar la gestión de errores, fuerce el método getAccounts (en AccountController.cls) para arrojar un error comentando el cuerpo del método (temporalmente), y agregando este código en su lugar:
   

   throw new AuraHandledException('Forced error');

6. Guarde los tres archivos que modificó: accountList.html, accountList.js y AccountController.cls.
   
7. Implemente los archivos de proyecto (desde force-app/main/default).
   
8. Si aún no está abierto, abra su Trailhead Playground.
   
9. Para comprobar el resultado, actualice la página Trabajar con datos.
   Sugerencia: Como Lightning Data Service almacena resultados en caché, es posible que tenga que aclarar el caché antes de que pueda ver su error forzado en acción.
   

Resumen

Ahora conoce varias formas de interactuar con datos de Salesforce en sus componentes web Lightning. Se prefieren algunas soluciones a otras bajo ciertas circunstancias. Esta tabla resume soluciones recomendadas por caso de uso.

Utilizar casos para interactuar con datos de Salesforce

Cuando trabaja con datos en componentes web Lightning, la gestión de errores varía. El modo en que accede a errores depende de cómo está interactuando con los datos.

Gestión de errores del servidor

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

Finalización

En este módulo, descubrió varias formas de trabajar con datos de Salesforce en componentes web Lightning. Conoció los pros y los contras de cada técnica, cuándo se recomienda cada una y cómo implementar cada solución. También aprendió cómo gestionar errores de servidor en componentes web Lightning, basándose en cómo interactúa con datos de Salesforce.

Para continuar obteniendo información acerca de trabajar con datos de Salesforce en componentes web Lightning, consulte los recursos proporcionados en este módulo. Además, consulte Inicio rápido: Explore la aplicación Recipes de muestra para más ejemplos y el código para implementarlos.

Recursos

• Guía del desarrollador de componentes web Lightning: Gestionar errores en Lightning Data Service
• Blog: Mejores prácticas de gestión de errores para componentes web Lightning