JavaScript

How to create custom errors by using throw statements in JavaScript

While programming, the chances of something going wrong or causing an error are high. To represent these errors we need classes. Sometimes, users need to define their own error class suitable for their program.

These errors vary from program to program but all of them have some basic properties like name, message, and stack. These errors can also come up with their own properties based on the function they’re serving.

JavaScript allows users to create their own customized error using a throw statement. In this article, we will learn how to create custom errors using throw and how it works with examples.

Custom Errors Using throw

Customizing errors allows you to act according to the specific error type without restoring the error message for a better understanding of the error.

For example, in your program, you want to register people only above 18, and you want to throw an exception if someone enters a number below 18. This is done through a throw statement. Let’s understand this better.

Syntax

throw expression;

Here, the expression specifies the type and value of the exception.

The error can be a Number, String, Boolean, or Object in JavaScript.

Example

throw 'Above 18';   // output is an exception of data type string
throw 404;         // output is an exception of data type number with value 404
throw false;       // output is an exception of data type boolean
throw new Error('Important');  // output is an error of object type display  message Important

Custom errors can be generated by using throw with a try and catch block.

Example of Custom throw error with try-catch

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Custom Error with try catch</h2>

<p>Please enter your age if you're between 18-30</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Check</button>
<p id="p"></p>

<script>
function myFunction() {
    const message = document.getElementById("p");
    message.innerHTML = "";
    let x = document.getElementById("demo").value;
    try {
        if(x == "")  throw "Empty";
        if(isNaN(x)) throw "not a number";
        x = Number(x);
        if(x < 18)  throw "below 18";
       if(x >= 18 && x <= 30)  throw "valid. User is between 18-30";

        if(x > 30)   throw "Above 30";
    }
    catch(err) {
        message.innerHTML = "Input is " + err;
    }
}
</script>

</body>
</html>

Output

Firstly, when no input was entered it displayed the exception of Input is Empty, but when a number below 19 was entered it displayed the following exception:

Now, when a number between 18-30 was entered:

Furthermore, when the user entered an input that wasn’t a number:

This shows how an exception was thrown depending on various inputs.

Error Class in JavaScript

In JavaScript, we have an Error class that allows us to throw a user-defined exception. It has properties of name, message, and stack that a user can inherit from it and define their own methods inside it.

Users can create a customized error class by extending their class with the Error class. Let’s understand this with the following example, but first, let’s see what the Error class looks like. Although it’s a built-in class in JavaScript, the following pseudo-code is given for better understanding:

// The "pseudocode" for the built-in Error class defined in JavaScript
class Error {
    constructor(message) {
        this.msg= msg;  //contains message
        this.name = "Error"; // (name differs according to the built in class that is being used)
        this.stack = <<strong>call</strong> stack>; // non-standard, but most environments support it
    }
}

Example of PageNotFound using Error Class
Here’s an example to demonstrate the working of custom error classes through extending the Error class in JavaScript. A PageNotFoundError class is created that displays the exception of a page not found along with the message and status code 404.

class PageNotFoundError extends Error {
    constructor(message) {
        super(message);
   
        this.name = 'PageNotFoundError';
        this.statusCode = 404;
    }
}

function throwAnError() {
    throw new PageNotFoundError('Not Found.');
}

try {
    throwAnError();
} catch (error) {
    console.log(error.message); // 'Not Found.'
    console.log(error.name); // PageNotFoundError
    console.log(error.statusCode); // 404
}

Output

In the above example, on line 1 we call the Parent Constructor because it sets the message property as well as the name and stack property of the Error. Furthermore, it’s obligatory to call super in the child constructor.

Conclusion

User Customized errors are extremely helpful when a user wants to indicate a particular error according to the need of their program. In this article, we learned how to throw custom errors in JavaScript. Throw statement allows us to create errors according to our program flow. These expressions can be a String, Number, Boolean, or Object.

Furthermore, we saw that the built-in Error class is available for users to customize their error class by simply extending it with the built-in Error class. This comes with its own properties that help users to even customize the parameters according to the behavior of their program.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.