Detect Error Type with JavaScript

By  on  

JavaScript error reporting and catching is important and will only get more important as our web applications become more feature rich and powerful. I have never used try/catch blocks in depth -- I usually just catch exceptions for stuff that's usually known to cause problems.

Remember this one from the IE6 days?

try {
 document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}

Boy was that fun.  Mobile Webkit used to (and still might) complain about using localStorage when the permissions are a certain way, so I'd try/catch that too:

try { // Adding try/catch due to mobile Safari weirdness
	if('localStorage' in window) {

	}
} catch(e) {}

But if you don't keep track of errors in your application, you're missing out on the instances where legit issues are occurring.  But how do you know what type of exception you've run into?  It's easier than you think:

try {
	eval('5 + / 3'); // will raise SyntaxError exception
}
catch(e) {
	// Compare as objects
	if(e.constructor == SyntaxError) {
		// There's something wrong with your code, bro
	}

	// Get the error type as a string for reporting and storage
	console.log(e.constructor.name); // SyntaxError
}

You can do object comparison if you plan to do something about the error based on type, or if you want to store that error information somewhere, you can get the exception name!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

  • By
    MooTools Text Flipping

    There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...

Discussion

  1. Damien Maillard

    I use e.name === 'SyntaxError' instead of e.constructor == SyntaxError something wrong with that?

    • Nothing wrong…

    • Ac Hybl

      I think the issue has to do with minification. If the code is minified in production, the constructor may be renamed to something else but the string it’s being compared to would remain the same.

  2. Simon Schick

    Why aren’t you using instanceof?

    • K

      I back your question. Isn’t this operator designed for just this purpose?

    • That works too!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!