BSOD Error Reporting

Intended audience

Web developers with an intermediate to advanced knowledge of XHTML, CSS, Javascript and Windows 95

Introduction

The script BSOD.js provides an easy-to-use class to boost the error reporting user experience of your websites.

To fully understand the characteristics of this technique please refer to this external article

Advantages over other error reporting methods

The advantages are many to both the user and developer.

To the user

  1. It makes it unclear what triggered the error. See developer advantages #1 and #2

  2. By default, it's easy on the eyes and it succeeds at alarming and fazing the user 99% of the times.

  3. Users are likely to exit your application or website, giving you plenty of time to fix it.

To the developer

  1. Simple syntax. Just call window.bsod() and a default, unspecific and unhelpful message is shown. You can also pass options to change the message or remove it completely.

  2. Can hide what really is wrong by using MooTools delay, showing the error seconds or even minutes after something went wrong.

    window.bsod.delay(2000);
    run example

  3. It works with every layout and browser. It brings the beauty and innovation of Windows 95 to other platforms, perfectly simulating the user experience.

  4. Supports events to extend its functionality. An example of encouraged integration with the excellent window.shake() by Jan Kassens:

    window.bsod({ onClose: function(){ window.shake(100); } });
    run example

Disadvantages

No criticism or rejection has been perceived in response to this technique, despite its long existence.

The usability tests conducted show extraordinary levels of acceptance.

Improvements

Fallacies

You can make up false explanations, or even better, blame it on another unrelated cause. To fool even the smartest hackers, we recommend integrating David Walsh's Spyjax script. This component enables you to detect whether the user visited a specific site or not, so that we can blame the error on it.

var urls = ['php.net', 'google.com', 'yahoo.com', 'facebook.com', 'digg.com', 'flickr.com', 'msn.com', 'gmail.com', 'othersite.com'];
var known = [];
urls.each(function(url) {
	var anchor = new Element('a', {
		'href': 'http://' + url,
		'class':'checkme',
		'html':url,
		'styles' : {
			'display': 'none'
		}
	}).inject(document.body);
	if(anchor.getStyle('color') == '#ff0000') {
		known.include(anchor.get('text'));
	}
});

window.bsod({ html: known.length ? 'The site ' + known[0] + ' triggered a segmentation fault. Abandoning ship.' : '' });
run example

Style customization

Why not take it to the next level? While the default blue style has undoubtedly passed the test of time, there's still room for innovation

window.bsod();
$('bsod').setStyle('background-color', 'red');
$('bsod').getElement('h1 span').setStyle('color', 'red');
run example

Dependencies

BSOD.js depends on the MooTools framework to function. Ports to other frameworks are both welcomed and encouraged.

Credits

The plugin has been authored by Guillermo Rauch, and is released under the MIT license.