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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Table Cell and Position Absolute

    If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element.  Chrome?  Check.  Internet Explorer?  Check.  Firefox?  Ugh, FML.  I tinkered in the console...and cussed.  I did some researched...and I...

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

    • 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.

  1. 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!