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 errorsThe
catch
statement lets you handle the errorThe
throw
statement lets you create custom errorsThe
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
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
We have an error **ooops**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.