Debug syntax error in ajax loaded module

Ok so your using a modern app framework in javascript that loads javascript using ajax and executes it using eval. One issue that can arrise is when you have a syntax error in the javascript, all you get is an exception thrown with a hit at what the error was about (for example, illegal token or symbol). What you don’t get is the line number in the code where the problem occurred. So what do you do?

Well if you have just been changing the code, the odds are almost certain that it was your last change that broke the code so start there.

Failing that, look at the details of the exception, and try and look for an instance of that in your code (e.g. with an exception ‘unexpected token <<' try looking in your code for uses of the << symbol.

If there are just too many instances or the error is too vague, as was the case I just had (I didn't have a << token in my source code) I used string splicing and binary chop to track down the problem. So what I did was, I ran my code under chrome with the debugger open. I had the pause on uncaught exceptions button set, and ran the code.

The debugger breaks at the point of the exception, I now have the problem code in a variable (in my case __text). So to track the problem down, first get the source length:-

__text.length
52024

Then I start a crude binary chop:-

eval(__text.substr(0,25000)
SyntaxError: Unexpected token <<

So the problem is in the first 1/2 of the file, so I proceed with the binary chop

eval(__text.substr(0,13000))
SyntaxError: Unexpected end of input

The error has change, so the error is between these two points, continuing with the binary chop

eval(__text.substr(0,19000))
SyntaxError: Unexpected token <<
val(__text.substr(0,16000))
SyntaxError: Unexpected end of input
eval(__text.substr(0,18000))
SyntaxError: Unexpected end of input

So we now know its between position 18000 and 19000, homing in still further

eval(__text.substr(0,18500))
SyntaxError: Unexpected token <<
eval(__text.substr(0,18200))
SyntaxError: Unexpected end of input
eval(__text.substr(0,18400))
SyntaxError: Unexpected end of input
eval(__text.substr(0,18450))
SyntaxError: Unexpected token <<
eval(__text.substr(0,18420))
SyntaxError: Unexpected end of input
eval(__text.substr(0,18440))
SyntaxError: Unexpected token <

So it looks like the problem is at position 18440, I could confirm this by testing up substr(0,18441) to see the full unexpected token message.

Now that I know where in the code the problem is I can print it out

__text.substr(18420,40)

"nfig.serviceURI) {
<<<<<<< .mine
conf"

And I can see from this code fragment that the problem is because of a merge conflict in this particular install of the code, which I can now go away and fix.

Had I been able to look at the source directly on the server, searching for << in the code would have found the problem much quicker, but even though I did not have access to that code at the time, I was still able to find out what the problem was.

Actually I could have done the following in this case to find the issue instead of the binary chop

__text.indexOf("<<")
18439

but this would not be helpful for instance if the unexpected token was much more common in the source, for instance, unexpected token , (comma). There are likely 100s of commas in the source.

Advertisements

About austinfrance

Technical Developer @ RedSky IT / Explorer Software
This entry was posted in debugging, JavaScript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s