Home > Developer > JavaScript
How to handle exceptions in JavaScript
This article describes how to handle exceptions in JavaScript, including the use of basic try... catch statements and throw statements. For more information, see
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, are implemented in traditional programming languages during compilation and occur during JavaScript interpretation.
For example, the following line may cause a syntax error because it lacks an angle bracket:
?
| 1 2 3 4 5 |
<Script type = "text/javascript"> <! -- Window. print (; // --> </Script> |
When a syntax error occurs in JavaScript, only the impact of the syntax error contained in the same thread is executed in other threads; code dependent on code that contains errors will not be executed.
Runtime error:
Execution (after compilation/interpretation) is also known as an exception during runtime, which may cause errors.
For example, the following line will cause a runtime error because the syntax here is correct, but it is trying to call non-existing methods at runtime:
?
| 1 2 3 4 5 |
<Script type = "text/javascript"> <! -- Window. printme (); // --> </Script> |
Exceptions also affect the threads they occur and allow other JavaScript threads to continue normal execution.
Logical error:
Logical errors may be the most difficult type of Error Tracking. Are these errors a result of a syntax or runtime error. On the contrary, when an error occurs in the drive script logic, you do not get the expected results.
You may not be able to catch these errors because it depends on what type of logic the program is based on business needs.
Try... catch... finally statement:
Exception Handling capability added in the latest version of JavaScript. JavaScript implements the try... catch... finally structure and throws an operation to handle exceptions.
You can capture exceptions generated and run by programmers, but cannot catch JavaScript syntax errors.
Here is the try... catch... finally block Syntax:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 // An exception occurring }] // --> </Script> |
The try block must be followed by only one catch block or one finally block (or one of the two ). When an exception occurs in the try block, except for the e and catch blocks, the exception is executed. Optional finally blocks after a try/catch statement are executed unconditionally.
Example:
The following is an example. We are trying to call a non-existent function, which will cause an exception. Let's take a look at its behavior. It does not have try... catch:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<Html> <Head> <Script type = "text/javascript"> <! -- Function myFunc () { Var a = 100;
Alert ("Value of variable a is:" + );
} // --> </Script> </Head> <Body> <P> Click the following to see the result: </p> <Form> <Input type = "button" value = "Click Me" onclick = "myFunc ();"/> </Form> </Body> </Html> |
Now, let's try to catch this exception using try... catch and display a user-friendly message. You can also cancel the message if you want to hide the error from the user.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<Html> <Head> <Script type = "text/javascript"> <! -- Function myFunc () { Var a = 100;
Try { Alert ("Value of variable a is:" + ); } 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> |
You can use the finally block to execute the try/catch statement permanently. The following is an example:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<Html> <Head> <Script type = "text/javascript"> <! -- Function myFunc () { Var a = 100;
Try { Alert ("Value of variable a is:" + ); } 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 statement:
You can use throw statements to improve your built-in exceptions or custom exceptions. Later, these exceptions can be captured and appropriate actions can be taken.
The following is an example of throw statement usage.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
You can use a string, integer, Boolean, or object to throw an exception in a function, so you can capture exceptions in the same function. We did this, or use try... catch Block in other functions.
Onerror () syntax
The onerror event handler is the first feature that facilitates JavaScript to handle errors. An error event is a window object triggered every time on an exception page. For example:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
The onerror event handler provides three pieces of information to identify the exact nature of the error:
Here is an example to illustrate how to extract this information
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
It can be displayed in any way and you think it is better to extract information.
You can use the onError method to display the error message without loading the image as follows:
?
| 1 2 |
Onerror = "alert ('an error occurred loading the image. ')"/> |
You can use onerror to display the corresponding information when many HTML tags are incorrect.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
