O tratamento de erros é uma daquelas coisas que todo desenvolvedor JavaScript encontra, mas nem todo mundo se aprofunda em dominá-lo. Se você tem confiado em instruções simples try...catch, é hora de elevar seu jogo. Esta postagem o guiará pela jornada desde o tratamento básico de erros até a criação de erros personalizados, tornando seu código mais resiliente e fácil de depurar.

1. O básico: tente...pegue

Vamos começar com o clássico try...catch:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

Isso é simples e eficaz. O bloco try permite executar código que pode gerar um erro, e o bloco catch o captura, permitindo que você o trate normalmente.

No entanto, à medida que seu aplicativo cresce, confiar apenas nisso pode levar a mensagens de erro menos informativas, o que torna a depuração um pesadelo. É aqui que brilha o tratamento de erros personalizado.

2. Compreendendo os tipos de erros nativos

JavaScript vem com tipos de erro integrados, como:

• Erro: O objeto de erro genérico.
• TypeError: lançado quando uma variável não é do tipo esperado.
• SyntaxError: lançado quando o código contém um erro de sintaxe.
• ReferenceError: lançado ao fazer referência a uma variável inexistente.

Exemplo:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

Ao utilizar esses tipos, você pode começar a construir caminhos de tratamento de erros mais descritivos. Mas e se você quiser definir erros específicos para a lógica do seu aplicativo? É aí que entram os erros personalizados.

3. Criação de erros personalizados

Por que erros personalizados?

Erros personalizados ajudam a identificar problemas específicos em seu código, facilitando muito a depuração. Por exemplo, se você estiver criando uma API, talvez queira diferenciar entre ValidationError, AuthenticationError ou DatabaseError.

Como criar erros personalizados

Vamos criar um ValidationError como exemplo:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



Ao estender a classe Error, podemos criar um ValidationError mais significativo. Essa abordagem dá clareza sobre a natureza do problema, tornando a depuração mais fácil e seu código mais limpo.


  
  
  4. Enriquecendo erros personalizados com mais informações


Por que parar apenas com uma mensagem personalizada? Vamos enriquecer nosso erro personalizado com propriedades adicionais como errorCode ou statusCode.



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




Dessa forma, você pode capturar mais contexto sobre o erro, tornando mais fácil agir ou registrar de forma eficaz.


  
  
  5. Construindo uma estratégia global de tratamento de erros


À medida que seu aplicativo é dimensionado, você desejará uma maneira centralizada de lidar com erros. Uma abordagem é criar um utilitário de tratamento de erros que lide com diferentes tipos de erros.



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




Esse tratamento centralizado de erros ajuda a manter seu código DRY (Don't Repeat Yourself) e garante um processamento de erros consistente em todo o seu aplicativo.


  
  
  6. Aproveitando finalmente a limpeza


Muitas vezes, você pode precisar executar tarefas de limpeza, como fechar uma conexão de banco de dados ou limpar tempos limite. É aí que finalmente se torna útil:



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




Usar finalmente garante que este bloco seja executado independentemente de um erro ter sido gerado ou não, tornando-o ideal para operações de limpeza.


  
  
  7. Integração com serviços de log


Para aplicativos de produção, é essencial registrar erros. Serviços como Sentry, LogRocket ou Datadog podem capturar erros com rastreamentos completos de pilha, tornando a solução de problemas muito mais fácil.

Exemplo:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




Essa integração fornece melhor visibilidade dos problemas e ajuda a monitorar a integridade do seu aplicativo em tempo real.


  
  
  Considerações Finais


Ao ir além do básico de try...catch e incorporar erros personalizados, você cria um código JavaScript mais sustentável, legível e robusto. A implementação dessas práticas não apenas facilitará a depuração, mas também melhorará a confiabilidade geral do seu aplicativo.


  
  
  O que vem a seguir?

• Experimente erros personalizados em seu projeto atual.
• Implemente um manipulador de erros centralizado.
• Integre serviços de registro de erros em seu aplicativo.

Deixe-me saber como você lida com erros em seus projetos ou se você tem dicas e truques interessantes para compartilhar!

Gostou desta postagem? Siga-me para mais dicas e truques de JavaScript!