Know the perfect way of Error handling in JavaScript

Sometimes a developer is great at programming, but the scripts may have errors. There are various reasons for these errors. Sometimes it occurs because of our mistakes or maybe an unexpected user input, or it could be an erroneous server response and there could be a thousand of other reasons.

Generally, a script stops it’s execution after an error occurred, printing it to console.

To overcome this there’s a syntax construct try…catch which allows to “catch” errors and, instead of stopping the execution, do something more reasonable.

The “try…catch” syntax

The try…catch consists of two blocks: try, and then catch

try {
// Here is your code…
} catch (err) {
 // error handling
}

It works like this

1. First, the code in try{…} block is executed.
2. If there were no errors, then catch(err) block is ignored and the execution reaches the end of try and then jumps over catch.
3. If any error occurred during the execution of the try block, then the execution is stopped, and the control flows to catch(err). The err variable contains an error object contains the details of the error…

Example:

try {
alert(‘Start of try block’);
abcd; // error, variable is not defined!
alert(‘End of try’);
} catch(err) {
alert(`Some error has occurred!`);

}
alert(“the execution continues”);

 

Things to be remembered

try..catch only works for runtime errors

For try..catch to work, the code must be valid. i.e., it should be a valid JavaScript.

try..catch works synchronously

If any exception happens within a  “scheduled” code, like setTimeout, then try..catch won’t catch the error: That’s because within a setTimeout call the function executed later, when the engine already left the try…catch block. To catch an exception inside a setTimeout function, try..catch must be inside that function:

Error object

During the execution, if an error occurred then JavaScript generates an object which contains the details of the error. Then the error object is passed as an argument to catch:

try {
 // …
} catch(err) { // err is the “error object”, you could use another word instead of err
 // …
}

The error object inside catch block has two main properties:

Name

Error name. For an undefined variable that’s “ReferenceError”.

Message

Textual message about error details.

Try…catch…finally

The try..catch block may have one more code clause: finally.

If it exists, it runs in all cases:

• after try, if there were no errors,
• after catch, if there were errors.

The syntax looks like this:        

try {
try to execute the code
} catch(e) {
handle errors
} finally {
execute always
}

The code has two ways of execution:

• If the code has some error,then try -> catch -> finally.
• If there were no error, then try -> finally.

Summary

The try..catch block allows to handle any runtime errors.

The syntax is:

try {
// Hereis your code
} catch(err) {
// if an error happened, then jump here
// err is the error object
} finally {
// execute this in any case after try/catch
}