Andreas Grabner About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

Uncover JavaScript JSON Parsing errors with IE Compatibility Mode

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.

 

Comments

  1. It would be great if there was a module in dynatrace allowing to swithc betten browser version. Solutions like IEcollection do not work properly, and installing/uninstalling by hand is a bit slow…

  2. Nice post thanks for sharing

  3. cool sharing

  4. JSON doesn’t allow trailing comma, or not quoted attribute names, so that JavaScript object is not in a valid JSON format.

  5. @Peter:correct. interesting fact though is that certain javascript parser will accept it. So-if you make the mistake like we did and dont test it on older browsers you will end up with incorrect javascript that works on many browser but not on all. thats the lesson we learned here

  6. Robby Pelssers says:

    When working with Json it’s always good practice to validate the quality of your data using JSLINT or other JSON online validators. Personally I never count on browsers to fix these kind of errors.

Comments

*


four + 7 =