Angular Academy · Aula

Operadores de tratamento de erros

Recupere-se com catchError e retry.

Operadores de tratamento de erros é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Erros em observables

Quando um observable emite um erro, ele termina: não há mais valores, e o manipulador de erros é executado. Os operadores de erro permitem recuperar, tentar novamente ou transformar erros em vez de interromper o fluxo.

O caminho do erro

Trate os erros no observador ou com operadores. Sem tratamento, um erro não tratado pode interromper a inscrição.

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError intercepta um erro e retorna um observable substituto, permitindo que o fluxo continue de forma controlada.

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

Lançando novamente de forma seletiva

Dentro de catchError, você pode inspecionar o erro e decidir se vai se recuperar ou lançá-lo novamente com throwError.

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

tentar novamente

retry(n) faz uma nova inscrição na fonte até n vezes quando ocorre um erro — útil para falhas de rede temporárias.

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

tentar novamente com configuração

O formato de objeto adiciona um atraso entre as tentativas (e aceita uma função de recuo progressivo), evitando sobrecarregar o servidor.

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

recuo progressivo no estilo retryWhen

Para usar recuo progressivo exponencial, a opção delay pode ser uma função que retorna um observable com atrasos progressivamente maiores a cada tentativa.

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError após tentar novamente

Combine-os: tente novamente após falhas temporárias e, se as tentativas se esgotarem, use uma alternativa de forma controlada.

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

A posição é importante

A posição de catchError no pipeline determina o escopo. Dentro de um switchMap, ele captura erros de cada solicitação interna, mantendo o fluxo externo ativo; no final, captura tudo.

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY como alternativa silenciosa

Retornar EMPTY de catchError conclui o fluxo sem nenhum valor — útil quando você quer suprimir o erro e não emitir nada.

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize para limpeza

finalize executa uma função de retorno quando o fluxo termina por qualquer motivo — conclusão, erro ou cancelamento da inscrição. Combine-o com o tratamento de erros para sempre redefinir o estado de carregamento.

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

Verificação rápida

Teste sua compreensão do tratamento de erros.

Recapitulação: operadores de tratamento de erros

Os erros encerram um fluxo, a menos que sejam tratados.

catchError: recupera retornando um observable substituto.
retry: faz uma nova inscrição após uma falha, com atraso ou recuo progressivo opcional.
A posição (dentro de switchMap ou no final) controla o escopo.

Você concluiu Operadores de RxJS em profundidade.

Perguntas Frequentes

A aula “Operadores de tratamento de erros” é grátis?

Sim — o texto completo de “Operadores de tratamento 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 “Operadores de tratamento de erros”?

Recupere-se com catchError e retry. 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 4 de 4.

Quanto tempo leva a aula “Operadores de tratamento 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

← Voltar para Angular Academy