JavaScript Best Practices

JavaScript Best Practices — Error Handling Techniques

Spread the love

JavaScript is a very forgiving language. It’s easy to write code that runs but has issues in it.

In this article, we’ll look at how to handle errors in JavaScript programs.

Error-Handling Techniques

Error handling is something that we got to do.

If we let them slide, then our programs crash, see corrupted, and other bad things and users won’t be happy.

Therefore, we got to handle errors properly so that users won’t see nasty things happen.

Return a Neutral Value

Returning some error values that may be harmless is one way to go.

We may want to return some neutral value that we know to be benign when an error is encountered.

If we just want to stop the code from proceeding, then we can just return something and stop the function from running.

Substitute the Next Piece of Valid Data

We can also substitute error values with some valid data we get later.

For instance, if we’re measuring temperature periodically, then we can just wait for the next reading if the previous reading failed to get the temperature.

Return the Same Answer as the Previous Time

If we encounter an error once, we can just return the same answer as before if it’s valid.

If a water meter fails to measure water usage once, we can just wait for the next reading for the new value and just return the valid value that we have now.

Substitute the Closest Legal Value

We can also substitute the closet legal value.

If our water meter can only read a volume from 0 and up and we get a negative, then we substitute with 0.

Log a Warning Message to a File

Also, we can put an entry in the program’s log for the error that we encountered.

This can be used with other techniques outlined previously.

It helps us troubleshoot what’s later on if the error persists.

Return an Error Code

Returning an error code is another valid option for handling errors.

We can return an error code to let users and other parts of our program know that an error is encountered.

To return errors, we can set the value of a status variable, we can return the status code, or we can throw an exception with the status as the value.

Call an Error-Processing Function

If our code encounters an error, we can call an error processing function to handle the error gracefully.

They would log the error and log in so that we can debug gracefully.

This is also good because we can reuse it in other parts of our system.

Display an Error Message wherever the Error is Encountered

Errors can be displayed as they’re encountered if the error can be passed into the UI component of our system.

For instance, there’re many ways to display errors in client-side JavaScript like alert , dialog boxes, and things of that sort.

So we can like something like the following:

const dispenseBeer = (age) => {  
  if (age < 21) {  
    alert('you are too young');  

to display an error alert toa user.

Handle the Error in Whatever Way Works Best Locally

Errors can also be handled locally.

This carries great flexibility, but the performance of our system may suffer if we have lots of code to handle errors locally.

We also don’t want to spread that code everywhere to reduce the chance of code duplication.

Shut Down

Another thing we can do is to end our program when we encounter an error.

It’s not sure if we want to do this often as users may be surprised to see our program close when an error is encountered.

If we do this, we should make sure that pleasant user experience is maintained.

Robustness vs. Correctness

Robustness means that we do whatever it takes to keep our software operating.

Correctness means that we may sure everything is right before our program continues to run.

Consumer-facing apps favor robustness over correctness. If we’re writing JavaScript apps, it’s more likely than not that they aren’t safety-critical applications, so robustness is favored over correctness.


We can handle errors in many ways in our programs.

We can just take non-error values that were produced previously or wait for the next non-error value.

Also, we can throw exceptions, end our program, or display an error.

We got to think about the options that are most suitable for us.

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 *