Categories
JavaScript Best Practices

Maintainable JavaScript — Throwing Errors

Spread the love

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at ways to throw errors.

Errors

We throw errors when our program encounters some unexpected.

Maybe an incorrect value was passed into a function or operation.

Programming language defines rules and when we deviate from them, then errors should be thrown.

Debugging would be close to impossible if errors aren’t thrown and reported back to us.

If everything failed silently, then it’ll take a long time to find out what’s wrong with our program.

Errors are there to help us.

The problem we have is that errors may come up in unexpected places and times.

Default error messages may not give us enough information to solve the problem.

It’s always a good idea to plan for failure so that we can deal with them before they occur.

Throwing Errors in JavaScript

To throw errors in JavaScript, we use the throw keyword with an Error instance.

For instance, we can write:

throw new Error("an error occurred.")

We pass in a message that we want to display with the error.

The built-in Error type is available in all JavaScript implementation.

The constructor takes a single argument, which is the error message.

When an error is thrown and it isn’t caught by a try-catch block, then the browser displayed the message in the browser’s way.

Most browsers have a dev console to display errors in there.

An error we throw is treated the same as an error that we didn’t throw.

A bad way to use the throw keyword is to use it with something that isn’t an Error instance.

For instance, we may write something like:

throw "error";

This is bad because browsers may not respond the same way to this.

And also, we throw away useful information like the stack trace.

However, we can throw anything we like.

There’s nothing prohibiting this.

Firefox, Opera, and Chrome convert non-error objects to string when they’re thrown.

And IE doesn’t.

Advantages of Throwing Errors

Throwing our own error allows us to provide the exact text to be displayed by the browser.

Instead of line and column numbers, we can include any information we like that we’ll need to successfully debug the error.

For instance, if we have:

function getSpans(element) {  
  if (element && element.getElementsByTagName) {  
    return element.getElementsByTagName("span");  
  } else {  
    throw new Error("argument not a DOM element");  
  }  
}

Then we throw an error if an object isn’t a DOM element.

This way, we know that we didn’t pass in DOM elements if we see the error message.

With this setup, we see the error message that can help us debug what’s wrong with our code without looking too hard.

Conclusion

Throwing errors lets us know what’s wrong when we run into problems.

Without them, we won’t know what’s wrong when our code does something we don’t expect.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *