Handling JavaScript Errors with try catch, finally & throw

John on March 24, 2021

JavaScript provides four different statements for handling errors; try, catch, finally and throw. In this tutorial, we will learn how these can be used in different ways to handle errors depending on your situation.

What Does Each Statement do?

• try – code running inside this block will be checked for errors.
• catch – handle any of the errors thrown in the previous try statement.
• throw – throw a custom error anywhere in the code.
• finally – this statement will run regardless of the success of a try statement.

try and catch Statements in JavaScript

Write the code to execute in the try statement and what to if an error is thrown in the catch statement. The error object returned from the try statement is passed into catch as the first argument.

try {
  document.getElementById("hello").innerHTML = 'hello';
}

catch(err) {
  console.log(err);
}

TypeError: Cannot set property 'innerHTML' of null

In JavaScript, a try statement must be followed by a catch or finally statement or a SyntaxError will be thrown.

Displaying Only the Name or Message of an Error

Error objects in JavaScript have two properties; name and message. You can access them like this in a catch statement, depending on what data you need to see:

try {
  document.getElementById("hello").innerHTML = 'hello';
}

catch(err) {
  console.log(err.name);
  console.log(err.message);
}

TypeError
Cannot set property 'innerHTML' of null

try, catch and finally Statements

If you want to run code and do something after regardless of whether the first bit of code failed use a finally statement after a try and catch.

try {
  document.getElementById("hello").innerHTML = 'hello';
}

catch(err) {
  console.log(err);
}

finally {
  console.log('run this code regardless of the outcome.');
}

TypeError: Cannot set property 'innerHTML' of null
run this code regardless of the outcome.

Throw Statements

A throw statement can be used to throw a custom error exception. Pass a string, number, boolean or object after the statement like this:

throw "Not acceptable"
throw 301

Not acceptable
301

throw statements are especially useful if a custom error should be thrown if a condition is met.

try {

  if (true) {
    throw "Problem..."
  } else {
    document.getElementById("hello").innerHTML = 'hello';
  }
}

catch(err) {
  console.log(err);
}

Problem...

Here is another example with a custom error object:

try {

  if (true) {
    throw {'name': 'dayError', 'message': 'It\'s not Friday!'};
  } else {
    document.getElementById("hello").innerHTML = 'hello';
  }
}

catch(err) {
  console.log(err.name);
  console.log(err.message);
}

dayError
It's not Friday!

List of JavaScript Errors and Meanings

• EvalError – error occured inside an eval() function.
• RangeError – number out of range.
• ReferenceError – illegal refference.
• SyntaxError – syntax error.
• TypeError – type error.
• URIError – error happened inside an encodeURI() function.