Exception Handling in JavaScript

We can implement our well known try-catch block to catch exceptions in JavaScript.

This is the Advanced JavaScript article series. In this series we are talking about JavaScript. Already we have explained various important concepts of JavaScript. You can read them here.

 In this article we will learn exception handling in JavaScript. We know that exception handling is a very important concept of any programming language, and JavaScript is not an exceptional case. We can implement our well known try-catch block to catch exceptions in JavaScript.

Raise our own exception

Like C# and other languages, we can raise our own exception using the throw new Error() statement. Try to understand the following code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.         <script>             
  9.   
  10.             function fun() {  
  11.                 throw new Error("This is error");  
  12.             }   
  13.   
  14.             try {  
  15.   
  16.                 fun();  
  17.             }  
  18.             catch (Error) {  
  19.                 alert(Error.message);  
  20.             }  
  21.         </script>  
  22.     </form>  
  23. </body>  
  24. </html> 
From the fun() function we are throwing our own custom exception. Within the try block we are catching an exception.
 
Exception in JavaScript

Catch exception in normal operation

In the example above we have seen how to throw our own exception. Just as in any other function, we can trap an exception in normal function execution. Here we are trying to trap an exception in JSON parsing.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.         <script>  
  9.             function fun() {  
  10.                 try{  
  11.                     JSON.parse("Thsi is not JSON");  
  12.                 }  
  13.                 catch (Exception) {  
  14.                     alert(Exception.message);  
  15.                 }                 
  16.   
  17.             }  
  18.             //Call to function  
  19.             fun();  
  20.         </script>  
  21.     </form>  
  22. </body>  
  23. </html>
Here is sample code. The JSON parser is throwing an error and catch is catching the error. The message type is showing that:

Catch Exception in JavaScript

The error type is due to an unexpected token. This is due to a bad format of JSON data.

Checking various type of Error in JavaScript

In this section we will check various types of error types that JavaScript supports. We are seeing that it supports various types, like EvalError, MediaError, PositionError and many more.

Error in JavaScript

Detect error type in JavaScript.

In a catch block we can check which type of error has been thrown and depending on that we can make a decision. In this example we are throwing a SyntaxError and within the catch block we are tryting to detect it.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.         <script>  
  9.             function fun() {   
  10.                 try {  
  11.                     throw new SyntaxError();  
  12.                 }  
  13.                 catch (Exception) {  
  14.                     alert(Exception.name);  
  15.                 }                 
  16.   
  17.             }  
  18.             //Call to function  
  19.             fun();  
  20.         </script>  
  21.     </form>  
  22. </body>  
  23. </html>
We are seeing that, it's showing a Syntax error when we display the name property of the Exception.

 

Detect Error in JavaScript

Finally block of try-catch

Generally we implement a finally block to perform additional work at the time of exception processing; the same is true in JavaScript. We can implement a finally block to take some action. Have a look at the following example:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.         <script>  
  9.             function fun() {   
  10.                 try {  
  11.                    throw new URIError();  
  12.                 }  
  13.                 catch (Exception) {  
  14.                 document.write("Error type:- " + Exception.name);  
  15.                 }  
  16.                 finally {  
  17.                     alert("program close");  
  18.                 }  
  19.             }  
  20.             //Call to function  
  21.             fun();  
  22.         </script>  
  23.     </form>  
  24. </body>  
  25. </html>
The finally block is executing after catch block. Here is sample output.

Finally block of try-catch in JavaScript

Conclusion

In this article we have learned to implement exception handling in JavaScript applications. Hope you have understood the concept. In a future article we will learn more about JavaScript.