JavaScript - Gestione di errori ed eccezioni

Esistono tre tipi di errori nella programmazione: (a) errori di sintassi, (b) errori di runtime e (c) errori logici.

Errori di sintassi

Errori di sintassi, chiamati anche parsing errors, si verificano in fase di compilazione nei linguaggi di programmazione tradizionali e in fase di interpretazione in JavaScript.

Ad esempio, la riga seguente causa un errore di sintassi perché manca una parentesi di chiusura.

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

Quando si verifica un errore di sintassi in JavaScript, viene influenzato solo il codice contenuto nello stesso thread dell'errore di sintassi e il resto del codice in altri thread viene eseguito supponendo che nulla in essi dipenda dal codice contenente l'errore.

Errori di runtime

Errori di runtime, chiamati anche exceptions, si verificano durante l'esecuzione (dopo la compilazione / interpretazione).

Ad esempio, la riga seguente causa un errore di runtime perché qui la sintassi è corretta, ma in fase di esecuzione, sta cercando di chiamare un metodo che non esiste.

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

Le eccezioni influiscono anche sul thread in cui si verificano, consentendo ad altri thread JavaScript di continuare la normale esecuzione.

Errori logici

Gli errori logici possono essere il tipo di errore più difficile da rintracciare. Questi errori non sono il risultato di un errore di sintassi o di runtime. Invece, si verificano quando commetti un errore nella logica che guida il tuo script e non ottieni il risultato che ti aspettavi.

Non è possibile rilevare questi errori, perché dipende dai requisiti aziendali che tipo di logica si desidera inserire nel programma.

La prova ... cattura ... finalmente Statement

Le ultime versioni di JavaScript hanno aggiunto funzionalità di gestione delle eccezioni. JavaScript implementa iltry...catch...finally costruire così come il throw operatore per gestire le eccezioni.

Puoi catch generato dal programmatore e runtime eccezioni, ma non puoi catch Errori di sintassi JavaScript.

Ecco il file try...catch...finally sintassi del blocco -

<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>

Il try blocco deve essere seguito esattamente da uno catch blocco o uno finallyblocco (o uno di entrambi). Quando si verifica un'eccezione intry blocco, l'eccezione viene inserita in e e il catchblocco viene eseguito. L'opzionalefinally block viene eseguito incondizionatamente dopo try / catch.

Esempi

Ecco un esempio in cui stiamo cercando di chiamare una funzione inesistente che a sua volta solleva un'eccezione. Vediamo come si comporta senzatry...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>

Produzione

Ora proviamo a catturare questa eccezione usando try...catche visualizzare un messaggio intuitivo. Puoi anche sopprimere questo messaggio, se vuoi nascondere questo errore a un utente.

<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>

Produzione

Puoi usare finallyblocco che verrà sempre eseguito incondizionatamente dopo il try / catch. Ecco un esempio.

<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>

Produzione

La dichiarazione di lancio

Puoi usare throwdichiarazione per sollevare le eccezioni integrate o le eccezioni personalizzate. Successivamente queste eccezioni possono essere acquisite e l'utente può intraprendere un'azione appropriata.

Esempio

L'esempio seguente mostra come utilizzare un file throw dichiarazione.

<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>

Produzione

Puoi sollevare un'eccezione in una funzione utilizzando una stringa, un numero intero, un valore booleano o un oggetto e quindi puoi catturare quell'eccezione nella stessa funzione come abbiamo fatto sopra, o in un'altra funzione usando un try...catch bloccare.

Il metodo onerror ()

Il onerroril gestore di eventi è stata la prima funzionalità a facilitare la gestione degli errori in JavaScript. Ilerror l'evento viene generato sull'oggetto finestra ogni volta che si verifica un'eccezione nella pagina.

<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>

Produzione

Il onerror il gestore di eventi fornisce tre informazioni per identificare la natura esatta dell'errore:

  • Error message - Lo stesso messaggio che il browser visualizzerebbe per l'errore specificato

  • URL - Il file in cui si è verificato l'errore

  • Line number- Il numero di riga nell'URL fornito che ha causato l'errore

Ecco l'esempio per mostrare come estrarre queste informazioni.

Esempio

<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>

Produzione

Puoi visualizzare le informazioni estratte in qualsiasi modo tu ritenga sia migliore.

Puoi usare un file onerror metodo, come mostrato di seguito, per visualizzare un messaggio di errore in caso di problemi nel caricamento di un'immagine.

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

Puoi usare onerror con molti tag HTML per visualizzare messaggi appropriati in caso di errori.