Capturing client side JavaScript errors for later analysis

We’re getting close to pushing an application to a larger set of test users, and we’ll be interested in what happens when a larger variety of machine configurations (browsers and operating systems) and of course user actions encounter errors.

We started with simply catching any server side errors, and log them to a single database table (separate database to application).

To achieve this part of it, it is simple as having a very lightweight database connection mechanism to insert this log entry record, this way if there was an error with our applications standard database access mechanism we could also capture that.

In this fashion we can be reasonably sure that anything short of major production environment failure (network infrastructure / machine specific) that we’ll be able to capture errors while the system is being used. Those types of issues will be handled differently.

Then we realised it would be just as helpful to capture and store client side JavaScript errors in a similar fashion.


The JavaScript error handler looks like this, making use of window.error:

window.$debug.globalErrorHandler = function () {
  window.onerror = function (m, u, l) {
      url: '/Error/Occurred',
      type: 'POST',
      dataType: 'json',
      data: JSON.stringify({ errorMsg: m, url: u, line: l, uri: window.location.href }),
      contentType: 'application/json; charset=utf-8',
    return true;

An extra note here is I came across a JS library that offered a common ‘printStackTrace()’ method. Created by Eric Wendelingithub project. Which doesn’t work how I would have hoped it would have worked in our global error handler, but that’s the nature of the error handler event.

Never the less it does look quite helpful, to make use of it you need to have a specific try { } catch { } block around something that may fail. Checkout the readme on the github project page.

Back to the main focus of this post…

We can also decide to call $debug.globalErrorHandler() method in some central part of the web application, so that later it doesn’t have to be always turned on.


The MVC side of this is even simpler, since our users are logged in while using the application, we have ‘context’ information about them, so that’s one extra useful piece of information we can capture as part of the error.

public class ErrorController
  public void Occurred(ClientSideJavaScriptException error)
    // this context in our application represents the user, so we know who experienced the error.
    error.User = _userContext.UserName;

    // we send this off elsewhere to be persisted, you could simply persist it here

The ClientSideJavaScriptException class simply has the properties required to send over the information from the ajax post.

public class ClientSideJavaScriptException
  public string ErrorMsg { get; set; }
  public string Url { get; set; }
  public string Line { get; set; }


Finally the persistence logic here is via the Micro.ORM NPoco selected because Adam said it was good 😉 and the Nuget Package helped.

Db = new Database("configuration_key_name");

Db.Insert(new Details
  OccurredWhere = "client-side-js",
  ExceptionMessage = errorDetails.ErrorMsg,
  When = DateTime.Now,
  StackTrace = errorDetails.Stack,
  Method = "Line Number:" + errorDetails.Line

REMIX Melbourne 2010 Day 1

Michael Kordahi, Foxtel (Patrick Delany), Shane Morris & Others

remix keynote

The keynote began with a presentation from Foxtel about improving the “dumb box” that’s plugged into your TV. Foxtel through a partnership with XBOX Live (and Microsoft) is attempting improve the user experience in the home when it comes to pay-television. They are following the “three screen and the cloud” strategy that Microsoft is currently engaged in.

This lead into a demo of using the Microsoft Surface to interact with various Foxtel services. The objective being that the Microsoft Surface can be one of the three screens. A more social experience to support discussion and digital interaction between people (once the Surface less financially inhibitive). The demo consisted of an application that allowed for interaction between a Windows Phone 7 device, the Surface and a slate like device, where-as the device would detect proximity/engagement in another digital activity (in this case watching Foxtel). Then subsequent devices (the slate) would offer to assist in the interaction, by offering supporting information, show/character information, maps of locations and other rich interactions.

The second half of the keynote was a few short introductory sessions on;

  • IE9 – Features/demos and road-map.
  • Expression Blend – Some new features in 4.
  • User eXperience – Sneak peak at Shane’s session.
  • Microsoft Live Labs Pivot – Introducing OData.
  • Windows Phone 7 – The developer experience.

Summary line: The objective is to create an ongoing journey on the web (and not be focussed simply on destinations).

Session 1
“The Microsoft & jQuery story & the new templating plugin”
James Senior

James Senior First Date

James started talking about the focus shift of Microsoft towards open source projects and how they are contributing to jQuery (this was announced at Mix in March 2010). This came about from the ASP.NET Ajax library that MS was working was a prime candidate for integration with jQuery (through contribution). James had a great story about John Resig “assisting him” with some code, John achieved this by first doing a select all followed by hitting the delete key then refactoring from memory, James was amazed.

From this there were some tips for “good relationships” in terms of contributing to software:

  1. Clear contribution model.
  2. Open, transparent, collaboration.
  3. Community spirit.
  4. Specification and proposal.
  5. Prototypes.

The rest of the session was focussed on using Visual Studio 2010 to assist with JavaScript. James outlined how VS2010 compiles the JavaScript dynamically on the fly to offer intellisense. This was done through (the very popular for demos approach) of implement a Twitter search application. In relation to this James suggested we check out; Hootsuite – a based twitter client. Also to stay away from global trending topics on twitter 😉

The use of the twitter search demo application was focussed in particular to demonstrate the initial contribution Microsoft is undertaking for jQuery – Templating. Which is a feature to assist with displaying/rendering data from a source, via a new render() method.

James had a plug for Microsoft Web Camps, and from what he had to say about it, if there’s one near you attend if you can, it’s free. After the US summer there’s plans for more around the world…

Session 2
DotNetNuke: From opensource to VC funded corporation
Philip Beadle

phil and the pie

This was a very different session that the usual one (and in a good way). Phil gave some insights into the history and how it relates to his adventure with DotNetNuke. It started as early as 2001,2002 as an open source CMS. A few years ago had grown a company paying 7 employees offering support and other services in relation to DNN. It has in the present day reached around 40 paid employees after a few rounds of venture capital funding and is a fully fledged company. Phil had some advice for “getting paid in open source”, this was a general topic and in response to a direction question. Phil’s discussion was along the lines of; ensure the “pie” is large enough so that your piece is as good as having a whole pie… The rationale behind this was, if it’s a large pie with lots of contributors the burden on the individual is less when compared to being responsible alone for an entire pie.

Phil shed some insights from his extensive experience; these are the key takeaways for a successful open source product:

  • Need a good dedicated thick skinned leader.
  • Protection of code and community is essential.
  • Communication is key.
  • Recognition for those that help and further engage/promote (give kudos).
  • Documentation is necessary.
  • Always offer an upgrade path for users of your product.

Session 3
Architecting for the Cloud
Steven Nagy


Steve after introducing Windows Azure, focussed on some real world case studies of companies making use of the cloud, in particular the Azure platform to grow and improve their business.

Case studies:

  • Company: Connect2Filed. Service: job/customer/billing management internal Software as a Service.
  • Company: CaterExpress. Service: foodstorm. Software as a Service customer and food management application.
  • Company: Buzz number (BizSpark start-up). Product: – sophisticated blogging search engine / aggregator

Scaling considerations, typically 4 types

  • On/off (typical business hours, localised to only a few timezones).
  • Grow fast (startup).
  • Unpredictable (slashdotted).
  • Predictable (peak times of year).

Takeaways about Azure as a hosting platform

  • Potentially cheaper.
  • Easier (helpful for a start-up).
  • Less risk (redundancy taken care of for you – 3 factor redundancy).
  • Scalable.

Session 4
Malcolm Sheridan

malcolm head down

Malcolm ran through an MVC 2 demo application, focussing on:

  • Strongly typed helpers.
  • Templated helpers.
  • Metadata classes (and validation).
  • Areas (areas in different projects is available in the ASP.NET MVC futures).
  • Security (via auto html encoding – “&lt%:” and MvcHtmlString as the return type for helpers).
  • Improved RESTful approach (via HttpMethodOverride eg [HttpDelete]).
  • DefaultValueAttribute.
  • Shortened HTTP verbs.
  • ChildActionOnly actions.

I’ve scattered some links throughout the list above, check out those references.

Also checkout this white paper on what’s new in ASP.NET MVC 2.