JavaScript: Errors, Types, Properties

08-July-2022
11-min read

Introduction

In this blog, I am going to talk about types of errors in Javascript. So grab a seat, have popcorns ready.

Javascript throws runtime errors and today we are going to see how to read, understand and use those errors in your code.

Error:

In JS, an Error is an object. It has a Class Error, which has a constructor Error(). This is the generic error class in JS.

There are various types of errors that means there are various Classes of Errors.

So we can create Error objects from such constructors.

The generic constructor Error takes one argument (a message that will be used to describe the error)

So yes, you are right, if it's an object and also it has a Class, it should have properties too.

Standard Properties of Error Object:

  1. name -

    By default, Error instances are given the name "Error". All the instances of Class Error will have a name property as "Error".

  2. message -

    The message property is a human-readable description of the error. Contains brief information of the error.

  3. toString-

    You might be thinking we have the toString method for Objects too. But the Error object overrides the Object.prototype.toString(). In the background, it combines the name and message and converts them into a string.

These are 3 standard properties, there are other non-standard properties too but they might not be supported by some browsers.

Let's check below example

See the 1st word in the above error- Uncaught: it means your error was not handled using the catch keyword.

Next word is- Error: It is the value of the name property of the Error.

The next part is - MyMessage for the error: It is the value of the message property in the Error.

The next part is - at <anonymous>:1:13: This is the very important part, this is a stack trace, it shows where the error occurred, will talk about this in detail in later part of the blog.

So the above statement is just all the properties of Error showed together.

toString():

toString method when called on Error, will return a string like - name: message

If the name property value is undefined, it returns the string with name value as Error if the message property value is undefined, it returns the string with message value as an empty string ``

We will see one example of the toString() method.

Other than the generic Error constructor, there are other core error constructors in JavaScript. We will learn some of them in this blog.

1. RangeError :

The RangeError object is thrown when a value is not in the set or range of allowed values.

Constructor: RangeError()

Properties:

  1. message: RangeError should provide its own message property
  2. name: by default RangeError name property has the value "RangeError". Both the properties are inherited from the Error class

2. ReferenceError:

ReferenceError object is thrown when a non-existing variable is referenced or used in your code.

Constructor: ReferenceError()

Properties:

  1. message: ReferenceError should provide its own message property
  2. name: by default ReferenceError name property has the value "ReferenceError". Both the properties are inherited from the Error class

3. SyntaxError:

The SyntaxError object is thrown when a program contains syntactically invalid code.

Constructor: SyntaxError()

Properties:

  1. message: SyntaxError should provide its own message property
  2. name: by default SyntaxError name property has the value "SyntaxError". Both the properties are inherited from the Error class

4. TypeError:

The TypeError object is thrown when an operation could not be performed, mostly when a value is not of the expected type.

Constructor: TypeError()

Properties:

  1. message: TypeError should provide its own message property
  2. name: by default TypeError name property has the value "TypeError". Both the properties are inherited from the Error class

5. URIError:

URIError is thrown when a global URI method is used in a wrong way.

e.g. The decodeURI() function takes encoded URI as an argument, it throws an URIError when the encoded URI contains invalid character sequences.

Constructor: URIError()

Properties:

  1. message: URIError should provide its own message property
  2. name: by default URIError name property has the value "URIError". Both the properties are inherited from the Error class

Selective Catching

Let's see an example, where we handle the error using try-catch block. What if we want to handle only the TypeError and not the syntax error. We can do that easily, as we know all the errors are instances of their class. we can check their class and find out which type of error our try block has.

Stack Trace

Let's talk about stack trace now.

consider below example. It has 3 functions, function A calls B, and function B calls C.

In function A we are handling the error, but in C error is thrown, as soon as the error is thrown in C, it stops executing further and control comes to the point where it was invoked, that means in function B. Function B also stops executing and control comes to the point where it was invoked, that means in function A. Now function A sees the catch block and the error gets caught there and now program runs further without any interruption.

Now that error tells information about type of error, message of the error and stack trace.

Stack trace information is stored in the stack property and can be helpful when trying to debug a problem. it tells us the function name where the error occurred and which functions made the failing call. States what all things are there in the stack at the time when the error occurred.

So this was all about errors in javascript. Let me know in the comments if you found this blog helpful !!

References: