Tutorial-Como lidar com tratamento de erros no Angular usando TypeScript:
Passo 1: Crie um serviço de tratamento de erros
Crie um serviço separado para tratar erros. Isso ajudará a centralizar a lógica de tratamento de erros e reutilizá-la em toda a aplicação.
1.1. Crie um novo serviço usando o comando Angular CLI:
ng generate service error-handler
1.2. Abra o arquivo error-handler.service.ts e adicione o seguinte código:
import { ErrorHandler, Injectable, Injector } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; import { Router } from '@angular/router'; @Injectable() export class ErrorHandlerService implements ErrorHandler { constructor(private injector: Injector) {} handleError(error: any): void { const router = this.injector.get(Router); if (error instanceof HttpErrorResponse) { // Tratar erros de requisição HTTP if (error.status === 401) { // Redirecionar para a página de login ou exibir uma mensagem de erro router.navigate(['/login']); } else if (error.status === 404) { // Redirecionar para uma página de erro 404 ou exibir uma mensagem de erro router.navigate(['/404']); } else { // Exibir mensagem de erro genérica console.error('Ocorreu um erro na requisição HTTP:', error); } } else { // Tratar outros erros não relacionados à requisição HTTP console.error('Ocorreu um erro:', error); } } }
Passo 2: Configurar o serviço de tratamento de erros
2.1. Abra o arquivo app.module.ts e importe o serviço ErrorHandlerService:
import { ErrorHandlerService } from './error-handler.service';
2.2. Em seguida, adicione o serviço ao array providers do módulo:
@NgModule({ // ... providers: [ { provide: ErrorHandler, useClass: ErrorHandlerService }, // ... ], // ... }) export class AppModule { }
Passo 3: Usar o tratamento de erros
Agora que você configurou o serviço de tratamento de erros, pode utilizá-lo em seus componentes e serviços.
3.1. Injete o serviço ErrorHandler no componente ou serviço onde você deseja lidar com erros:
import { ErrorHandler } from '@angular/core'; constructor(private errorHandler: ErrorHandler) { }
3.2. Dentro do método onde você deseja lidar com os erros, utilize o serviço para capturar e tratar erros:
this.http.get('api/data').subscribe( (response) => { // Lógica de sucesso }, (error) => { this.errorHandler.handleError(error); } );
Agora, sempre que ocorrer um erro durante uma requisição HTTP ou em qualquer outro local onde você usar o serviço ErrorHandler, o código dentro do método handleError será executado, permitindo que você trate os erros de forma adequada.
Lembre-se de personalizar as ações de tratamento de erro de acordo com as necessidades específicas da sua aplicação. Você pode exibir mensagens de erro, redirecionar o usuário para páginas específicas ou executar outras ações dependendo do tipo de erro.