Учебники

JavaScript — обработка ошибок и исключений

Существует три типа ошибок в программировании: (a) синтаксические ошибки, (b) ошибки времени выполнения и (c) логические ошибки.

Синтаксические ошибки

Синтаксические ошибки, также называемые ошибками синтаксического анализа, возникают во время компиляции в традиционных языках программирования и во время интерпретации в JavaScript.

Например, следующая строка вызывает синтаксическую ошибку, поскольку в ней отсутствует закрывающая скобка.

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

Когда в JavaScript возникает синтаксическая ошибка, затрагивается только код, содержащийся в том же потоке, что и синтаксическая ошибка, а остальная часть кода в других потоках выполняется, если в них ничего не зависит от кода, содержащего ошибку.

Ошибки во время выполнения

Ошибки во время выполнения, также называемые исключениями, возникают во время выполнения (после компиляции / интерпретации).

Например, следующая строка вызывает ошибку во время выполнения, потому что здесь синтаксис правильный, но во время выполнения он пытается вызвать метод, который не существует.

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

Исключения также влияют на поток, в котором они возникают, что позволяет другим потокам JavaScript продолжать нормальное выполнение.

Логические ошибки

Логические ошибки могут быть наиболее сложным типом ошибок для отслеживания. Эти ошибки не являются результатом синтаксиса или ошибки времени выполнения. Вместо этого они возникают, когда вы совершаете ошибку в логике, управляющей вашим сценарием, и вы не получаете ожидаемого результата.

Вы не можете поймать эти ошибки, потому что это зависит от требований вашего бизнеса, какую логику вы хотите использовать в своей программе.

Попробуй … поймай … наконец-то

В последних версиях JavaScript добавлены возможности обработки исключений. JavaScript реализует конструкцию try … catch … finally, а также оператор throw для обработки исключений.

Вы можете отлавливать сгенерированные программистом и исключения времени выполнения , но не можете отловить ошибки синтаксиса JavaScript.

Вот попытка … поймать … наконец, синтаксис блока —

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

За блоком try должен следовать либо один блок catch, либо один блок finally (или один из обоих). Когда в блоке try возникает исключение, оно помещается в e и выполняется блок catch . Необязательный блок finally выполняется безоговорочно после try / catch.

Примеры

Вот пример, где мы пытаемся вызвать несуществующую функцию, которая, в свою очередь, вызывает исключение. Давайте посмотрим, как оно ведет себя без попытки … поймать

Live Demo

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

Выход

Теперь давайте попробуем перехватить это исключение с помощью try … catch и отобразить удобное для пользователя сообщение. Вы также можете отключить это сообщение, если хотите скрыть эту ошибку от пользователя.

Live Demo

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

Выход

Вы можете использовать блок finally, который всегда будет выполняться безоговорочно после try / catch. Вот пример.

Live Demo

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

Выход

Заявление броска

Вы можете использовать оператор throw, чтобы вызвать ваши встроенные исключения или ваши собственные исключения. Позже эти исключения могут быть зафиксированы, и вы можете предпринять соответствующие действия.

пример

В следующем примере показано, как использовать оператор throw .

Live Demo

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

Выход

Вы можете вызвать исключение в одной функции, используя строку, целое число, логическое значение или объект, и затем вы можете захватить это исключение либо в той же функции, что мы делали выше, либо в другой функции, используя блок try … catch .

Метод onerror ()

Обработчик события onerror был первой функцией, облегчающей обработку ошибок в JavaScript. Событие ошибки вызывается в объекте окна всякий раз, когда на странице возникает исключение.

Live Demo

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

Выход

Обработчик события onerror предоставляет три фрагмента информации для определения точного характера ошибки:

  • Сообщение об ошибке — то же сообщение, которое браузер будет отображать для данной ошибки

  • URL — файл, в котором произошла ошибка

  • Номер строки — номер строки в указанном URL, вызвавший ошибку

Сообщение об ошибке — то же сообщение, которое браузер будет отображать для данной ошибки

URL — файл, в котором произошла ошибка

Номер строки — номер строки в указанном URL, вызвавший ошибку

Вот пример, чтобы показать, как извлечь эту информацию.

пример

Live Demo

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

Выход

Вы можете отобразить извлеченную информацию любым способом, который, по вашему мнению, будет лучше.

Вы можете использовать метод onerror , как показано ниже, для отображения сообщения об ошибке в случае возникновения проблем при загрузке изображения.

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

Вы можете использовать onerror со многими тегами HTML для отображения соответствующих сообщений в случае ошибок.