Custom error handling in Javascript

Yesterday we learnt about try...catch blocks in javascript. I recommend to read about try...catch article to get most of this article.

As a programmer we are prone to make errors. It is very important to know about the errors we are encountering for better outcome.

Some of the most common errors in javascript are,

1)Syntax Errors - Syntax errors occur when the JavaScript parser encounters code that is not written according to the language's syntax rules. Syntax errors are not caught in try...catch

let value = 5;
console.log(value;        

In above code we forgot to give closing parentheses that caused syntax error

2)Reference Error - Occurs when trying to reference a variable or function that has not been declared or is out of scope.

console.log(myValue);        

In above code, myValue is not declared and hence the js compiler can't find the value.

3)Type Error - It occurs when an operation is performed on an inappropriate type.

let string = "Hello";
console.log(string.toFixed(2));        

In above code, we are trying to implement a method toFixed() method to a string that results in type error.

and so on...

As we have learnt about the error handling in our try...catch article, we can catch these errors and ensure smooth flow of the code. ie.

console.log("Before try...catch");

try{
    let string = "Hello";
    console.log(string.toFixed(2));     (1)
}catch(error){
    console.log(error);
}

console.log("After try...catch");       (2)        

In absence of try...catch block execution would had died at (1) and would had never reached (2).

Now these errors are predefined. What if we want to define our custom errors?

lets understand the scenario in code,

let object = {name:"testName"}

try{
    const {name, age} = object;
    console.log(age)
}catch(error){
    console.log(error)
}        

In above code, there is no age value present in object. Js simply returns the value of console.log(age) as undefined.

In order to handle this, we need to create custom errors.

lets understand how classes works first.

class User{
    constructor(name){
        this.name = name;
        this.age = 20;
    }
}

let user = new User("testName")

console.log(user.name);
console.log(user.age);        

The output will be

testName
20        

As we can see, we can set the values either by passing as arguments or directly declaring inside the class.

I hope you have got basic idea of the classes. Now lets learn about making custom errors using class.

The Error class is built-in, its looks like below:

class Error{
    constructor(message){
        this.name = "Error";
        this.message = message;
        this.stack = <call stack>;
    }
}        

Now we will extend out Custom code to use values from built-in Error class,

Don't worry, will explain the code

class CustomError extends Error{                     (3)
    constructor(message){
        super(message);
        this.name = "Custom Error";
    }
}

try{                                                  (1)
    let object = {name:"testName"};
    const {name, age} = object;
    if(!age){
        throw new CustomError("age is Required");     (2)
    }
}catch(error){
    console.log(error.name);
    console.log(error.message);
}        

Now we have made our custom error on top of the built-in error class, so now we can use the values from Error class also.

1)We started our code from (1). We destructured our object to get name and age values.

2)As there is no age, we have thrown our customError. While throwing we have given an message argument. ie at (2).

3)When the custom error is called, it goes to (3). Now CustomError class has message which is sent from step (2).

4)The CustomError class has all the values from its super class ie. Error class because we have inherited it from Error class.

We can visualize it as below,

class CustomError{                     
    constructor(message){
        this.message = message;
        this.stack = <call stack>;
        this.name = "Custom Error";
    }
}        

Please note that we already had this.name inside the CustomError class so it will not be changed.

And that's it. Now as we have thrown the CustomError, it will go inside catch block inside catch we are receiving it as error

This error has name, message and stack properties which we can print as needed as below,

try{                                                 
    ...
}catch(error){
    console.log(error.name);
    console.log(error.message);
}        

Thats how we can catch the custom errors in javascript.

To Read more basic javascript concepts, Please visit here

Note : I am trying to explain things in simple way which were tricky for me, So please share the article with someone who might get benefit from it.