The Error object and throwing your own errors

Home

Error handling in JavaScript using try/catch/finally

The `Error` Object

As promised, we're going to take a closer look at the Error object that gets passed into the catch clause to see just what we can extract from it in an event of an error. The Error object in all browsers support the following two properties:

name: The name of the error, or more specifically, the name of the constructor function the error belongs to.
message: A description of the error, with this description varying depending on the browser.

try{
	document.body.filters[0].apply()
}
catch(e){
	alert(e.name + "\n" + e.message)
}

Six possible values can be returned by the name property, which as mentioned correspond to the names of the error's constructors. They are:

Error Name	Description
EvalError	An error in the `eval()` function has occurred.
RangeError	Out of range number value has occurred.
ReferenceError	An illegal reference has occurred.
SyntaxError	A syntax error within code inside the `eval()` function has occurred. All other syntax errors are not caught by `try/catch/finally`, and will trigger the default browser error message associated with the error. To catch actual syntax errors, you may use the onerror event.
TypeError	An error in the expected variable type has occurred.
URIError	An error when encoding or decoding the URI has occurred (ie: when calling `encodeURI()`).

This level of detail may be useful when you wish to sniff out a specific type of error in your catch clause. In the below, no DIV on the page exists with ID="mydiv". When trying to set its .innerHTML property, a TypeError occurs, since we're trying to assign the .innerHTML property to a null object:

try{
	document.getElementById("mydiv").innerHTML='Success' //assuming "mydiv" is undefined
}
catch(e){
	if (e.name.toString() == "TypeError"){ //evals to true in this case
		//do something
	}
}

Ok, so maybe it's not that useful most of the time, but you just never know.

Throwing your own errors (exceptions)

Instead of waiting for one of the 6 types of errors above to occur before control is automatically transferred from the try block to the catch block, you can also explicitly throw your own exceptions to force that to happen on demand. This is great for creating your own definitions of what an error is and when control should be transferred to catch.

To throw an error, invoke, well, the throw statement inside your try/catch/finally blocks. The syntax is:

throw myerrorobject

Where myerrorobject can in fact be anything from a string, number, Boolean, to a new or one of the 6 default Error Constructor functions. What myerrorobject is set to mainly just affects what error.name and error.message returns in your catch clause. Most commonly you would just throw a new Error object:

throw new Error("Oh oh, an error has occured")

Lets see a meaningful example of throw in action:

function entrycheck(){
	try{
		var agecheck=prompt("This movie is rated PG-13. Please enter your age before continuing:")
		if (isNaN(parseInt(agecheck)))
			throw new Error("Please enter a valid age")
		else if (agecheck<13)
			throw new Error("Sorry, but you are too young for this movie")
		alert("Enjoy the movie!")
	}
	catch(e){
		alert(e.name+" "+e.message)
	}
}

Try entering a none numeric value (ie: "haha") or a number less than 13 (ie: 11). In both cases, by using throw, control is instantly transferred to catch, with e.message displaying a different message. Technically entering a string or number less than 13 certainly doesn't constitute an exception in JavaScript, though for our purpose here, they should. That's how throw can be useful- when you need to specify your own parameters of what an error is inside try/catch/finally.

As mentioned, there are a number of other things apart from new Error() you can throw, which changes the contents of the error object passed into catch. The following are all valid throws:

throw "An error has occurred"
throw true
throw new Error("I detect an error!")
throw new SyntaxError("Your syntax is no good")

In the last instance, you can substitute SyntaxError with one of the 6 Error constructor function names to throw a specific type of error. In our age check example above, we could have thrown a SyntaxError when the value entered was a string, and a RangeError when the value was less than 13:

function entrycheck(){
	try{
		var agecheck=prompt("This movie is rated PG-13. Please enter your age before continuing:")
		if (isNaN(parseInt(agecheck)))
			throw new SyntaxError("Please enter a valid age")
		else if (agecheck<13)
			throw new RangeError("Sorry, but you are too young for this movie")
		alert("Enjoy the movie!")
	}
	catch(e){
		alert(e.name+" "+e.message)
	}
}

This has the effect of changing what e.name returns- SyntaxError and RangeError, respectively. If that's not enough, you can even throw a generic Error object with custom name and message properties:

throw{
	name: "JavaScriptKit Error",
	message: "Error detected. Please contact webmaster"
}

And with that we throw in the towel!