JavaScript Error Handling using try...catch

Unexpected run time script errors are often a headache for programmers as it leads to page break. This occurs due to several possible reasons; it might be syntactical issue, or unhandled null / undefined values or parsing error etc.

JavaScript provides try…catch to handle such unwanted errors. The main advantage of error handling is, it doesn’t break the page or stops the normal application flow. The basic syntax is:

try {
    //code that may throw error
} catch (error) {
    //code to handle error if error occurs
}

In try block we write the code that might throw some errors. When any line of code throws any error in try block, then the catch block gets executed. In catch block we write the code to handle the error. The parameter in catch block will receive the error object that has occurred in try block. We can use the error object to log the details about the error.

try {
    let car;
    car.value;
} catch (error) {
    console.log( 'Some error has occured\n' + error);
}

//Some error has occured
//TypeError: Cannot read property 'value' of undefined

We can use the name and message properties of error object to get more details about the error.

try {
    let car;
    car.value;
} catch (error) {
    console.log('Error name: ' + error.name);
    console.log('Error message: ' + error.message);
}

//Error name: TypeError
//Error message: Cannot read property 'value' of undefined

The throw keyword

JavaScript throw keyword lets you to throw your custom errors.

try {
     throw new Error('This is a custom error');
} catch (error) {
     console.log(error);
}

//Error: This is a custom error

Nested try…catch block

Nesting of try…catch block is possible in JavaScript.

try {
   try {
       throw new Error('some error');
   } catch (error) {
       console.log('inner catch block - ' + error);
   }
} catch (error) {
    console.log('outer catch block - ' + error);
}

//inner catch block - Error: some error

If any error occurred in the inner try block, then respective inner catch block will execute. If the error is not handled in inner catch block, then outer catch block will execute.

try {
   try {
       throw new Error('some error');
   } catch (error) {
       throw new Error('some error in inner catch block');
   }
} catch (error) {
     console.log('outer catch block - '+error);
}

//outer catch block - Error: some error in inner catch block

The finally block

The finally block executes every time no matter whether an error has occurred or not. This block is useful to do code clean-up. This block executes after try…catch.

Without error in try block

try {
    console.log('try block executes')
} catch (error) {
    console.log('catch block - '+error);
} finally {
    console.log('finally block executes');
}

//try block executes
//finally block executes

With error in try block

try {
   console.log('try block executes');
   throw new Error('Some error');
} catch (error) {
    console.log('catch block - '+error);
} finally {
    console.log('finally block executes');
}

//try block executes
//catch block - Error: Some error
//finally block executes

We have discussed about try, catch and finally so far in detail. You can now start implementing try...catch...finally on suspicious block of code to avoid run time errors.

Amitav Mishra

JS Curious

JavaScript Error Handling using try…catch

The throw keyword

Nested try…catch block

The finally block

Without error in try block

With error in try block

Leave a Reply Cancel reply