Detailed explanation of exception handling methods in JavaScript

Detailed explanation of exception handling methods in JavaScript_Basic knowledge

WBOY

Release： 2016-05-16 15:54:31

Original

1208 people have browsed it

There are three types of programming errors: (1) Syntax errors and (2) Runtime errors (3) Logic errors:
Syntax error:

Syntax errors, also known as parsing errors, occur when compiling traditional programming languages and appear when JavaScript is interpreted.

For example, the following line will cause a syntax error because it is missing a closing bracket:

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

Copy after login

When a syntax error occurs in JavaScript, only the syntax error contained in the same thread is affected, and code in other threads is executed; code that depends on the code containing the error will not be executed.
Runtime error:

Execution (after compilation/interpretation) at runtime errors, also known as exceptions, are raised.

For example, the following line will cause a runtime error because the syntax here is correct, but at runtime it is trying to call a non-existing method:

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

Copy after login

Exceptions also affect the thread on which they occur, allowing other JavaScript threads to continue executing normally.
Logic error:

Logic errors are probably the most difficult type of errors to track. These errors are not the result of a syntax or runtime error. Conversely, when a bug occurs driving script logic, you don't get the expected results.

You may not be able to catch these errors because it depends on the program what type of logic it is based on the business requirements.
try...catch...finally statement:

Exception handling capabilities added in the latest version of JavaScript. JavaScript implements try...catch...finally structures and throw operations to handle exceptions.

You can catch programmer-generated and runtime exceptions, but not JavaScript syntax errors.

Here is the try...catch...finally block syntax:

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

Copy after login

The try block must be followed by only a catch block or a finally block (or either). When an exception occurs in the try block, the exception is placed in e and the catch block is executed. The optional finally block after the try/catch statement is executed unconditionally.
Example:

Below is an example where we are trying to call a non-existent function which will throw an exception. Let's see how it behaves, without 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>

Copy after login

Now, let us try to catch this exception using try ... catch and display a user-friendly message. You can also suppress this message if you want to hide this error from the user.

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

Copy after login

You can use the finally block to execute unconditionally forever after the try/catch statement. Here is an example:

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

Copy after login

throw statement:

You can use the throw statement to enhance your built-in exceptions or custom exceptions. Later these exceptions can be caught and appropriate action can be taken.

The following are examples of the usage of throw statements.

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

Copy after login

You can use a string, integer, boolean or object to throw an exception in a function, then you can catch the exception in the same function we did above, or use a try...catch block in other functions.
onerror() syntax

The onerror event handler is the first feature, which facilitates JavaScript to handle errors. The error event is fired on the window object whenever an exception occurs on the page. For example:

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

Copy after login

The onerror event handler provides three pieces of information to find out the exact nature of the error:

Error message. The browser will display the same message for the given error
URL . The file where the error occurred
Line number. The line number given in the URL that caused the error

Here is an example of how to extract this information

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

Copy after login

Can be displayed in any way you feel is better to extract the information.

You can use the onError method to display an error message without any issue in loading the image as follows:

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

Copy after login

You can use onerror to display corresponding information in case of errors in many HTML tags.