Fail Safe Javascript

Javascript is probably THE language of the web. You can create awesome user experience on top of your – already awesome design – but you can also drive users to hate you and your site.

As a programming language it has to run to keep the things doing, but it is also very temperementfull when it breaks.

Javascript errors in production environments are the most bad thing that can happen to your customers, his users and you as a developer. You have to act immediately to find, understand and fix the error. This is my personal horror scenario as I dislike working under pressure and probably creating new errors while fixing that one.

Wouldn’t it be wonderfull if your javascript fails safe without annoying the user?

And wouldn’t it be fantastic if you get the information about the error before the client calls you to complain that something’s not working properly?

Yes, definetily! But how can we do that?

Fail Safe Javascript – The Lazy Way

The laziest way to fail safe your code is to wrap all your javascript into a try – catch block.

try {
  //Run some code here
} catch(err) {
  //Handle errors here
}

If the try block fails, all your javascript is disabled and the result is a poorer user experience.

You can go further and nest more try – catch blocks to subs of your code but this ends in a very hard to maintain code with a lot of opening and closing parenthesis you have to respect.

try {
  //Run some code here
} catch(err) {
  //Handle errors here
  try {
    //Run some nested code here
  } catch(err) {
    //Handle nested errors here
  }
}

And its not lazy any more ;)

Fail Safe Javascript – The Blind Way

When you are the only developer working on a project you know which libraries, plugins and methods are included. But if you work in a team it gets a little bit harder to find out what capabilities your web app depends on (and there are huge disctinctions in the capabilities of your users content comsumption devices).

And this is exactly how the lonely .js-file in your web app feels. It has no eyes, no ears. The only thing it has is its ability to test for dependencies. And it’s so easy to check them.

How do I check for jQuery?

if ( typeof( jQuery ) != ‘undefined’ ) {
  // Run jQuery code here
}

Ok, but I need a appropriate jQuery version…

if ( typeof( jQuery ) != ‘undefined’ && parseFloat( jQuery.fn.jquery ) <= 1.4 ) {
  // Run jQuery code that requires jQuery 1.4 or higher here
}

Nice, but what about Plugins?

if ( typeof( jQuery ) != ‘undefined’ && typeof( jQuery.fn.plugin ) != ‘undefined’) {
  // Run jQuery code that requires jQuery and the plugin here
}

Fantastic, and how Do I get the information if something fails?

Fail Safe Javascript – The Calling Home Way

Well, I need to think a little bit more about this solution (and there is sure coming an article on this) but basically it calls a method (e.g. AJAX post request to server with attached objects).

if ( typeof( jQuery ) != ‘undefined’ && typeof( jQuery.fn.plugin ) != ‘undefined’) {
  // Run jQuery code that requires jQuery and the plugin here
} else {
  callHome(jQuery,jQuery.fn.jquery,jQuery.fn.plugin);
}

Summary

It isn’t that much of an effort to add little fail safe mechanism to your javascript. You can drive it even further and check browser capabilities with modernizr, head.js or your own methods.