Tratamento erros em JavaScript: 7 padrões essenciais

Tratamento de erros em JavaScript é o processo de identificar, gerenciar e responder a falhas na execução do código. Os 7 padrões principais incluem try/catch, throw, finally, Error personalizado, Promise.catch, async/await com try/catch e Error Boundary (em React). Cada um atende a um cenário específico de execução síncrona ou assíncrona.

1. try/catch

O bloco try/catch é a base do tratamento de erros síncronos. Ele envolve o código que pode falhar e captura a exceção no bloco catch, permitindo uma resposta controlada. Use quando uma operação pode lançar uma exceção, como parsing de JSON ou acesso a propriedades de um objeto indefinido. Um erro não capturado interrompe todo o script, então o try/catch é a primeira linha de defesa.

2. throw

O operador throw permite criar e lançar seus próprios erros. Ele é útil para validar entradas e interromper a execução quando uma condição não é atendida. Por exemplo, ao receber um argumento inválido em uma função, você pode lançar um TypeError com uma mensagem clara. Isso transforma falhas silenciosas em erros explícitos, facilitando a depuração.

3. finally

O bloco finally executa código independentemente de o try ter sucesso ou o catch capturar um erro. Ele é ideal para limpeza de recursos, como fechar conexões ou limpar timers. Um exemplo prático: se você abre um arquivo no try, o finally garante que ele seja fechado mesmo que ocorra uma exceção. Sem isso, o recurso pode vazar e causar problemas de memória.

4. Error personalizado

Criar uma classe que estende Error permite padronizar mensagens e propriedades dos erros. Em vez de um erro genérico, você pode ter ValidationError, DatabaseError ou TimeoutError, cada um com campos específicos. Isso ajuda a identificar a origem do problema em logs e a tomar decisões no catch, como retentar uma operação ou informar o usuário de forma adequada.

5. Promise.catch

Em código assíncrono baseado em Promises, o método .catch() trata rejeições. Ele funciona como o catch do try/catch, mas para operações assíncronas. Use quando encadear .then() e precisar de um ponto único para tratar erros de qualquer etapa da cadeia. Um fetch que falha por rede, por exemplo, cai no .catch() sem derrubar o restante da aplicação.

6. async/await com try/catch

Com async/await, o tratamento de erros volta a usar try/catch, mas agora para código assíncrono. Essa abordagem torna o fluxo mais legível que .then() e .catch(), especialmente em sequências complexas. Um try/catch envolvendo um await captura tanto erros síncronos quanto rejeições da Promise. É o padrão mais recomendado para código moderno.

7. Error Boundary (React)

Em aplicações React, um Error Boundary é um componente de classe que captura erros nos filhos durante a renderização. Ele não substitui o try/catch, mas protege a interface do usuário contra crashes. Use para exibir uma mensagem amigável em vez de uma tela em branco. Vale notar que ele não captura erros em event handlers, que exigem try/catch tradicional.

Como escolher o padrão certo

Para código síncrono e validações, comece com try/catch e throw. Em operações assíncronas, prefira async/await com try/catch; se o projeto usa Promises encadeadas.catch() resolve. Os erros personalizados devem ser usados em bibliotecas ou APIs para dar contexto. O Error Boundary é específico para React e protege a interface. A combinação desses padrões cobre a maioria dos cenários.

FAQ

Qual a diferença entre erro e exceção em JavaScript?

Erro é o objeto que representa uma falha, como TypeError ou ReferenceError. Exceção é o evento que ocorre quando um erro é lançado durante a execução. Na prática, os termos são usados como sinônimos, mas tecnicamente a exceção é o mecanismo de propagação do erro.

Devo usar try/catch em toda função?

Não. O try/catch tem custo de performance e pode esconder bugs se usado em excesso. Use apenas onde há risco real de falha, como em operações de I/O, parsing e chamadas de API. Em funções puras e previsíveis, ele é desnecessário.

Como tratar erros em operações assíncronas?

Use Promise.catch para Promises simples ou try/catch com async/await para código mais legível. Ambos capturam rejeições, mas o async/await facilita a leitura de fluxos complexos. Não use try/catch sem await, pois ele não captura rejeições de Promises.

O que é um Error Boundary no React?

É um componente de classe que implementa os métodos componentDidCatch ou getDerivedStateFromError. Ele captura erros durante a renderização dos componentes filhos e exibe uma UI alternativa. Não captura erros em event handlers, async ou server side.

Como criar erros personalizados em JavaScript?

Crie uma classe que estende Error, defina o construtor chamando super() e ajuste o prototype. Você pode adicionar propriedades extras, como código de status ou detalhes. Isso permite identificar o tipo de erro no catch e responder de forma específica.