In CloudTest, we’ve built an error capture and reporting process similar to what you see in Apple’s crash reporting. If we detect an error, either on the server or in the client’s web browser, we’ll show an error dialog which allows the user to supply additional information and submit the error to SOASTA so our engineers can fix the problem. It’s been immensely helpful to find and diagnose bugs.
As an engineer, this can be a blessing and a curse. It means you’ll get lots of bug reports very quickly if you’ve got a problem. In Java land, on the server, this usually is great. We can capture detailed stack traces and attach the application server’s log files to the bug. This drastically reduces the time to research and reproduce bugs.
Obviously this is a very powerful tool, and is the crux of extensions like Greasemonkey. However, when wielded incorrectly, it can cause disastrous effects. Imagine a website that has code written specifically for Prototype JS, with lots of calls to the $ function. In Prototype JS this is a shortcut for document.getElementById(). In jQuery, the $ function returns the global jQuery object. If, for instance, you want to set an attribute on a DIV with id “hello”, you might write:
When this code executes after Prototype has been overwritten with jQuery, instead you’ll receive an error similar to:
Object [object Object] has no method ‘setAttribute’
This proved to be one of those non-reproducible head-scratchers for quite some time, until we could view this on a customer’s browser first-hand. 5 minutes of debugging showed a BitTorrent browser extension was spamming the entire global DOM with jQuery, after the DOM had loaded.
So – what to do? We aren’t going to go back and rewrite hundreds of thousands of lines of code to retrofit for jQuery, just so a customer can use a BitTorrent extension with CloudTest.
Instead, it’s a simple matter to detect this and give a friendly message suggesting the user disable browser extensions. In our error capture process (from window.onerror), there’s now a simple test:
if (typeof jQuery != ”undefined” && jQuery == $)
// show a friendly message and return.
Hopefully this will lend to less time scratching heads and more time writing cool new features.