Try Catch no JavaScript: Programação Defensiva na Prática

Aprenda como usar try catch no JavaScript para tornar seu código mais robusto e evitar erros inesperados.

Introdução

Você já imaginou seu código quebrando no meio da execução e deixando o usuário preso à tela de carregamento?

Com try catch no JavaScript você pode evitar isso. Ao adotar programação defensiva, você prepara seu código para lidar com imprevistos e falhas — o que torna seus projetos mais confiáveis e fáceis de manter.

Neste artigo você vai aprender o que é try catch, como aplicar direitinho, quando usar, e ver exemplos práticos usando uma tabela de pilotos da Fórmula 1.

Ao final, vai estar pronto para aplicar essa estrutura em seus próprios projetos e evitar bugs desagradáveis.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é try catch e por que usar

Entendendo a estrutura

O JavaScript oferece a estrutura try/catch (com o uso opcional do finally) para lidar com erros que podem ocorrer durante a execução do código, como indicado na própria documentação oficial.

Essa estrutura permite que você tente executar um bloco de código e, caso algo dê errado, capture esse erro e trate da forma mais adequada, evitando que a aplicação quebre de forma inesperada.

A sintaxe básica é:

try {
  // código que pode dar problema
} catch (erro) {
  // o que fazer se der erro
} finally {
  // (opcional) código que executa sempre, erro ou não
}

O bloco try contém o código que você espera que funcione corretamente.

Se algo der errado — como um erro de execução, um dado inesperado ou uma falha de rede — o JavaScript interrompe o que estava sendo executado e transfere esse erro para o bloco catch. É ali que você pode tratar o problema, registrar logs, exibir uma mensagem ao usuário ou aplicar uma solução alternativa.

O bloco finally, quando utilizado, é executado sempre, independentemente de ter ocorrido erro ou não. Ele é muito útil para ações de limpeza, como liberar conexões, encerrar processos ou ocultar loaders e spinners de carregamento.

Quando try catch pode falhar

É importante entender que o try catch só atua sobre erros que acontecem em tempo de execução. Ou seja, quando o código já está sintaticamente correto.

Se houver erro de sintaxe, como uma chave faltando ou um comando escrito de forma incorreta, o JavaScript nem chega a rodar aquele trecho, e o try catch não tem como intervir.

Outro ponto de atenção está no código assíncrono. Se você utilizar try catch fora de funções async/await ou em promessas mal estruturadas, ele pode não capturar o erro corretamente. Por isso, é essencial combinar essa estrutura com uma arquitetura adequada do código.

Programação Defensiva

A programação defensiva tem como objetivo antecipar e evitar problemas antes que eles impactem o funcionamento da aplicação.

Em vez de assumir que tudo sempre dará certo, você passa a escrever código já pensando nos possíveis cenários de falha, tratando esses casos de forma consciente e controlada.

Nesse contexto, estruturas como o try catch são fundamentais, pois permitem capturar, identificar e lidar com erros que podem surgir durante a execução do código. O resultado é um sistema mais estável, previsível e confiável, tanto para quem desenvolve quanto para quem utiliza a aplicação.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Apresentação do Projeto - Try Catch na Prática

Para entender de forma real como o try catch no JavaScript funciona, vamos utilizar como base um projeto prático: uma tabela de classificação dos pilotos da Fórmula 1 de 2023.

Nesse projeto, o front-end realiza uma requisição para uma API utilizando a biblioteca Axios e, a partir da resposta, preenche dinamicamente uma tabela HTML com as informações dos pilotos, como nome, equipe e pontuação.

Você pode acompanhar o passo a passo de construção desse projeto completo aqui no blog ou fazer o download do material disponível para utilizá-lo como base nos seus testes.

Exemplo prático — Tabela de pilotos sem try catch

Antes de aplicar a programação defensiva, o código responsável por popular a tabela se parece com isso:

async function popularTabelaComDadosLista(idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);
  const listaDeDadosPilotos = (
    await axios.get('http://localhost:3000/api/v1/drivers')
  ).data;

  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr class='${
      numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
    }'>
      <td class="text-center py-4">${numeroElemento + 1}</td>
      <td class="text-center py-4">${dadosPiloto.name}</td>
      <td class="text-center py-4">${dadosPiloto.team}</td>
      <td class="text-center py-4">${dadosPiloto.points}</td>
    </tr>`;
    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

popularTabelaComDadosLista('corpo-tabela');

Vamos entender exatamente o que está acontecendo aqui:

• A função popularTabelaComDadosLista recebe como parâmetro o ID da tabela HTML onde os dados serão inseridos.
• document.getElementById(idCorpoTabela) busca esse elemento no DOM.
• Em seguida, é feita uma requisição para a API usando axios.get(), que retorna uma lista de pilotos.
• O .data extrai apenas os dados úteis da resposta.
• O método forEach percorre cada piloto e cria uma nova linha (<tr>) com suas informações.
• Cada linha é então adicionada ao HTML da tabela.

O problema aqui é que esse código assume que tudo vai dar certo: a API vai responder, os dados estarão corretos, o elemento HTML existe etc. Mas na prática não é sempre assim. Se a API falhar, ou retornar algo inesperado — ou se o idCorpoTabela estiver errado — o código quebra.

Tornando o código seguro com try catch

Agora entra o papel do try catch no JavaScript para deixar o código mais seguro e preparado para falhas reais. Veja como fica a aplicação dessa estrutura no nosso exemplo:

async function popularTabelaComDadosLista(idCorpoTabela) {
  try {
    const corpoTabela = document.getElementById(idCorpoTabela);
    const listaDeDadosPilotos = (await axios.get('http://localhost:3000/api/v1/drivers')).data;
    listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
      const novaLinhaTabela = `<tr class='${
        numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
      }'>
        <td class="text-center py-4">${numeroElemento + 1}</td>
        <td class="text-center py-4">${dadosPiloto.name}</td>
        <td class="text-center py-4">${dadosPiloto.team}</td>
        <td class="text-center py-4">${dadosPiloto.points}</td>
      </tr>`;
      corpoTabela.innerHTML += novaLinhaTabela;
    });
  } catch (erro) {
    console.log(erro);
  } finally {
    console.log('Função acabou de ser executada');
  }
}

popularTabelaComDadosLista('corpo-tabela');

Com essa alteração, se algo der errado — como API fora do ar, elemento não encontrado ou dados inválidos — o bloco catch captura o erro e impede que o script quebre no meio da execução.

Isso permite lidar com o problema de forma controlada, seja registrando o erro no console, exibindo uma mensagem ao usuário ou aplicando uma solução alternativa.

Dentro do bloco try está todo o trecho mais sensível do código, onde podem ocorrer falhas, como a requisição para a API, a manipulação do DOM e a iteração sobre os dados retornados.

Caso qualquer erro aconteça nesse processo, o JavaScript interrompe a execução e transfere automaticamente esse erro para o catch, facilitando a identificação da causa, como falhas de conexão, respostas incorretas da API, problemas na estrutura dos dados ou elementos HTML inexistentes.

O bloco finally é executado em qualquer cenário, com erro ou sem erro. No exemplo, ele apenas exibe uma mensagem no console, mas na prática pode ser usado para remover loaders, encerrar processos, registrar logs ou garantir a limpeza do estado da aplicação.

Com isso, o código se torna mais previsível, confiável e profissional, reduzindo quebras inesperadas e proporcionando uma experiência mais estável para quem utiliza a aplicação.

O que esse exemplo ensina, na prática

Esse projeto deixa claro que o try catch no JavaScript não é apenas uma proteção técnica, mas uma forma de tornar o código mais previsível, confiável e profissional.

Você passa a:

• Antecipar problemas reais
• Evitar que a aplicação quebre de forma silenciosa
• Facilitar a identificação de erros
• Criar experiências melhores para o usuário

Isso é programação defensiva na prática: não confiar cegamente, mas preparar seu código para o inesperado.

Boas práticas ao usar try catch

Usar try catch no JavaScript é importante — mas não basta jogar em todo lugar. Algumas boas práticas ajudam a manter o código limpo e eficaz.

1. Envolva apenas o que pode falhar. O bloco try deve ser o menor possível. Evite colocar todo o corpo da função se apenas uma parte pode gerar erro. Isso ajuda a não mascarar erros inesperados.
2. Não silencie erros sem tratamento. Não basta capturar — você deve lidar com o erro: logar, mostrar mensagem, tentar alternativa, ou re-lançar se for algo crítico.
3. Prefira checar condições antes de executar, quando possível — usar if, validações — ao invés de depender de exceções para fluxos normais. Usar try catch como controle de fluxo não é ideal.
4. Em código assíncrono com async/await, sempre combine com try catch. Isso evita promessas rejeitadas não tratadas.
5. Se usar recursos externos (arquivos, conexões, timers, etc.), use finally para garantir que você limpe recursos — independente de erro ou sucesso.

Quando não usar try catch — e as limitações

Apesar de poderoso, try catch não resolve tudo. Primeiro: falhas de sintaxe não serão capturadas — o código nem roda.

Também é inadequado usar try catch como substituto de lógica condicional. Por exemplo, se você espera que um dado possa estar vazio, é melhor usar uma verificação com if do que deixar que o código quebre e captar a exceção.

E cuidado com blocos gigantes de try: se algo der errado, fica difícil saber exatamente onde. É melhor limitar o escopo do try ao mínimo necessário.

Como aplicar no seu dia a dia — Programação Defensiva com consciência

Para aplicar esse conceito no cotidiano de desenvolvimento, adote essa mentalidade: nunca assuma que tudo vai dar certo. Sempre pense: “o que pode dar errado aqui?” e trate esse caso.

• Em requisições externas (APIs, fetch, axios, banco, etc.), envolva com try catch.
• Em operações DOM (seleção de elementos, manipulação), valide antes de usar ou trate se falhar.
• Use o bloco finally para garantir limpeza ou encerramento de processos — logout, spinner, liberações.
• Não use try catch para fluxos normais de lógica — reserve apenas para exceções inesperadas.
• Sempre forneça feedback: log claro, mensagem ao usuário, fallback. Isso ajuda a manter o código confiável e mais fácil de debugar.

Conclusão

Aplicar try catch no JavaScript é um pilar essencial da programação defensiva. Com ele, você torna seu código mais forte: preparado para falhas, mais confiável, mais fácil de manter.

Ao envolver trechos de risco com try catch, você protege seu app de quebras inesperadas, captura e trata erros, e garante limpeza no final com finally.

Aplique essa estrutura com consciência, combine com boas práticas, e seu código vai agradecer — e seus usuários também.

Se você quiser, pode se aprofundar nos conceitos de erros personalizados e tratamento de exceções avançado. Para isso, descubra mais no nosso curso sobre JavaScript.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ - Perguntas Frequentes sobre Try Catch no JavaScript