Nov 21, 2016 8:00:16 AM | JavaScript Error Handling: Error Object Hierarchy

Built-in error objects can be very useful for JavaScript error handling. Here's a quick overview of the JavaScript error object hierarchy!

The powerful JavaScript language and development platform provides a number of useful core object constructors that allow for simple exception and error administration. JavaScript error handling is typically performed through the generic Error object, or from any of a number of core error constructors.

Here we see the basic list of built-in error objects provided by JavaScript:

Below we'll examine each of the core error constructors provided by JavaScript, looking at simple examples and descriptions for what can cause each type of error to occur.

Error

At the most basic level, the [Error] object is thrown when a runtime error occurs. Error is best used for a generic, user-defined error type that should be thrown, which may not match an existing core error constructor:

try {
throw new Error('Uh oh');
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: Error: Uh oh.

EvalError

The [EvalError] object represents an error that occurs during the use of the global eval() function. While the EvalError is no longer thrown by newer versions of JavaScript, and is thus deprecated, it remains intact for backward compatibility purposes.

Here is an example of throwing an EvalError object error:

try {
throw new EvalError('Uh oh', 'myFile.js', 25);
} catch (e) {
console.log(e instanceof EvalError); // true
console.log(e.message); // "Uh oh"
console.log(e.name); // "EvalError"
console.log(e.fileName); // "myFile.js"
console.log(e.lineNumber); // 25
}

InternalError

The [InternalError] object is thrown when the JavaScript engine itself experiences an internal error. While the InternalError object is considered non-standard and thus shouldn't be relied upon in production environments, it can be utilized in some cases to detect engine failure points.

Executing the following code will produce an InternalError in some browsers or environments (while others will instead produce the RangeError, as described below):

function recurse(){
recurse();
}
recurse();

Output: InternalError: too much recursion.

RangeError

A [RangeError] indicates when an error occurs when an argument value is outside of the allowed bounds for a particular method's parameter. This can be seen when passing improper values to built-in methods such as Number.toFixed():

try {
var float = 1.2345;
float.toFixed(21);
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: RangeError: toFixed() digits argument must be between 0 and 20(…).

ReferenceError

The [ReferenceError] object represents an error when a reference is made to a non-existent variable:

try {
var a = myUndefinedVariable;
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: ReferenceError: myUndefinedVariable is not defined.

SyntaxError

As the name implies, the [SyntaxError] object appears when an error occurs trying to execute code that is syntactically invalid. For example, here we can catch a SyntaxError object by trying to use eval() on invalid code:

try {
eval("this will fail");
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: SyntaxError: Unexpected identifier.

TypeError

The [TypeError] object occurs from an error when a value doesn't match the expected data type.

Here we're creating a new variable foo, assigning it to the value null, and then attempting to call the missing foo.myMethod property, which doesn't exist:

try {
var foo = null;
foo.myMethod();
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: TypeError: Cannot read property 'myMethod' of null.

URIError

Finally, the [URIError] object represents an error that occurred when one of JavaScript's global URI functions (such as decodeURI()) is improperly called:

try {
decodeURI('%foo%bar%');
} catch (e) {
console.log(e.name + ': ' + e.message);
}

Output: URIError: URI malformed.

These built-in exception classes are helpful JavaScript error handling tools! Used with Airbrake's JavaScript Error Handler your debugging process will be a breeze. Good luck!

Written By: Frances Banks