Tratamento de erros do servidor

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Explicar como lidar com erros de servidor que ocorrem ao conectar uma propriedade.
  
• Explicar como lidar com erros de servidor que ocorrem ao conectar uma função.
  
• Explicar como lidar com erros de servidor que ocorrem quando você chama imperativamente uma função do LDS ou um Apex.
  
• Identificar a maneira recomendada de interagir com os dados e lidar com erros para um caso de uso específico.
  

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Como lidar com erros do servidor em componentes Web do Lightning

Erros acionados por adaptadores de conexão do LDS, funções do LDS e chamadas para o Apex têm estruturas específicas. Para recuperar informações sobre um erro, processe a resposta de erro em seu código JavaScript. Em seguida, é possível mostrar o conteúdo do erro ao usuário.

Como desenvolvedor, você decide como apresentar erros ao usuário: um painel de erro, uma mensagem de notificação ou outra maneira. Para fins de aprendizagem, os exemplos deste módulo apresentam os erros referenciando uma propriedade erros na marcação, assim:

errors.html

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

A forma como você lida com erros de servidor em JavaScript depende de como você está interagindo com os dados do Salesforce. Vamos explorar três exemplos: propriedades conectadas, funções conectadas e chamadas de função imperativas.

Como lidar com erros em propriedades conectadas

Quando você usa @wire para decorar uma propriedade, os erros podem ser acessados no atributo error da propriedade. Isso é válido quando você usa @wire com um adaptador de conexão do LDS ou com o 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) : [];
    }
}

Destaques do código:

• Linha 2: importamos a função auxiliar reduceErrors do módulo ldsUtils. (Adicione o módulo ldsUtils ao seu projeto mais adiante nesta unidade.)
  
• Linhas 6 a 7: decoramos a propriedade contacts (contatos) com @wire para conectá-la à função getContactsBornAfter.
  
• Linha 8: definimos uma função getter que cria uma propriedade chamada errors. Toda vez que this.contacts.error muda, o getter atualiza o valor da propriedade errors (erros). Isso ocorre devido à reatividade.
  
• Linha 10: No getter, usamos a função auxiliar reduceErrors para formatar this.contacts.error. A função reduz os objetos de erro recebidos e retorna uma matriz de todas as mensagens de erro ocorridas.
  

A função auxiliar reduceErrors deste exemplo vem do módulo ldsUtils do aplicativo de exemplo LWC Recipes. O LWC Recipes contém exemplos simples de padrões comuns implementados como componentes Web do Lightning. Fique à vontade para copiar o módulo ldsUtils em seu projeto e usar a função reduceErrors.

Como lidar com erros em funções conectadas

Quando você usa @wire para decorar uma função, essa função recebe como parâmetro um objeto que inclui erros (se houver algum erro). Isso se aplica quando você usa @wire com adaptadores de conexão do LDS ou 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);
    }
}

Destaques do código:

• Linha 2: importamos a função auxiliar reduceErrors do módulo ldsUtils (como fizemos no exemplo de wireApexProperty).
  
• Linha 3: importamos a função getContactsBornAfter da classe ContactController.
  
• Linha 6: definimos a propriedade errors (erros).
  
• Linhas 7 a 8: decoramos a função wiredContacts com @wire para conectá-la à função getContactsBornAfter.
  
• Linha 10: cada vez que a função conectada recebe um erro, usamos a função auxiliar reduceErrors para formatá-la. A função retorna uma matriz de todos os erros que ocorreram.
  

Como lidar com erros ao chamar uma função imperativamente

Se você chamar uma função do LDS ou um método do Apex imperativamente, o servidor retornará erros como parâmetro para a função de retorno de chamada do método de captura.

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

Destaques do código:

• Linha 2: importamos a função auxiliar reduceErrors.
  
• Linha 6: definimos uma propriedade chamada errors (erros).
  
• Linha 8: invocamos a função getContactsBornAfter imperativamente. A função retorna uma promessa.
  
• Linhas 11 a 13: se a promessa for resolvida, processaremos contacts (contatos).
  
• Linhas 14 a 16: se a promessa for rejeitada, usaremos a função auxiliar reduceErrors para formatar o erro recebido e armazená-lo na propriedade errors (erros).
  

Como lidar com erros no componente accountList

Vamos adicionar o tratamento de erros ao componente accountList que você criou.

1. No arquivo accountList.html, após o <template> (modelo) que inclui lightning-datatable, adicione este código:
   

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

2. Copie a pasta ldsUtils do LWC recipes e inclua-a no diretório force-app/main/default/lwc em seu projeto. Este componente contém a função reduceErrors.
   
3. Importe a função reduceErrors perto do início da accountList.js.
   

   import { reduceErrors } from 'c/ldsUtils';

4. Em accountlist.js, insira este getter, que define uma propriedade de errors (erros):
   

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

5. Para testar o tratamento de erros, force o método getAccounts (em AccountController.cls) a lançar um erro comentando o corpo do método (temporariamente) e adicionando esse código em seu lugar:
   

   throw new AuraHandledException('Forced error');

6. Salve os três arquivos editados: accountList.html, accountList.js e AccountController.cls.
   
7. Implante os arquivos do projeto (de force-app/main/default).
   
8. Se ainda não estiver aberto, abra seu Trailhead Playground.
   
9. Para verificar o resultado, atualize a página Como trabalhar com dados.
   Dica: como o Lightning Data Service armazena os resultados em cache, talvez seja necessário limpar o cache antes de poder ver seu erro forçado em ação.
   

Resumo

Agora você sabe várias maneiras de interagir com os dados do Salesforce em seus componentes Web do Lightning. Algumas soluções são mais adequadas do que outras em determinadas circunstâncias. Esta tabela resume as soluções recomendadas para cada caso de uso.

Casos de uso para interagir com os dados do Salesforce

Quando você trabalha com dados nos componentes Web do Lightning, o tratamento de erros varia. A forma como você acessa erros depende de como você está interagindo com os dados.

Como lidar com erros do servidor

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

Finalizar

Neste módulo, você aprendeu sobre diferentes maneiras de trabalhar com os dados do Salesforce em componentes Web do Lightning. Você aprendeu os prós e os contras de cada técnica, quando cada uma delas é recomendada e como implementar cada solução. Também aprendeu a lidar com erros de servidor nos componentes Web do Lightning, com base na forma como você interage com os dados do Salesforce.

Para continuar a aprender sobre como trabalhar com os dados do Salesforce nos componentes Web do Lightning, confira os recursos apresentados neste módulo. Além disso, consulte Início rápido: Explore o aplicativo de exemplo Recipes para consultar mais exemplos e o código para implementá-los.

Recursos

• Guia do desenvolvedor de Componentes Web do Lightning: Como lidar com erros no Lightning Data Service
• Blog: Melhores práticas de tratamento de erros para componentes Web do Lightning