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.