There are three types of programming errors: (1) Syntax errors and (2) Runtime errors (3) Logic errors:
Syntax errors:
Syntax errors, also known as parsing errors, are made at compile time in traditional programming languages and appear when JavaScript is interpreted.
For example, the following line will result in a syntax error because it is missing a closing parenthesis:
<script type="text/javascript"> <!-- window.print(; //--> </script>
When a syntax error occurs in JavaScript, only the effect of the syntax error contained in the same thread is that code in other threads is executed; code dependent on the code containing the error will not be executed.
Runtime error:
Execution (after compilation/interpretation) at runtime errors, also known as exceptions, are thrown.
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>
Exceptions also affect the thread in which they occur, allowing other JavaScript threads to continue normal execution.
logical error:
Logical errors are probably the most difficult type of bug tracking. These errors are not the result of a syntax or runtime error. Conversely, when an error occurs driving script logic, you don't get the expected result.
You may not be able to catch these errors because it depends on the program what type of logic is based on business requirements.
try...catch...finally statement:
Exception handling capabilities have been added in recent versions of JavaScript. JavaScript implements try...catch...finally constructs and throws 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>
The try block must be followed by only a catch block or a finally block (or either). When an exception is placed in the try block, the division is placed in the e and the catch block is executed. The optional finally block after the try/catch statement executes unconditionally.
Example:
Below is an example where we are trying to call a function that does not exist 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>
Now, let's try to catch this exception with 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>
You can use a finally block to always execute the try/catch statement unconditionally. Below 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>
throw statement:
You can use the throw statement to raise your built-in exceptions or custom exceptions. Later these exceptions can be caught and appropriate action can be taken.
The following is an example showing the usage of the throw statement.
<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 strings, integers, booleans or objects to throw an exception in a function, then you can catch the exception in the same function that we did above, or use a try...catch block in another function.
onerror() syntax
The onerror event handler is the first feature that makes it easy for JavaScript to handle errors. The error event is fired on the window object whenever an exception occurs on the page. E.g:
<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 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 at the URL that caused the error
Here is an example to illustrate 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>
The extracted information can be displayed in whatever way you feel is better.
You can use the onError method to display an error message without any problems loading the image as follows:
<img src="myimage.gif"
onerror="alert('An error occurred loading the image.')" />
You can use onerror to display appropriate information in case of errors in many HTML tags.
you may be interested in