Exception Handling in JavaScript

Javascript is an interpretation language. An interpreted language is a programming language where the code is translated and executed line-by-line each time it runs. The JavaScript engine reads your code and checks for syntax errors. The engine then executes the code line-by-line, translating it into machine instructions on the fly.

Even though JavaScript isn’t compiled, exception handling is still crucial for writing robust and error-resistant code. Exception handling allows you to gracefully handle unexpected errors during runtime. Without it, your code could crash, interrupting the user experience.

What is Exception Handling?

There are several types of errors that can occur in our code, like syntax errors, reference errors, type errors, range errors, etc. In order to handle all such errors, you will need exception handling.

Exception handling helps you identify and log errors, making it easier to debug and troubleshoot issues. For example, Operations such as dividing a non-zero number by zero, calling a method with incorrect arguments, or failing to read a file could give a JavaScript exception in our code. If we have exception handling in place, this could save our application from crashing by throwing the exact error to the user.

Importance of Exception Handling in JavaScript

In general, when an application encounters an error, there is no use proceeding with it as it may cause an application to crash.

So, it is important to handle any exception that could happen in code to keep the application up and running. If an unexpected response is given and then processed by the caller, the user gets incorrect information and a bad impression of the application.

A well-written application should have a good exception-handling mechanism and approach to various kinds of errors that are likely to happen within the application during usage.

Types of Errors in JavaScript

Below are the common types of errors that we will notice in Javascript code.

1. Syntax error: This error occurs when the Javascript engine encounters invalid syntax while parsing your code.

For example,

console.log("Hello World"; 

//Since the console.log is missing parentheses you will get it as syntax error

Uncaught SyntaxError: missing ) after argument list

2. Reference error: When we try to access a variable that is out of our scope or not yet defined, then this error will occur.

Take the below as an example,

console.log(x); 

//When we try to print a variable that is never defined we get a reference error

Uncaught ReferenceError: x is not defined

3. Type error: When you perform an operation on the wrong value, this error will occur.

For example,

num()

//you are calling a function that is never defined and it will throw ta ype error

Uncaught TypeError: num is not a function

4. URI error: This error occurs when there is a problem in encoding or decoding the URI(Uniform Resource Identifier).

For example,

decodeURIComponent("%");

//You are trying to decode an invalid URI component

URIError: URI malformed

5. Range error: When the numeric value is outside of the allowed range.

For example,

let arr = new Array(-1);

//You are trying to create an array of negative length that is invalid

Uncaught RangeError: Invalid array length

What is an Error Object in JavaScript?

In JavaScript, an Error object represents an error that occurred during the execution of your code. It provides information about the error, such as its type and a descriptive message. It will have the properties below:

• Name: A string representing the type of error (for example, “TypeError”, “ReferenceError”, “SyntaxError”).
• Message: A human-readable string describing the error.
• Cause: A property that can reference another error object, indicating the underlying cause of the current error.

Consider the below code that has the name, message, and cause of the error inside it,

function divide(a, b) {

     if (b === 0) {

       throw new Error("Division by zero", {

//Adding cause property to the error function

         cause: {

           code: "DIV_BY_ZERO",

           dividend: a,

           divisor: b

         }

       });

     }

     return a / b;

   }

   

   try {

//Dividing the number 10 by 0

     divide(10, 0);

   } catch (error) {

     console.log(error.name)

     console.log(error.message)

     console.log(error.cause.code); // "DIV_BY_ZERO"

   }

Your output will look like the following,

This has the error name, error message, and error cause variable.

How to handle Exceptions in JavaScript?

Here are some of the ways how you can handle exceptions in JavaScript.

1. Throw statements

The throw statement throws a user-defined exception. It allows you to create a custom error. The exception can be a string, number, boolean, or object.

With the throw statement, the execution of the current function will stop (the statements after the throw won’t be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

For example, you may want to throw an error if the value which we pass is not a number. You can define like below to throw an exception if the variable we pass isn’t a number.

function isNumber(num) {

if (isNaN(num)) {

   throw new Error('Given value is not a number!');

}

  }

 

isNumber('A')

Talk to an Expert

2. try…catch statements

The try…catch statements have a try block and then a catch block. The code written inside the try block will get executed first and if it throws any error then the catch block will throw the error mentioned inside it.

You can understand it better with the below example. Call a function that is never defined inside a try block, and inside the catch block, print the error saying it is an invalid function,

try {

noSuchFunction()

}

catch{

console.log("There is no such function!!")

}

With the above code you might have noticed that even though there is no such function present, the catch block handled the error and printed the error message.

3. try…catch…finally statements

You can also add a final statement to your try…catch block and make your code look better. With the final block added, the piece of code inside will get executed regardless of whether the try block throws an error or not.

For example, let a,b & c be the three variables. Define a as a number, b as a string, and c as undefined.

const a= 10, b = 'string';

try {

  console.log(a/b); 

  console.log(c); //Since the variable is undefined, it will be passed on to catch

}

catch(error) {

console.log('An error caught');

console.log('Error message: ' + error);  

}

finally {

  console.log('This will get executed by default!');

}

From the above screenshot, you might have noticed that even though the try block has any error or not, the final block will get executed and throw the specified error message.

Best Practices for Exception Handling in JavaScript

Here are some of the best practices for using exception handling in Javascript:

• Always have only the piece of code which will throw an exception inside the try block. Avoid having irrelevant code inside the try block.
• Don’t catch generic errors unless absolutely necessary. Try to catch specific exceptions (for example, network errors and validation errors) and handle them accordingly.
• Create custom error classes to represent specific error conditions. This makes debugging easier by providing clear error types.
• Use logging for exceptions to ensure that you capture sufficient details to debug.
• Avoid catching errors if you don’t plan to handle or log them. Let the error propagate up the call stack unless it’s critical to handle it at the current level.
• The finally block is executed after the try or catch block, regardless of whether an error was thrown or not. Use it for resource cleanup (for example, closing files, and clearing timeouts).

Why choose BrowserStack to run JavaScript Tests?

BrowserStack Automate is a powerful cloud-based testing platform designed to streamline and enhance your web application testing processes. Here is why you must choose BrowserStack to run JavaScript Tests:

• BrowserStack provides a comprehensive cloud-based platform with access to a wide variety of real browsers and devices, allowing you to test your JavaScript code across different environments with ease, significantly reducing the need to manage physical devices and streamlining your testing process.
• It also seamlessly integrates with popular JavaScript testing frameworks like Cypress, Selenium, and Puppeteer, making it efficient to execute your tests on multiple platforms.
• Bring down test execution times by parallelizing your tests on Automate. And test your internally hosted apps just as seamlessly.
• Use the BrowserStack SDK that allows you to integrate your test suites with BrowserStack Automate in minutes. Simply install the SDK, set up a YAML file, and trigger your tests to get started.
  Also, using the SDK makes it easy to leverage features like parallel orchestration and local testing, with zero code changes.
• BrowserStack Automate allows you to seamlessly collaborate and debug with a range of logging tools for unlimited users from your organization. Use these logs to debug your failed test cases and fix them with ease.

Conclusion

Whenever our application throws an error, it is very difficult for us to debug an issue. Having exception handling in our code base will help us to debug the issue comparatively earlier as we will get to know the reason for such errors easily.

Additionally, incorporating best practices like logging, cleanup with finally, and minimal reliance on global error handlers ensures your code remains reliable and easier to debug in complex scenarios. A thoughtful approach to exception handling makes your applications more resilient and user-friendly.

For automated testing of exception handling across multiple browsers, try BrowserStack Automate. It provides a scalable, cloud-based Selenium testing platform that helps identify JavaScript errors early and ensures a seamless and reliable user experience.

Try BrowserStack Now