Introdução à manipulação de erros no Angular 7: Parte 1 – Angular errorHandler

Neste tutorial, você será introduzido aos erros no JavaScript, o conceito de tentativa de captura e como ele é usado e uma pequena introdução à manipulação de erros internos com o Angular errorHandler.

Errors

Uma das minhas estrelas de cinema preferidas, Samuel L. Jackson, foi a primeira pessoa de quem ouvi a frase “errar é humano”, e embora não me lembre do título do filme em particular agora podem concordar comigo que o mesmo acontece com os erros ao escrever código. Como desenvolvedor Angular, você já sabe que os erros podem ser causados por erros pessoais, como ter uma declaração de importação com o nome da extensão do arquivo no Angular 7 e ela aparece no seu navegador se você não conseguir pegá-la.

 import { DataService } from 'src/app/services/data.service.ts';

Errores podem surgir por falta de testes, comunicação com o servidor, ou até mesmo ambigüidade do projeto Angular em que você está trabalhando. Nós somos seres humanos e por isso somos propensos a erros, essa é uma razão pela qual um bom editor como o VS Code sempre desenhará linhas de guincho quando você começar a descarrilar.

Prerequisites

Para poder seguir em frente na demonstração deste artigo você deve ter:

• Node versão 11.0 instalado em sua máquina.
• Node Package Manager versão 6.7 (geralmente vem com a instalação do Node).
• Angular CLI versão 7.0
• A última versão do Angular (versão 7)

 // run the command in a terminal ng version

Confirme que você está usando a versão 7, e atualize para 7 se você não estiver.Outras coisas que serão agradáveis são:

• Um conhecimento de trabalho da estrutura Angular a um nível iniciante.
• A familiaridade com os serviços Angulares será uma vantagem mas não um requisito.

Tipos de erros

Existem muitos tipos de erros mas irei agrupá-los em duas categorias principais: erros internos e externos.

• Erros internos: (também conhecidos como erros do lado do cliente) Estes são aqueles pelos quais você pode ser responsabilizado, os erros de sintaxe, erros do gerenciador de pacotes, erros de referência, erros de tipo e todos os tipos de erros do lado do cliente que podem ser corrigidos pelo desenvolvedor dentro da aplicação Angular.
• Erros externos: (também conhecidos como erros do lado do servidor) Estes podem abranger desde erros do servidor, que na sua maioria vêm com códigos de status de três dígitos como 500 até erros da rede da Internet, e até mesmo erros específicos do navegador. Estes são basicamente erros que estão fora do alcance da aplicação Angular, daí o nome outsider.

Este artigo irá focar nos erros insider e depois um artigo subsequente irá focar nos erros outsider.

Passos do bebê: jogue e pegue!

Quando você executa uma função em JavaScript, essa função junta-se a uma espécie de fila de execução de funções e à medida que a aplicação roda e chega a sua vez, ela sai da fila e é executada. Então, se ocorrer um erro, o JavaScript lança uma exceção, que removerá imediatamente todas as operações da fila até que a exceção seja tratada. Em um nível básico, as exceções são tratadas com blocos try/catch, a aplicação inteira trava se o compilador não vê esse bloco try/catch. A sintaxe try/catch fica assim:

Você verá a utilidade em uma pequena demonstração. Crie um novo projeto angular com o CLI, chame-o de ngapp

 ng new ngapp

Aceite as configurações do roteador e escolha CSS simples como folha de estilo. Vá para o arquivo app.component.ts e copie no código abaixo:

Copie estes no arquivo app.component.html

 <!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>

Então copie estes estilos básicos para o arquivo app.component.css

Executar a aplicação em desenvolvimento assim:

 ng serve

Em alguns casos ele falhará na compilação, quando isto acontecer ele será reexecutado e compilado.

Esta mostra no console e na maioria das vezes, quebra toda a aplicação imediatamente, como você pode ver a mensagem que logamos não mostrava. O bloco try/catch trata essas exceções graciosamente e a aplicação continua rodando. Então, se você tiver outro botão com um bloco try/catch desta vez, você pode notar a diferença. Copie isto em app.component.html file :

Copie o código abaixo em app.component.ts file:

O código em negrito mostra a mesma instância de erro de referência, mas desta vez está envolto num bloco try-catch para que possa ser tratado graciosamente. Quando você executar o aplicativo novamente, ele deve parecer assim:

Limitações de try/catch

Por melhor que seja try/catch, pensando no aplicativo você já vê como ele não é sustentável. Isto porque você não pode adicionar estes blocos de try/catch em todas as funções da sua aplicação, o que não é eficaz em termos de recursos. A boa notícia é que Angular tem um tipo de try/catch global que podemos usar em um local centralizado para pegar todas as exceções.

Error handler

Angular tem uma classe global de tratamento de erros chamada errorHandler que fornece um gancho para o tratamento centralizado de exceções dentro da sua aplicação. Ele basicamente intercepta todos os erros que acontecem em sua aplicação, e registra todos eles no console, e impede que a aplicação trave (esta foi a razão pela qual seu primeiro botão não trava a aplicação). A sintaxe se parece com isto:

Isto nos permite modificar o comportamento padrão dos erros de registro no console para nossa própria lógica depois de adicioná-la à nossa lista de provedores em nosso módulo de aplicação. Vá para o arquivo app.component.ts e copie o código abaixo nele:

O bloco de tentativa de captura foi removido, então você deve ter duas linhas (ou problemas) de chiado no seu editor de código significando dois erros de referência. Agora para testar o manipulador de erros Angular global, navegue até o arquivo app.module.ts e copie o código abaixo:

As alterações feitas assim como a sintaxe sugere que criamos uma classe manipuladora de erros global que implementa o manipulador de erros Angular e depois a registra na seção de provedor. Se você salvar isso e executar a aplicação você verá os textos registrados no console para cada erro e a aplicação funcionando como se fosse uma tentativa de captura.

Error service

Agora você pode ver toda a nossa lógica de erro está dentro do módulo central da aplicação, esta não é a forma como Angular nos encoraja a escrever código. Assim, em linha com manter tudo modular, nós usamos um serviço. você vai chamá-lo de serviço de erro e toda a lógica sobre como lidar com seus erros será mantida nele. Primeiro de tudo, gere um serviço Angular com o CLI:

 ng generate service error

ou

 ng g s error

> Então você tem que remover a lógica do manipulador de erros no seu arquivo app.module.ts para que ele fique assim:

Depois disso use o CLI para gerar um componente de erro para o qual o usuário pode ser redirecionado caso ocorra um erro.

 ng g c error

Agora você tem o componente de erro não precisa modificá-lo, navegue até o arquivo error.service.ts e copie o código abaixo nele:

Aqui a lógica é modificada um pouco para primeiro verificar o tipo de erro que é, se for um erro interno então ele navega o usuário para uma página de erro conforme o erro ocorre. Então certifique-se que seu arquivo app-routing.module.ts está atualizado com a rota assim:

Finalmente, seu arquivo app.component.html deve parecer assim:

Se você seguiu o post até este ponto, você pode executar a aplicação em desenvolvimento novamente, seus erros serão tratados graciosamente como esperado.

Conclusion

Você foi introduzido aos erros e o conceito por trás de lidar com eles em Angular com a classe errorHandler com foco nos erros JavaScript do lado do cliente. O próximo tutorial irá aprofundar os erros de outsider, os interceptores HTTP e o rastreamento de erros com um edifício de serviço remoto sobre todos os conceitos que você aprendeu neste post. O código completo para este tutorial está no GitHub e pode ser encontrado aqui.