I thought I'd write this short article about how we fixed a nasty bug at Browserling together with my friend James Halliday yesterday.

Long story short we were testing Browserling in the latest FireFox and we got this nasty exception that said:

uncaught exception: [object Object]

Here's how it looked in Firebug:


uncaught exception: [object Object]

FireBug didn't show the line number where it was thrown from and we couldn't find a way how to make it show the stack trace. We tried stepping through the code and setting breakpoints at some potential locations but didn't get us anywhere.

We were stuck and annoyed.

So we came up with a very hacky Perl one-liner that appends a console.log to almost every function definition:

perl -i -pe 's/function.*{$/$&."\n console.log($.);"/e' bundle.js

What this one-liner does is it finds all lines that have string function in them and that end with { and appends a console.log with the current line number to the beginning of the function.

For example, this code piece:

function foo (x) { 
   return 50/x;
}

Gets rewritten as:

function foo (x) { 
console.log(1);
   return 50/x;
}

Our thinking was that we should get the line number of the last function call before the exception was thrown or some function call nearby.

And it worked!

We refreshed Browserling and we got an awesome trace with lots of line numbers followed by the same uncaught exception error:

...
11248
11157
11257
11147
uncaught exception: [object Object]

Here's how it looked in FireBug:


lots of console.log's with line numbers followed by uncaught exception error

Next we checked the line 11147 in the original file (line 11914 in the updated file because the one-liner offsets line numbers) and we found the exception that we were looking for:

error = function (m) {                                                                                                 
    // Call error when something is wrong.
    throw {
        name:    'SyntaxError',
        message: m,
        at:      at,
        text:    text
    };
},

A fix quickly followed and we got Browserling working in the latest FireFox! Until next time.

Comments

January 16, 2014, 01:52

Is there a reason you were unable to use the 'Pause on all exceptions'?

http://cl.ly/image/1W2R3h1E3p2d

January 16, 2014, 02:06

We did that but it was pausing only once at this completely different exception that was wrapped in a try/catch. It never paused at that last exception!

Patrick Kettner Permalink
January 19, 2014, 01:58

oh gosh, that sounds bad. Did you file a bug for the firefox dev team? I'd love to follow up with what happened there.

January 23, 2014, 23:17

Nice one :)

Dev Permalink
January 16, 2014, 05:44

If this was any other language and you did this to debug an issue, you would be accused of blasphemy. But for javascript, this might become a good practice for debugging :D ... thanks for sharing!

January 16, 2014, 07:34

Hey kit, you should add an s to those regex flags so blasphemous people who put a newline before their opening brace can use it too

steven haryanto Permalink
January 16, 2014, 18:25

Surely you don't have to introduce line-number offsets? You can put multiple statements in onr line with ; as separator.

March 23, 2014, 02:48

Great post. I have enjoyed by read. Thanks

Freida Bowlby Permalink
April 04, 2014, 14:36

Those people who are studying or attached with education department know very well that students have to prepare some papers for getting good grades. I have a good tip for students to bring professionalism in their writing by employing cheap essay writing services online where professional writers are ready to help you guys in writing papers as well as provide helpful tips.

Leave a new comment

(why do I need your e-mail?)

(Your twitter name, if you have one. (I'm @pkrumins, btw.))

Type the first letter of your name: (just to make sure you're a human)

Please preview the comment before submitting to make sure it's OK.

Advertisements