Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error).

Syntax Error

Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch trong các ngôn ngữ chương trình truyền thống và tại thời gian phiên dịch trong JavaScript.

Ví dụ, dòng sau gây ra một lỗi cú pháp bởi vì nó thiếu dấu ngoặc đơn đóng.

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

Khi một lỗi cú pháp xảy ra trong JavaScript, chỉ code chứa trong cùng thread đó bị ảnh hưởng và phần còn lại của code trong thread khác vẫn thực thi khi giả sử không phụ thuộc vào code chứa lỗi.

Runtime Error

Runtime Error, cũng được gọi là Exceptions, xảy ra trong suốt thời gian thực thi (sau khi biên dịch/phiên dịch).

Ví dụ, dòng sau tạo một Runtime Error bởi vì ở đây cú pháp là đúng, nhưng trong khi chạy, nó cố gắng gọi một phương thức mà không tồn tại.

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

Runtime Error cũng ảnh hưởng tới thread trong đó chúng xảy ra, cho phép thread khác trong JavaScript tiếp tục thực thi bình thường.

Logical Error

Các Logical Error là kiểu lỗi khó để có thể tìm dấu vết. Những lỗi này không phải là kết quả của lỗi cú pháp hoặc lỗi trong khi chạy. Thay vào đó, chúng xảy ra khi bạn tạo một lỗi về tính logic mà điều khiển script của bạn và bạn không nhận được kết quả như mong đợi.

Bạn không thể nắm bắt được các lỗi này, bởi vì nó phụ thuộc vào yêu cầu và kiểu logic mà bạn đặt vào chương trình.

Lệnh try...catch...finally

Phiên bản mới nhất của JavaScript thêm khả năng xử lý lỗi chạy chương trình. JavaScript thực hiện chỉ lệnh try…catch…finally cũng như toán tử throw để xử lý các Runtime Error.

Bạn có thể catch các Runtime Error nhưng bạn không thể catch các lỗi cú pháp (Syntax Error).

Cú pháp khối try...catch...finally như sau:

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

Khối try phải được theo sau bởi hoặc một khối catch hoặc một khối finally (hoặc một trong hai) một cách chính xác. Khi một Runtime Error xảy ra trong khối try, lỗi này được đặt trong e và khối catch được thực thi. Khối finally tùy ý thực thi vô điều kiện sau try/catch.

Ví dụ

Dưới đây là một ví dụ mà chúng tôi cố gắng gọi một hàm không tồn tại mà tạo Runtime Error. Chúng ta xem cách nó thực thi mà không sử dụng try...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>

Kết quả

Bây giờ chúng ta cố gắng nắm bắt lỗi này bởi sử dụng try…catch và hiển thị một thông báo thân thiện với người dùng (user-fiendly). Bạn cũng có thể bỏ thông báo này, nếu bạn muốn ẩn lỗi này, không hiển thị nó với người dùng.

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

Kết quả

Bạn có thể sử dụng khối finally mà sẽ luôn luôn thực thi vô điều kiện sau try/catch. Sau đây là ví dụ:

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

Kết quả

Lệnh throw

Bạn có thể sử dụng lệnh throw để nêu lên các lỗi Runtime Error có sẵn hoặc các lỗi tùy chỉnh của bạn. Sau đó các lỗi này có thể được nắm bắt và bạn có thể thực hiện một hành động hợp lý.

Ví dụ

Ví dụ sau minh họa cách sử dụng một lệnh throw.

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

Kết quả

Bạn có thể nêu lên một lỗi trong một hàm bởi sử dụng một chuỗi, integer, logic, hoặc một đối tượng và sau đó bạn có thể nắm bắt lỗi này hoặc trong cùng hàm như chúng tôi đã làm ở trên, hoặc theo hàm khác bởi sử dụng khối try...catch.

Phương thức onerror()

Phương thức onerror là tính năng đầu tiên để xử lý lỗi trong JavaScript. Các sự kiện error được kích hoạt trên đối tượng window bất cứ khi nào một exception xảy ra trên trang.

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

Kết quả

Phương thức xử lý lỗi onerror cung cấp thông tin gồm 3 phần để xác định chính xác lỗi.

Error message − Thông báo mà trình duyệt sẽ hiển thị với lỗi đã cho.
URL − File mà lỗi xảy ra.
Line number− Dòng nào trong URL đã cho mà gây ra lỗi.

Dưới đây là ví dụ chỉ cách trích thông tin này:

Ví dụ

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

Kết quả

Bạn có thể hiển thị thông tin được trích theo bất cứ cách nào bạn nghĩ rằng nó là tốt.

Bạn có thể sử dụng một phương thức onerror, như dưới đây, để hiển thị một thông báo lỗi trong trường hợp có bất kỳ vấn đề gì trong khi tải một ảnh.

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

Bạn có thể sử dụng onerror với nhiều thẻ HTML để hiển thị các thông báo thích hợp trong trường hợp xuất hiện lỗi.

Các bài học JavaScript khác tại s2sontech:

Syntax Error

Runtime Error

Logical Error

Lệnh try...catch...finally

Ví dụ

Kết quả

Kết quả

Kết quả

Lệnh throw

Ví dụ

Kết quả

Phương thức onerror()

Kết quả

Ví dụ

Kết quả

Bình luận (0)