W3docs

Tratamento de Erros JavaScript com try…catch

Aprenda tratamento de erros em JavaScript com try, catch, finally e throw. Aborda o objeto Error, tipos integrados, captura opcional, relançamento e limitações assíncronas.

Dominando o Tratamento de Erros em JavaScript com Try...Catch

Lidar com erros de forma eficaz é fundamental para construir aplicações robustas em JavaScript. Quando algo dá errado em tempo de execução — uma chamada de rede falha, um JSON está malformado, uma variável é undefined — o JavaScript lança uma exceção. Sem tratamento, essa exceção interrompe seu script. Este artigo aborda a instrução try...catch, a cláusula finally, o operador throw, o objeto Error e seus subtipos integrados, o relançamento de erros e a limitação importante de que o try...catch síncrono não consegue capturar erros lançados dentro de callbacks assíncronos.

Entendendo o Try...Catch em JavaScript

A instrução try...catch é uma ferramenta para gerenciar exceções — erros que ocorrem durante a execução do programa. Ela permite que você trate essas exceções de forma elegante, em vez de deixá-las travar o script inteiro.

O mecanismo possui dois blocos:

  • try — o código que pode lançar uma exceção. O JavaScript o executa normalmente.
  • catch (error) — executado somente se algo no bloco try lançar uma exceção. O valor lançado é passado como error.

Se nenhum erro ocorrer, o bloco catch é ignorado completamente. Se um erro ocorrer, a execução salta imediatamente para o catch — o restante do bloco try não é executado.

Sintaxe Básica do Try...Catch

Aqui está um exemplo simples para demonstrar a estrutura básica do try...catch:


javascript— editable

Neste exemplo, qualquer erro que ocorra dentro do bloco try é capturado pelo bloco catch, onde pode ser tratado sem causar a interrupção do script.

Lançando Seus Próprios Erros com throw

O operador throw gera uma exceção. Você pode lançar qualquer valor, mas a convenção — e a única coisa que você deve fazer na prática — é lançar um objeto Error (ou uma instância de um de seus subtipos). Fazer isso fornece automaticamente uma message útil e um rastreamento de stack.

javascript— editable

Evite throw 'uma string' ou throw 42. Uma string lançada não possui message, name nem stack, portanto, os chamadores que esperam um objeto Error (como a maioria do código faz) se comportarão incorretamente. Para erros de domínio específico com campos extras, defina sua própria classe — consulte erros personalizados, estendendo Error.

O Objeto Error

Quando você usa new Error(message), obtém um objeto com três propriedades comumente usadas:

  • name — o tipo do erro, por exemplo, "Error", "TypeError", "SyntaxError".
  • message — a descrição legível por humanos que você passou ao construtor.
  • stack — uma string com a pilha de chamadas no momento em que o erro foi criado (não padronizado, mas suportado por todos os principais motores; ótimo para depuração, não para fluxo de controle).
javascript— editable

Tipos de Error Integrados

O JavaScript inclui várias subclasses de Error que o motor lança automaticamente. Conhecê-las ajuda a escrever uma lógica de catch precisa:

TipoLançado quando
SyntaxErrorO código ou dado está malformado, por exemplo, JSON.parse() em JSON inválido.
TypeErrorUm valor não é do tipo esperado, por exemplo, chamar uma não-função ou ler uma propriedade de undefined.
ReferenceErrorUma variável que não existe é referenciada.
RangeErrorUm valor está fora do seu intervalo permitido, por exemplo, um comprimento de array inválido.
URIErrordecodeURIComponent() ou similar recebe um URI malformado.
EvalErrorHistórico; raramente lançado por motores modernos.

Cada um deles tem name definido como seu tipo, então você pode ramificar usando instanceof:

javascript— editable

Tratando Erros Específicos

Você também pode tratar tipos específicos de erros examinando o objeto de erro:


javascript— editable

Este exemplo trata especificamente o SyntaxError que pode ocorrer durante a análise de JSON. Se o erro capturado for uma instância de SyntaxError, ele é tratado registrando uma mensagem específica. Caso contrário, o erro é relançado, podendo ser capturado por um tratador de erros de nível superior ou interromper o programa, indicando um cenário de erro não tratado.

Relançando Erros

Um bloco catch captura todos os erros em seu try, incluindo os que você não sabe como tratar. O padrão recomendado é: inspecionar o erro, tratar os casos que você entende e relançar todo o resto para que se propague até um tratador externo. Engolir erros desconhecidos silenciosamente oculta bugs reais.

javascript— editable

Captura Opcional de Binding

Se você não precisar do valor do erro, pode omitir o binding completamente (ES2019+). Isso é útil quando o simples fato de que algo falhou é tudo que importa:

javascript— editable

Usando Finally

A cláusula finally é executada após os blocos try e catch, independentemente de uma exceção ter sido lançada ou capturada. É útil para liberar recursos ou realizar tarefas de limpeza, independentemente do resultado do try...catch:


javascript— editable

Isso garante que a mensagem "Finally block executed" seja registrada independentemente de um erro ocorrer ou não, demonstrando como finally pode ser usado para executar ações de limpeza necessárias.

Exemplos Reais de Requisições API

Usar a API JSONPlaceholder é uma excelente maneira de praticar o tratamento de dados do mundo real em JavaScript, especialmente ao trabalhar com requisições assíncronas e tratar erros potenciais que podem surgir durante essas operações. Aqui estão alguns exemplos do mundo real usando a API JSONPlaceholder, que oferece dados REST online fictícios com os quais você pode experimentar para testes e prototipagem.

Exemplo 1: Buscando Posts e Tratando Erros

Neste exemplo, buscamos posts da API JSONPlaceholder usando fetch e tratamos possíveis erros de rede ou problemas com a resposta da API:


javascript— editable

Este script faz uma requisição HTTP para recuperar um único item de tarefa. Ele verifica se a resposta é bem-sucedida (ou seja, status HTTP 200-299). Caso contrário, lança um erro com o status da resposta. Todos os erros, seja de problemas de rede ou da instrução throw, são capturados no bloco catch e registrados. O bloco finally é executado independentemente do resultado, garantindo que qualquer limpeza necessária ou operação final seja realizada.

Exemplo 2: Enviando Dados e Tratando Exceções

Aqui, demonstramos como enviar dados ao servidor usando o método POST e tratar exceções adequadamente:


javascript— editable

Neste script, estamos enviando um novo post ao servidor. A função fetch é usada com o método POST, incluindo cabeçalhos e um corpo JSON serializado. Se a resposta do servidor indicar uma falha (status HTTP não-2xx), um erro é lançado, que então é capturado e tratado no bloco catch. Independentemente do sucesso ou falha, o bloco finally garante que a operação seja marcada como concluída.

Exemplo 3: Causando e Tratando um Erro Deliberadamente

Este exemplo solicita intencionalmente um ID de usuário que não existe na API JSONPlaceholder, acionando um erro 404 Not Found, que iremos capturar e tratar.


javascript— editable

Como Este Exemplo Funciona

  1. Endpoint de API Inválido: A função fetch é chamada com uma URL que inclui um ID de usuário inválido (99999). Como o JSONPlaceholder tipicamente não tem um usuário nesse índice, a API retornará um erro 404.
  2. Verificar Validade da Resposta: O código verifica se o status da resposta não está no intervalo bem-sucedido (200-299). Como o ID do usuário é inválido, a resposta da API provavelmente será 404, acionando nosso tratamento de erros na verificação if (!response.ok).
  3. Lançamento de Erro: Como a resposta não é OK, um erro é lançado com a mensagem incluindo o status HTTP, que neste caso indicará um erro 404 Not Found.
  4. Bloco Catch: O bloco catch captura o erro lançado e registra uma mensagem específica usando console.log. Isso fornece um feedback claro sobre o que deu errado.
  5. Bloco Finally: Este bloco é usado para limpeza ou instruções finais, indicando a conclusão da tentativa, independentemente do resultado.

Por Que o Try...Catch Não Consegue Capturar Erros em Callbacks Assíncronos

Esta é a armadilha mais comum com try...catch. A instrução é síncrona: ela só captura erros lançados enquanto o bloco try está sendo executado atualmente. Quando você agenda um callback com setTimeout, um listener de evento ou uma promise não aguardada, o callback é executado mais tarde — após o try...catch já ter terminado e a pilha de chamadas estar vazia. Nesse momento, não há nenhum try ao redor para capturar nada.

javascript— editable

Para tratar o erro, o try...catch deve estar dentro do callback, onde o erro é realmente lançado:

javascript— editable

A mesma regra explica por que try...catch funciona com async/await, mas não com promises simples. await pausa a função e a retoma no mesmo fluxo lógico, então uma promise rejeitada surge como um erro lançado que seu try pode capturar. Uma promise que você não aguarda com await é resolvida de forma independente e ignora o try ao redor — você deve usar .catch() em vez disso.

javascript— editable

Para uma cobertura mais aprofundada do tratamento de erros assíncronos, consulte Tratamento de erros com promises e async/await.

Conclusão

O tratamento eficaz de erros em JavaScript é fundamental para desenvolver aplicações de alta qualidade e resilientes. Usar try...catch permite tratar erros síncronos e rejeições aguardadas com await de forma elegante, mantendo o controle sobre o fluxo da aplicação. Lance objetos Error (nunca strings simples), ramifique em tipos integrados como TypeError e SyntaxError, relance o que você não consegue tratar e lembre-se da limitação assíncrona: erros em callbacks e promises não aguardadas precisam de seu próprio tratamento.

Tópicos Relacionados

Prática

Prática
Qual é o objetivo da instrução try/catch em JavaScript?
Qual é o objetivo da instrução try/catch em JavaScript?
Was this page helpful?