With the advent of Ajax comes the pain of client-side development.  Tools for Javascript just never seem as robust as their server-side counterparts.  The VS2k5 IDE is actully a decent debugger, but what do you do when your end users get the error?  On the server, we just catch it, and use Log4Net to alert the devlopers and store the details.  It sure would be nice to do that in JavaScript, wouldn't it.  Enter Log4Javascript.

Log4Javascript is just what it sounds like - a Javascript implementation of the Log4Net (or Log4J) logging APIs.  Visit Tim Down's site today and download it; you'll be glad you did.

It is implemented very simlar to the way you'd use log4net:  reference the library, set up your appenders including levels, and then call the usual INFO, WARN, etc methods.  The appenders come in just a few flavors, but enough to make it really useful: the InPageAppender and AjaxAppender are enough to make it sweet.

The InPageAppender logs methods to a (very nice) console window with the page.  There's a property to keep the console window hidden so the user doesn't have to see it.  We use this with a DEBUG level so everything gets sent there.  When you want to see it, you can just make it visible again by entering the appropriate javacript in the address bar like:

java_script:$show('consoleDiv');

You did know that you can execute JS in the page context using the address bar didn't you?  Try it now.  Enter “BLOCKED SCRIPTalert('Hi There');” in your address bar and see what happens.
I use this to diagnose issue on the end users' machine that I can't recreate on my own.  I'm lucky enough (ahem) to have end users right down the hall.

The AjaxAppender is where it gets really sweet.  I created an asmx web service file right inside my ASP.Net site that is just a wrapper for normal server log4net calls.  The web service uses the normal appenders for my app like the email appender and database appender.  I point the AjaxAppender at my webservice and voila I've got Javascript logging to the same output as my C#.  It's like freaking magic.  Thank you Tim!

And it gets even better.  In my web service, I have custom properties set using Log4Net's LogicalThreadContext like url, Request.*, etc tat log4net doesn't catch on its own.  Since Log4Javascript is really logging to my database via my web service, all those values are populated as well.  So I get all the page context goodies that Javascript can't access on it's own.

One last nugget, since I have lots of old pages I want to take advantage of this in, I need an easy way to get the basics up and running without touching reams and reams of old client event handlers.  (Don't forget that JavaScript supports Try...Catch!)  That's where the window.onerror client event comes in.  It catches any unhandled events on the page.  You can call it thusly:

There's even a few helpful params in there!

The whole initial setup, minus editing existing pages, should take less than an hour.  So, with minimal effort, you can add some respectable troubleshooting and debugging to your Ajax and client-side events.