We just launched our new corporate web site. Right after the site went live it was time for me to analyze its performance with our dynaTrace AJAX Edition. Everything looked good – no problems on the page -straight A’s on the Performance Report (read more on this on my blog How we improved our Performance Rank from D to A):

Performance Report showing good grades on newly launched dynaTrace Web Site
Performance Report showing good grades on newly launched dynaTrace Web Site

BUT – Then I browsed to our web site without dynaTrace AJAX enabled I noticed a JavaScript error indicated by the little icon in the IE Status Bar – the dynamic JavaScript menus also stopped working.

Error indicating a JavaScript parsing error
Error indicating a JavaScript parsing error

I retried it with the dynaTrace AJAX Edition and – guess what? It worked again. Why is that?

JavaScript parsing error in IE7 for JSON Objects

The following piece of JavaScript caused an error in my IE8 on Win7:

$('img[title],map[title],.tip').qtip({
 style: {
   name: 'dark',
   tip: true,
 } ,
 position: {
   target: 'mouse' ,
   adjust: {screen:true,x:10,y:10}
 }
})

The error message says “Expected identifier, string or number” and points to the line right after “tip: true, “. The problem is the comma after true which causes older JavaScript engines to throw an error. Newer versions of IE and other browser such as FireFox or Chrome don’t seem to have a problem with this JSON format. The fix is to remove the comma at the end to also make it work on my machine.

Even though we found a solution to this problem two questions were still in the air:
a) why does the same problem not occur on the machines of my colleagues?
b) why does the problem not occur when using dynaTrace AJAX Edition?

IE Compatibility Mode

I usually run my IE8 on Win7 in Compatibility Mode – which instructs Internet Explorer to act like IE7. I do it on purpose in order to analyze performance problems on web sites that only happen on older versions of IE. Not everything in Compatibility Mode really works like IE7 – but it is close. The fact that I used the Compatibility Mode and my colleagues either used IE 8 without this mode or other browser such as Firefox, Chrome or Safari explains why only I ran into this problem. The JavaScript parser of IE8 seems to be more aligned with what other browsers do whereas IE7 (and I assume IE6 as well) may run into problems like this.

Lesson learned: test with multiple browser versions!!

Enabling IE Compatibility Mode to simulate IE7 behavior in IE8
Enabling IE Compatibility Mode to simulate IE7 behavior in IE8

dynaTrace AJAX uses Rhino when instrumenting JavaScript

When dynaTrace AJAX is active it instruments JavaScript files that get loaded by the browser. We use the Rhino JavaScript Engine to parse and modify JavaScript before generating the modified JavaScript file that we pass on to the browser. Rhino can handle the extra comma at the end without any problems. When we generate the modified JavaScript we use Rhino’s object representation of the parsed JavaScript instead of the exact original version of the JavaScript file. This explains why this problem did not happen when dynaTrace AJAX was active as we did not preserve the comma. dynaTrace AJAX keeps the original file which can be viewed in either Network of PurePath view. Via the context menu in the text editor you can switch between “Formatted” and “Original”.

Lesson learned: perform functional tests on multiple browsers with and without additional diagnostic tools!!

Switch between Original and Formatted Code in dynaTrace AJAX Edition
Switch between Original and Formatted Code in dynaTrace AJAX Edition

Test with multiple browsers

This story is another proof for the point I often make when talking to Web 2.0 Developers. It is important to test all different types of browsers that your end users will use to check out your site. It’s best to have a good mix of browsers and operating systems in your Dev and Test team to make sure you cover the major browsers out there.