How to handle JavaScript Errors with Try, Throw, Catch, & Finally

Errors due to wrong input or other unforeseen things, and errors always will be made by programmers, and it’s good to know how to properly handle them.

In this blog you will learn how to handle errors in JavaScript, especially when you are working with data from other sources or user input since those can be unreliable. It is common to see error handling associated with Ajax calls and asynchronous code error handling uses the keywords try, catch, finally and throw.

The try statement lets you test a block of code for errors

The catch statement lets you handle the error

The throw statement lets you create custom errors

The finally statement lets you execute code after try and catch regardless of the result

Let’s jump to example:

function isThereAnError(){
  try {
    console.log("All good, no errors") 
  } catch(error) {  
    console.log("We have an error")
  }
}
isThereAnError()

In this example above, the output is going to be //All good, no errors . If we misspell our console.log, let’s say conole.log(), we will have second output which is //We have an error and message. error parameter is whatever gets thrown as the error object from try block of code.

We also can create a custom errors with using the syntax throw in order to handle errors and see exactly where the error is. like in following example:

function isThereAnError(){
  try {
    console.log("All good, no errors") 
     throw new Error('**ooops**') 
  } catch(error) {
    console.log("We have an error", error.message)
  }
}
isThereAnError()

The output of this function is going to be //All good, no errors
We have an error **ooops** As we know JavaScript reads the code from top to bottom. If we breakdown this code first, it’s going to print the first input, and then it will look the keyword catch , once it finds it, it will pass our new error instance into this error object to catch as a parameter and simply print it out.

We can wrap our entire piece of code into try block and catch the error, if we want to handle it somehow. Good example would be when you trying to login to you Instagram account and by accident misspelled your username, you will see error message.

Notice: the order does matter, if we change the order between line three and four, JavaScript will print out the error **oops** and will look at catch block. Also, try doesn’t work without catch or finally .

Like i said previously finally is going to do something no matter what happened before.

function isThereAnError(){
  try {
    throw new Error('**ooops**')
    console.log("All good, no errors") 
  } catch(error) {
    console.log("We have an error", error.message)
    }finally {
    console.log('life is good') 
    return 'returning function'
  }
}
isThereAnError() //--> We have an error **ooops** 
                       life is good
                       returning function

Interesting part is if we try to console.log something or write another piece of code outside of try and catch blocks, but inside of function, it will never going to get run. It will look at try, catch and then finally gets run which returns our function.

We may not have seen try catch that often. But it oftentimes the simplest way to handle errors. This type of try catch block can be used to catch any type of synchronous errors.