js3

Nesse artigo serão abordadas as boas práticas para tratar erros quando programamos em JavaScript.

Existem três tipos de erros na programação:

  • Erros de sintaxe;
  • Erros de tempo de execução;
  • Erros lógicos.

Erros de sintaxe

Os erros de sintaxe, também chamados de erros de análise, ocorrem em tempo de compilação em linguagens de programação tradicionais e no tempo de interpretação no JavaScript. Acontecem porque pode ocorrer de digitarmos errado algo, esquecermos parênteses ou chaves, etc.

Por exemplo, a seguinte linha causa um erro de sintaxe porque está faltando um parêntese de fechamento.

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
  window.print(; // Falta um parêntese

//-->
</script>

</body>
</html>

Quando um erro de sintaxe ocorre em JavaScript, somente o código contido dentro do mesmo segmento como o erro de sintaxe é afetado e o resto do código em outros segmentos é executado não assumindo nada que dependa do código que contém o erro.

Erros de tempo de execução

Erros de execução, também chamados de exceções, ocorrem durante a execução (após a compilação/interpretação).

Por exemplo, a seguinte linha ocasiona um erro de execução, porque aqui a sintaxe está correta, mas em tempo de execução, ele está tentando chamar um método que não existe.

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
  window.printme(); // A função printme não existe

//-->
</script>

</body>
</html>

Erros lógicos

Os erros lógicos podem ser o tipo de erros mais difícil de rastrear. Esses erros não são o resultado de um erro de sintaxe ou de tempo de execução. Eles ocorrem quando você comete um erro na lógica fazendo com que seu script não obtenham o resultado esperado.

As funções try, catch e finally

As últimas versões do JavaScript trouxeram capacidades de manipulação de exceção. O JavaScript implementa os construtores try, catch e finally, bem como o operador throw para lidar com exceções.

Você pode capturar exceções geradas e em tempo de execução, porém você não pode pegar erros de sintaxe de JavaScript.

Exemplo de um bloco try, catch, finally:

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
try {
    // código que pode provocar erro vai aqui
}
catch (e) {
    //Se houver erro este bloco será executado,
    //capturando o erro encontrado. 
}
finally {
    //Código que é sempre executado independentemente
    //de ocorrer uma exceção. 
}

//-->
</script>

</body>
</html>

O bloco try deve ser seguido sempre por um bloco catch ou um bloco finally, ou ambos. Quando ocorre uma exceção no bloco try, a exceção é colocada na variável e e o bloco catch é executado. O bloco opcional finally é executado incondicionalmente após  os blocos try/catch.

Exemplos

Aqui está um exemplo onde nós estamos tentando chamar uma função que não existe e  que por sua vez provoca uma exceção. Nesse exemplo não vamos utilizar o try e o catch:

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
  processar(); // a função não existe

//-->
</script>

</body>
</html>

Agora vamos tentar capturar essa exceção usando try/catch e exibir uma mensagem para o usuário. Você também pode suprimir esta mensagem, se você não quer que o usuário saiba que ocorreu um erro.

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
try {
     // Ocasionará erro. Função não existe
    processar();
}
catch (e) {
    //Você pode suprimir essa mensagem
    //para que o usuário não saiba do erro 
    window.alert("Houve um erro de execução.");
}

//-->
</script>

</body>
</html>

Você pode usar o bloco finally que sempre será executado incondicionalmente após o try/catch. Como nesse exemplo:

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
try {
    // código que pode provocar erro vai aqui
    processar();
}
catch (e) {
    //O erro é capturado e é exibida a mensagem abaixo.
    //Você pode suprimir essa mensagem
    //para que o usuário não saiba do erro, caso queira. 
    window.alert("Houve um erro de execução.");
}
finally {
    //O que for colocado aqui sempre será executado
    window.alert("Processo concluído!");    
}

//-->
</script>

</body>
</html>

A instrução throw

Você pode usar a instrução throw para causar suas exceções  ou suas exceções personalizadas. Depois essas exceções podem ser capturadas e você pode tomar uma ação apropriada para elas.

O exemplo a seguir demonstra como usar uma instrução throw em um procedimento que checa se o email digitado é válido:

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  
function MailFormatadoException(mail){
    this.email = mail;
    this.mensagem = "E-mail inválido! Favor verificar.";
    this.toString = function(){
      return this.email + " " + this.mensagem;
    };
  }

  function validarEMail(email){
    if(email.indexOf("@") > -1){
      return true;
    }
    else{
      throw new MailFormatadoException(email);
    }
  }

  try{
    var mail = "netcoders.necoders.com";
    var valido = validarEMail(mail);
    if(valido){
      window.alert("Endereço de e-mail correto.");
    }
  }
  catch(e){
    window.alert(e);
  }
//-->
</script>

</body>
</html>

Você pode gerar uma exceção em uma função usando uma string, um inteiro, com booleano, ou um objeto e, em seguida, você pode capturar essa exceção seja na mesma função, como fizemos anteriormente, ou em outra função usando um bloco try/catch.

O método onerror

O manipulador de eventos onerror foi o primeiro recurso a facilitar a manipulação de erros no JavaScript. O evento de erro é acionado no objeto janela sempre que ocorre uma exceção na página.

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--
  window.onerror = notificar;

  // esta linha ocasionará um erro
  window.alert(baixar()); // função baixar não existe

  function notificar(){
    window.alert("Houve um erro.");
  }

//-->
</script>

</body>
</html>

O manipulador de eventos onerror oferece três trechos de informação para identificar a natureza exata do erro:

  • Mensagem de erro – A mesma mensagem que o navegador exibirá o erro ocorrido
  • URL – O arquivo no qual o erro ocorreu
  • Número da Linha –  O número da linha na URL informada que causou o erro

Exemplo de como extrair essas informações:

<html>
<head>
<title>JavaScript: Tratamento de erros - .NET Coders</title>
</head>
<body>

<script language="javascript">
<!--

  window.onerror = NomeDaFunção (msg, url, line){
     Alert("Mensagem: " + msg);
     alert("Endereço: " + url);
     alert("Número da Linha: " + line)
 }

//-->
</script>

</body>
</html>

Você pode exibir as informações extraídas da maneira que você achar melhor.

O método onerror é muito interessante e útil, afinal pode auxiliar bastante a vida de quem está desenvolvendo, já que facilita a descoberta de algum erro que esteja acontecendo.

Você pode usar o onerror com muitas tags HTML para apresentar mensagens adequadas em caso de erros diversos. É um ótimo recurso realmente.

Tratar erros é de suma importância e deixam as aplicações bem mais robustas e profissionais.

Bom, espero que tenha sido útil, pessoal!

Um forte abraço e até a próxima!

Desenvolvedor; IT Pro; Designer Gráfico; Organizador de eventos e palestrantes do grupo .NET Coders.

Entusiasta da plataforma Windows, apaixonado por tecnologia e inovações desde os sete anos, quando descobriu o mundo da programação através de um jogo feito em linguagem BASIC e um TK-90X.

Trabalha com dados variáveis, criando soluções impressas e digitais para o ramo nacional de seguros há quinze anos, empregando linguagens de impressão PCL/PostScript conciliadas com C# e Visual Basic.

Facebook Twitter LinkedIn 

Comentários

comentarios