JavaScript - tratamento de erros e exceções

Existem três tipos de erros na programação: (a) Erros de sintaxe, (b) Erros de tempo de execução e (c) Erros lógicos.

Erros de sintaxe

Erros de sintaxe, também chamados de parsing errors, ocorrem em tempo de compilação em linguagens de programação tradicionais e em tempo de interpretação em JavaScript.

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

<script type = "text/javascript">
   <!--
      window.print(;
   //-->
</script>

Quando ocorre um erro de sintaxe em JavaScript, apenas o código contido no mesmo encadeamento que o erro de sintaxe é afetado e o restante do código em outros encadeamentos é executado, assumindo que nada neles depende do código que contém o erro.

Erros de tempo de execução

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

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

<script type = "text/javascript">
   <!--
      window.printme();
   //-->
</script>

As exceções também afetam o encadeamento em que ocorrem, permitindo que outros encadeamentos JavaScript continuem a execução normal.

Erros Lógicos

Os erros lógicos podem ser o tipo de erro mais difícil de rastrear. Esses erros não são o resultado de um erro de sintaxe ou de tempo de execução. Em vez disso, eles ocorrem quando você comete um erro na lógica que orienta seu script e não obtém o resultado esperado.

Você não pode detectar esses erros, porque depende de seus requisitos de negócios que tipo de lógica você deseja colocar em seu programa.

A tentativa ... pegar ... finalmente Declaração

As versões mais recentes do JavaScript adicionaram recursos de tratamento de exceções. JavaScript implementa otry...catch...finally construir, bem como o throw operador para lidar com exceções.

Você pode catch gerado pelo programador e runtime exceções, mas você não pode catch Erros de sintaxe de JavaScript.

Aqui está o try...catch...finally sintaxe de bloco -

<script type = "text/javascript">
   <!--
      try {
         // Code to run
         [break;]
      } 
      
      catch ( e ) {
         // Code to run if an exception occurs
         [break;]
      }
      
      [ finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }]
   //-->
</script>

o try bloco deve ser seguido por exatamente um catch bloco ou um finallybloco (ou um de ambos). Quando ocorre uma exceção notry bloco, a exceção é colocada em e e a catchbloco é executado. O opcionalfinally bloco é executado incondicionalmente após try / catch.

Exemplos

Aqui está um exemplo em que estamos tentando chamar uma função não existente que, por sua vez, está gerando uma exceção. Vamos ver como ele se comporta semtry...catch-

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>      
   </body>
</html>

Resultado

Agora, vamos tentar capturar essa exceção usando try...catche exibir uma mensagem amigável. Você também pode suprimir esta mensagem, se desejar ocultar este erro de um usuário.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               } 
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Resultado

Você pode usar finallybloco que sempre será executado incondicionalmente após o try / catch. Aqui está um exemplo.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Resultado

A declaração de lançamento

Você pode usar throwdeclaração para aumentar suas exceções embutidas ou suas exceções personalizadas. Posteriormente, essas exceções podem ser capturadas e você pode executar uma ação apropriada.

Exemplo

O exemplo a seguir demonstra como usar um throw declaração.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;
               
               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." ); 
                  } else {
                     var c = a / b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Resultado

Você pode gerar uma exceção em uma função usando uma string, inteiro, booleano ou um objeto e, em seguida, pode capturar essa exceção na mesma função que fizemos acima ou em outra função usando um try...catch quadra.

Método onerror ()

o onerroro manipulador de eventos foi o primeiro recurso a facilitar o tratamento de erros em JavaScript. oerror O evento é disparado no objeto janela sempre que ocorre uma exceção na página.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Resultado

o onerror o manipulador de eventos fornece três informações para identificar a natureza exata do erro -

  • Error message - A mesma mensagem que o navegador exibiria para o erro fornecido

  • URL - O arquivo em que ocorreu o erro

  • Line number- O número da linha no URL fornecido que causou o erro

Aqui está o exemplo para mostrar como extrair essas informações.

Exemplo

<html>
   <head>
   
      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Resultado

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

Você pode usar um onerror método, conforme mostrado abaixo, para exibir uma mensagem de erro no caso de haver algum problema no carregamento de uma imagem.

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

Você pode usar onerror com muitas tags HTML para exibir mensagens apropriadas em caso de erros.