Aliaspooryorik
ColdFusion ORM Book

Logging Client side errors with Hoth

A while ago I saw a post entitled Client-side error logging with Google Analytics, and the guys on the cfhour podcast discussed it in Show #142. The post describes how to use Google Analytics to log client side error messages which is a neat and easy to impliment solution. However, I use Aaron Greenlee's excellent Hoth project for handling error reporting and wanted to keep all my error logging in one place.

JavaScript errors can be trapped in most browsers by using the window.onerror method (more info here). Hooking this up to Hoth turned out to be surprisingly straightforward, as Hoth can accept a simple struct. Here's how I did it:

JavaScript to include on each page (you want to track errors on)


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// log errors to Hoth (serverside)
window.onerror = function(message, url, linenumber) {
var e = {message:message, url:url, linenumber:linenumber};
if (typeof jQuery != 'undefined') {
var jqxhr = jQuery.ajax({
type: 'POST',
url: 'MyRemoteProxy.cfc?method=logClientSideError',
data: e
});
}
return document.domain !== 'localhost'; // true stops errors being shown to the client
}
</script>

window.error accepts 3 arguments which describe the JavaScript error, they are: message, url and linenumber. All I do is convert these to a simple JavaScript object and using jQuery's ajax functionality, I post it to a method in a server side CFC. Of course, you may not want to rely on jQuery, but that would require more code and may cause some cross browser compatibilty issues. Finally, the return statement checks to see if the site is running on my localhost, if it is then I get to see the JavaScript error in my browser (as if I hadn't implimented an client-side error handler), if it's not localhost then the error is suppressed.

The MyRemoteProxy.cfc looks like this:


component {
remote any function logClientSideError( message, url, linenumber ) {
if ( StructKeyExists( application, "HothTracker" ) ) {
// Hoth expects a struct with the following keys
var exception = {
detail = '[#arguments.url# (#arguments.linenumber#)] #arguments.message#',
type = 'clientside',
tagContext = '[#arguments.url# (#arguments.linenumber#)]',
// stack is used to identify unique errors so include lots of info!
StackTrace = SerializeJSON( arguments ),
Message = arguments.message
};

application.HothTracker.track( exception );
return true;
}
return false;
}
}

Nothing particuarly complex here, I just create a simple struct which I pass into Hoth's track method. in my Application.cfc I've already set up and configured Hoth and created a reference to it in the application scope.

So there you have it, a few lines of code and I have pretty comprehensive error logging and reporting for my server and client side errors.

 


No comments

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.

Please subscribe me to any further comments
 

Search

Wish List

Found something helpful & want to say ’thanks‘? Then visit my Amazon Wish List :)

Categories

Recent Posts