Simple client side error logging

https://metric.io/blog/2014/04/simple-client-side-error-logging

by tomdotom • 12 years ago

23 9 12 years ago

goblin89• 12 years ago

With AngularJS, you can process errors your way by implementing $exceptionHandler. (Otherwise errors originating within framework wouldn't reach window.onerror—default implementation of $exceptionHandler will catch them and log to console.)

This code, for example, reports each otherwise unhandled exception to user prettily using Messenger.js:

    window.angular.module('yourApp', []).

    // <…>

    factory('$exceptionHandler', [
      '$log',
      function ($log) {
        return function (exception, cause) {
          // Log to console
          $log.error.apply($log, arguments);

          // Show to user
          var msg = sprintf("Error: %s", exception.message);
          if (cause) { msg = sprintf("%s. %s", msg, cause); }
          window.Messenger().post({
            type: 'error',
            hideAfter: 0,
            showCloseButton: true,
            message: msg
          });
        };
      }
    ]);

To replicate functionality from the article, you could make a request using $http service in there.

(I assume it's possible to override not $exceptionHandler, but $log service directly. This would allow for more extensive server-side log collection, not just error reporting. Never tried that myself, though.)

btd• 12 years ago

This so many times discussed. In short use window.onerror handler and some transport depending on needs: like cors support, before and after load loggin etc. For begining you can just put all errors to google analytics and have all kinds of reports, stat by browsers and export to gdocs.

ceejayoz• 12 years ago

Slightly off-topic, but please have someone proofread your stuff. In addition to "shear number" (it's sheer number), on the Metric.io home page I noticed the following at first glance:

"free trail", "build lasting realtionships", "Create pomotions", "siing how your customers are interacting"

You've got a beautiful site but these sorts of errors give the wrong first impression.

jdevonport• 12 years ago

Thanks for that, must have missed them... fixing now!

patja• 12 years ago

while you are at it, the link to stacktracejs.com is invalid. For some reason they don't serve the www. version of their domain

and the heading and menus on your page overlap on Chrome under Windows when the browser is sufficiently narrow

dllthomas• 12 years ago

Apparently "shear number" is a thing, though presumably not the thing meant here:

'All beta-barrels can be classified in terms of two integer parameters: the number of strands in the beta-sheet, n, and the "shear number", S, a measure of the stagger of the strands in the beta-sheet.'

manishsharan• 12 years ago

I discovered StackTrace.js does not give usable results on IPAD 1 and on Iphone 3GS ( these are the only IOS devices I own and had the pleasure of testing with Stacktrace). And it is useless when using with google closure compiler generated javascript code.

I have refactored my js code to have try - catch block in all my critical paths in Babckbone modules; this approach works on all google closure compiler generate javascript code. I really wonder why most people don't do this more often.

brlewis• 12 years ago

I've looked at this kind of logging but haven't done it yet. Can the onerror handler trigger itself and end up in an infinite loop?

noir_lord• 12 years ago

Occasionally I run into an idea or a concept I've not see before that is just so brilliant it makes me stop and stare slack jawed at the screen.

This is one such time, despite knowing about onerror I honestly don't think I would have ever thought of doing this myself...it's simply brilliant.

Thank you for the post.

Simple client side error logging

Related Stories