jsErrLog : Tracking javascript errors

What is jsErrLog

If there is a javascript error on your page then your user sees it, but you don't know that there's a problem unless they contact you (more likely they simply close the browser and never come back)

jsErrLog is a self-contained service that captures the javascript error (so it doesn't scare the user) and sends the details back to the logging server so you can review (and resolve) the problem.

For Web developers you can think of it a light-weight javascript [Dr] Watson equivalent which gives you simple access to a limited set of SQM data.

jsErrLog is highly performant and is designed to fail gracefully - if there's a problem with the service it won't impact your application in any way.

Free, simple and fail-safe... and helps you deliver a better website. What more could you want?

You can find out more about jsErrLog via my blog posts, follow jsErrLog on Twitter or reach out with questions to Offbeatmammal on Twitter.

submit to reddit

Integrating jsErrLog into your site

The only work you have to do is add the following code to your site:
<script type="text/javascript" src="http://jserrlog.appspot.com/jserrlog-min.js"></script>
 
<script type="text/javascript">
// Configure site parameters
//jsErrLog.debugMode = true;
// Optionally add additional debug information to the jsErrLog.info message field
//jsErrLog.info = "Populated the Info Message to pass to logger"
</script>

If you want the page to still throw javascript errors locally just set the debugMode to true and errors will be reported and then passed back to the browser.

At any time in your script you can update that value of the jsErrLog.info variable and that will be passed through to the report (note: it is truncated at 512 characters to protect the POST limit of 2048 characters)


If you already have your own error trapping logic that connects to the window.onerror event simply make sure it has been defined before you include the jserrlog.min.js file and after reporting the error the details will be passed to your existing handler.

If you want to see what the javascript is doing remove the -min and review jserrlog.js

If you want to check responses from the service you can either monitor the replies from logger.js in a tool such as Fiddler or use the Network resources in your browsers Developers Tools capabilities to review the message returned:
Chrome Network view showing logger.js response

If you deploy the script anywhere I'd love to know. Please get in touch with me via this blog post and please follow jsErrLog on Twitter for updates (or offbeatmammal for more random stuff).

Sample Errors and Viewing Reports

To see error reports from your site go to http://jserrlog.appspot.com/rpt.html and enter the top level URL (eg http://blog.offbeatmammal.com) you want to examine

But what if you don't want a report on-screen? Well, fear not. We expose an XML data feed for your reports. If you know the URL you can access it directly eg http://jserrlog.appspot.com/report.xml?sn=http://blog.offbeatmammal.com or simply click the "XML" link from the on-screen report. You can also request that the XML is formatted as RSS by adding the type=rss parameter eg http://jserrlog.appspot.com/report.xml?sn=http://blog.offbeatmammal.com&type=rss or clicking the "RSS" link from the on-screen report.

You can see samples of the types of errors trapped here and here.

Caveats

Although this is stable and in production use today there are a couple of things you should be aware of:

The code

If you'd like copies of the javascript or back-end AppEngine scripts, or you have any comments on this please get it touch with me via this blog post. You can also find a version of it in the jsErrLog project on GitHub.

If you deploy the script anywhere I'd love to know what you're using it for and how it's helped you.

If you've found it useful would you consider supporting the service?

Thanks

The back-end code makes use of the excellent HTTPAgentParser to split out OS and Browser names and versions, and PagedQuery from He3 for pagination in the report view.

Code was edited using skEdit on OSX. The backend is Python and the front-end HTML and Javascript all running off Google App Engine. The client-side javascript library was minimized using Google's Closure Compiler

For developers who just need a simple tool for testing in Chrome, you should check out the great jsError extension.


jsErrLog is brought to you by an Offbeatmammal. If you've found it useful would you consider supporting the service, either via my Amazon Wishlist or the link on the right?