Subscribe

JavaScript basics error handling

โœ๏ธ

Basic error handling in JavaScript introducing try and catch statements

30 Aug, 2021 ยท 3 min read

When writing solid code, we have to address error handling.

In JavaScript, this is managed through exceptions. But before we dive into those, let's look and see what happens when we introduce some faulty code.

iDontExist();

console.log('log me');

This will result in an error stating:

Uncaught ReferenceError: iDontExist is not defined

And stop our code completely.

This is not ideal because we don't want our code to crash immediately.

Catching error in JavaScript

The way to catch errors in JavaScript is to wrap them in a try...catch statement.

Let's do that for the code above and see what happens.

try {
  iDontExist();
} catch (error) {
  console.error(error);
}

console.log('log me');

Now this will result in our error being logged and our custom console.log being called.

JavaScript finally statement

To create a complete try...catch statement, we can introduce the finally block.

This block will be called once the whole code block is evaluated, and it doesn't care if it was an error.

try {
  iDontExist();
} catch (error) {
  console.error(error);
} finally {
  console.log('fully done');
}

Throwing new exceptions in JavaScript

By now, we have seen how to catch errors, and often these are just the errors JavaScript throws at us.

But we can also introduce our errors because there might be some user errors.

We can invoke these by using the throw method. This can then use an Error or a custom message.

try {
  throw new Error('my error');
} catch (error) {
  console.error(error);
} finally {
  console.log('fully done');
}

Which will result in a custom error message saying my error.

Nesting try...catch blocks

Another cool thing to note is that we can nest try...catch blocks. The main thing to note when doing this is that the outer catch block will catch the exceptions.

try {
  try {
    throw new Error('my error');
  } finally {
    console.log('inner done');
  }
} catch (error) {
  console.error(error);
} finally {
  console.log('fully done');
}

console.log('log me');

Resulting in the following flow:

// inner done
// Error: my error
// fully done
// log me

I hope you got a good understanding of error handling in JavaScript. If you have any questions, don't hesitate to contact me.

You can also have a play with this on the following CodePen demo.

See the Pen JavaScript basics error handling by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

JavaScript sending data between windows

9 Sep, 2022 ยท 4 min read

JavaScript sending data between windows

Using the native payment request JavaScript API

9 Aug, 2022 ยท 8 min read

Using the native payment request JavaScript API

Join 1829 devs and subscribe to my newsletter