Watson for the web – trapping Javascript errors

A while ago I wrote a small piece of JavaScript code that I needed to be able to integrate into lots of different sites to help streamline the Silverlight experience, but it was important that I didn’t break anyone’s existing code.

While we did extensive testing with the partners before we deployed it there was always the worry that a combination of browser and OS and plug-in we’d not tested would cause a problem we’d not foreseen.

As websites get more complex, and HTML5 brings more of the heavy lifting back to rely on JavaScript to build really dynamic experiences so my little nagging concern was just going to keep on getting bigger.

While you can wrap every statement in a Try…Catch loop and deal with exceptions that way it’s not the most efficient, and if you’re integrating libraries from a  lot of different sources then it’s not really practical.

As luck would have it two of the browsers had already implemented the key to the solution… the humble JavaScript window.onError function. In IE and Firefox it allowed you to attach an event handler that would kick in whenever an un-trapped error occurred and allow you do to whatever you needed to manage the problem.

I took that functionality and build a small script that could be injected via a single line of JavaScript into the page you want to monitor that would catch any unhandled error condition and report back to a remote cloud service the script, the error, the browser and OS versions so a developer could quickly and easily re-create the test scenarios. The code is available at jsErrLog.

Then because Chrome, Safari and Opera didn’t support the onError function I rather shelved the project. Just a few days though with the release of Chrome v10 another browser could be added to the support matrix for remote error reporting (and as the fix is in the WebKit core we can only hope that a release of Safari greater than v5 will roll out support as well)

While I wait for Safari and hopefully Opera to catch up with this I’m making a couple of other small tweaks to the code to make it a bit more reliable, as well as adding some extra functionality to allow developers to pass additional information back to the reporting database to help with debugging their specific apps.

Check it out , kick the tires and let me know if you have any feedback…

11 Responses to “Watson for the web – trapping Javascript errors”

  1. Jens Rantil Says:

    Hi,I just stumbled across you service jsErrLog. Are there any restrictions on using, altering etc. the original script (http://jserrlog.appspot.com/jserrlog.js) for ones own purposes?Thanks,Jens

  2. offbeatmammal Says:

    Hi Jens,No restrictions at all, though I’d love to know what you use it for and any fixes / improvements I could add back in to the original.If you want any other pointers or help understanding what the script is doing feel free to reach out – either here or via twitter etcOh, and donations always welcome, but by no means required (I’ve also got an Amazon wish list!)๐Ÿ™‚

  3. Anonymous Says:

    Hi Jens,No restrictions at all, though I’d love to know what you use it for and any fixes / improvements I could add back in to the original.If you want any other pointers or help understanding what the script is doing feel free to reach out – either here or via twitter etcOh, and donations always welcome, but by no means required (I’ve also got an Amazon wish list!)๐Ÿ™‚

  4. Jens Rantil Says:

    Hi again!I’m considering modifying it and putting it on Github so that you can you can take part in improvements! I promise I’ll notify I walk down that path!As to donations I get the hint๐Ÿ˜‰ I’m not the one taking care of money at my company, but if we find your sscript useful I will do some lobbying!Regards,Jens

  5. Jens Rantil Says:

    Oh, and I apologize for all the exclamation marks. Rereading my post I realize I was all too excited./J

  6. Jesse Says:

    Hello,I just set up your code on my local server and I like what I see, but I’m slightly concerned that it might only be catching the first error. Is there a way to tell if the app will continue to function and report additional errors or if it’s dead after the first one?Many thanks.

  7. Anonymous Says:

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml&quot; xmlns="http://www.w3.org/TR/REC-html40"&gt; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="Microsoft Word 14 (filtered medium)"> <!–[if !mso]><style>v:* {behavior:url(#default#VML);} o:* {behavior:url(#default#VML);} w:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style><![endif]–><style><!– /* Font Definitions */ @font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;} @font-face
    {font-family:Tahoma;
    panose-1:2 11 6 4 3 5 4 4 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0in;
    margin-bottom:.0001pt;
    font-size:12.0pt;
    font-family:"Times New Roman","serif";} a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:blue;
    text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:purple;
    text-decoration:underline;} p
    {mso-style-priority:99;
    mso-margin-top-alt:auto;
    margin-right:0in;
    mso-margin-bottom-alt:auto;
    margin-left:0in;
    font-size:12.0pt;
    font-family:"Times New Roman","serif";} span.EmailStyle18
    {mso-style-type:personal-reply;
    font-family:"Calibri","sans-serif";
    color:#1F497D;} .MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri","sans-serif";} @page WordSection1
    {size:8.5in 11.0in;
    margin:1.0in 1.0in 1.0in 1.0in;} div.WordSection1
    {page:WordSection1;} –></style><!–[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]–><!–[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]–> </head> <body lang="EN-US" link="blue" vlink="purple"> <div class="WordSection1"> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;;color:#1F497D">Depending on the browser it *<b>should</b>* function as you hope ??? at the end of the onError routine control is passed back (that???s how I allow it to continue on to any existing error handlers you had before the script was added) but it???s an interesting test case??? I???ll have a look at creating a sample that illustrates that<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;;color:#1F497D"></span></p> <p class="MsoNormal"><b><span style="font-size:10.0pt;font-family:&quot;Tahoma&quot;,&quot;sans-serif&quot;">From:</span></b><span style="font-size:10.0pt;font-family:&quot;Tahoma&quot;,&quot;sans-serif&quot;"> Posterous [mailto:</span></p></div></body></html>

  8. Jens Rantil Says:

    Hi Jesse and offbeatmammal,I just created a sample of this. Check out the "multiple_errors_demo" branch here: https://github.com/JensRantil/jsErrLog/tree/multiple_errors_demo and open up "src/demo/index.html". It is a useful demo to verify that jsErrLog works as expected on multiple browsers.As soon as my other small pull requests goes through I will make a rebase and a pull request to get this branch into offbeatmammals master branch.Regards,Jens

  9. alexlehm Says:

    Hi, I just tested the app on my (rather small) web page, this looks pretty good. I am usually implementing tags on the page with googletagmanager (since I am lazy), that didn’t work with the jserrlog tag for some reason, even though it looks like it should work since it doesn’t use any unusual function that could break gtm.
    In the rss feed I think the link tag is wrong, it points to jserrlog.appspot.com/path instead of http://www.lehmann.cx/path, meaning that the links will not work.
    Anyway, great tool, I will try to implement it on a “real” site, probably with a redirected reporting host.

  10. Kurt Snyder Says:

    Do you know if this library works on Apple TV (and it’s non-standard JS implementation)?

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


%d bloggers like this: