Tuesday, July 29, 2014

Using Track:Js for a Legitimate Error

Using Track:Js, it's becoming clear there are two kinds of JavaScript errors:

  • Non-legitimate ones.  These are caused by buggy browsers or their respective plugins.  They usually don't affect site performance at all.
  • Legitimate ones.
The trick is deciding which category your error belongs to.   That's an art, and there are no hard and fast rules.  But there are some good heuristics, and Track:Js definitely helps you out there.  

I get a daily summary email from Track:Js with statistics and the top errors.  This morning I found:


The TypeError: 'undefined' is not an object error interests me a little.  It's a little generic, and generic errors are harder to track down.  But it "feels" like an error I'd make.  So I click on that error to get the hits in the Track:Js dashboard.

So here I got three errors around 5:11 on the same page, but with a legitimate modern browser.  (I do not consider WebThumb a legitimate one, nor ones like IE 5.)  So I pull it up in my browser of choice, Chrom on Ubuntu.  Sure enough the console says:



Which brings me to the most important differentiator of legitimate and non-legitimate bugs:
If it doesn't work in MY browser, it's a legitimate bug!
OK, that's kind of flippant.  But the next time I touch this page, I won't know if the bug is caused by my changes or not.  So I had better fix it.

Fortunately, Chrome gives nicer error messages than Safari, so I can Google this particular problem.  Searching for Cannot read property msie of undefined I get the following helpful post:

http://stackoverflow.com/questions/14793331/uncaught-typeerror-cannot-read-property-msie-of-undefined

And basically it confirms what I've run into before about jQuery.  Something is trying to use an old, deprecated-then-removed feature, and it looks like jquery-ui is the culprit.  Nicely, Track:Js tells me all the versions of the libraries that are loaded:

So we're trying to use jQuery 1.11 (a very new version at the time of this writing) with jQuery-UI 1.8 (which was released around 2010 or so).  I check the page source and find we're not loading jQuery-UI on our own.  Instead, it seems to be coming from the OpenTable script we're loading.  

After a few minutes, I find I can just pop in the jQuery Migrate plugin to make jQuery-UI 1.8 and jQuery 1.11 play nice together.  That's just:

<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js">

The error disappears from Chrome, so I release it to the wild.  Track:Js helped me in a couple of different ways here - not just identifying the error but providing me some good info on the context around it.  




No comments: