Tratamento global de erros
Capture e transforme erros HTTP de forma centralizada.
Tratamento global de erros é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Tratamento centralizado de erros
Em vez de capturar erros HTTP em cada componente, um interceptor pode tratá-los globalmente: registrá-los, exibir uma notificação, redirecionar em caso de 401 ou padronizar o formato do erro.
catchError em um interceptor
Encadeie o fluxo de next(req) por meio de catchError para interceptar falhas.
import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
export const errorInterceptor: HttpInterceptorFn = (req, next) =>
next(req).pipe(
catchError((err: HttpErrorResponse) => {
console.error('HTTP error', err.status);
return throwError(() => err);
})
);Inspecionando HttpErrorResponse
HttpErrorResponse contém status, message e o corpo de error do servidor. Ramifique com base no status para tratar casos diferentes.
catchError((err: HttpErrorResponse) => {
if (err.status === 0) console.error('network/CORS error');
else console.error('server error', err.status);
return throwError(() => err);
})Redirecionando em caso de 401
Um 401 geralmente significa que a sessão expirou. Redirecione para a tela de login a partir do interceptor.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const router = inject(Router);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
if (err.status === 401) router.navigate(['/login']);
return throwError(() => err);
})
);
};Exibindo uma notificação
Injete um serviço de notificação para apresentar os erros ao usuário de maneira consistente.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const toast = inject(ToastService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
toast.error(err.error?.message ?? 'Something went wrong');
return throwError(() => err);
})
);
};Relançar ou ignorar
Geralmente, relance com throwError(() => err) para que os componentes ainda possam reagir. Retorne um observável alternativo (como of(null)) somente quando realmente quiser ocultar o erro dos chamadores.
Padronizando o erro
Converta corpos de erro variados do servidor em um formato consistente de erro do aplicativo antes de relançá-los, simplificando o tratamento posterior.
catchError((err: HttpErrorResponse) => {
const appError = {
code: err.status,
message: err.error?.message ?? err.message
};
return throwError(() => appError);
})Diferenciando erros do cliente e do servidor
err.error instanceof ErrorEvent (ou err.status === 0) indica um erro de cliente ou de rede; caso contrário, o backend retornou um status de erro. Trate-os de maneira diferente.
Evitando tratamento duplicado
Se o interceptor já exibir uma notificação, os componentes também não devem exibir outra para o mesmo erro. Defina uma única camada de tratamento voltado ao usuário para evitar mensagens duplicadas.
Registrando em um serviço de monitoramento
Um interceptor centralizado é o local ideal para encaminhar erros a uma ferramenta de monitoramento (Sentry etc.), anexando o contexto da requisição.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const monitor = inject(MonitoringService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
monitor.captureHttpError(req.url, err.status, err.message);
return throwError(() => err);
})
);
};Ordenando o interceptor de erros
Posicione o interceptor de erros de modo que ele envolva os demais, permitindo capturar erros de toda a cadeia, incluindo as tentativas repetidas.
provideHttpClient(
withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)Verificação rápida
Teste sua compreensão sobre o tratamento global de erros.
Recapitulação: tratando erros globalmente
Um interceptor de erros centraliza o tratamento de falhas HTTP.
- Use
catchErroremnext(req). - Ramifique com base em
HttpErrorResponse.status(por exemplo, redirecione em caso de 401). - Relance para permitir que os componentes reajam; ignore somente quando isso for intencional.
A seguir: novas tentativas e indicadores de carregamento.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Tratamento global de erros” é grátis?
Sim — o texto completo de “Tratamento global de erros” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Tratamento global de erros”?
Capture e transforme erros HTTP de forma centralizada. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Tratamento global de erros”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Interceptadores funcionais
- Adicionando cabeçalhos de autenticação
- Tratamento global de erros
- Novas tentativas e indicadores de carregamento