Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using StackTrace.js with Angular.js

I'm implementing a logger for my whole MEAN.js project. I have a server side logger that works well, and I've set an endpoint to receive a POST request with an exception to log a client error. I'm using StackTrace.js for client side error logging, but I'm getting some errors; now I'm using StackTrace's error-stack-parser and still getting errors. I'm using a decorator on Angular's $exceptionHandler to achieve this:

$provide.decorator("$exceptionHandler",
    function($delegate, traceService, $log, $window) {
  return function(exception, cause) {
    $delegate(exception, cause);
    try {
      var errorMessage = exception.toString();
      var stackTrace = traceService.
      parse(exception).
      then(function(stackFrames) {
        $.ajax({
          type: 'POST',
          url: '/logger',
          contentType: 'application/json',
          data: angular.toJson({
            url: $window.location.href,
            message: errorMessage,
            type: 'exception',
            stackFrace: stackFrames,
            cause: cause || ''
          })
        }).fail(function() {
          $log.warn('POST request failed');
        });
      }).catch(function(error) {
        $log.warn('Error StackTrace');
      });
    } catch (loggingError) {
      $log.warn('Error server-side logging failed');
      $log.log(loggingError);
    }
  };
});

traceService is an Angular service that acts as a proxy for StackTrace/error-stack-parser functions. traceService.parse is equivalent to ErrorStackParser.parse. traceService is implemented as:

angular.module('core').factory('traceService', function() {
  return {
    parse: ErrorStackParser.parse
  };
});

I've put this decorator code on the Angular app bootstrap, and I'm testing by throwing an error on a controller. When I run the app I get this error on the client console:

Error server-side logging failed
angular.js:13708 TypeError: this.parseV8OrIE is not a function
at Object.ErrorStackParser$$parse [as parse] (error-stack-parser.js:70)
at application.js:22
at invokeLinkFn (angular.js:9816)
at nodeLinkFn (angular.js:9215)
at compositeLinkFn (angular.js:8510)
at publicLinkFn (angular.js:8390)
at lazyCompilation (angular.js:8728)
at updateView (viewDirective.ts:278)
at Object.configUpdatedCallback [as configUpdated] (viewDirective.ts:226)
at configureUiView (view.ts:164)

It would seem like this is an issue with error-stack-parse; I can't seem to find any articles regarding this issue, so I'm sure it's something I'm doing wrong, the way I'm testing or something else. Can any provide some insight as to why this is failing?

Edit

I modified the code following Caramiriel's comment. It seems like I need to add all functions from error-stack-parser to my service. This is traceService:

angular.module('core').factory('traceService', function() {
  return {
    parse: ErrorStackParser.parse,
    parseV8OrIE: ErrorStackParser.parseV8OrIE,
    extractLocation: ErrorStackParser.extractLocation
  };
});

Now I'm getting this error:

TypeError: StackFrame is not a constructor
at Object.<anonymous> (http://localhost:3000/lib/error-stack-parser/error-stack-parser.js:105:24)
at Array.map (native)
at _map (http://localhost:3000/lib/error-stack-parser/error-stack-parser.js:22:26)
at Object.ErrorStackParser$$parseV8OrIE [as parseV8OrIE] (http://localhost:3000/lib/error-stack-parser/error-stack-parser.js:95:20)
at Object.ErrorStackParser$$parse [as parse] (http://localhost:3000/lib/error-stack-parser/error-stack-parser.js:70:29)
at http://localhost:3000/application.js:22:11
at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:9816:9)
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:9215:11)
at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:8510:13)
at publicLinkFn (http://localhost:3000/lib/angular/angular.js:8390:30)
like image 782
Luis Diego Hernández Avatar asked Jul 12 '16 16:07

Luis Diego Hernández


1 Answers

It looks like you are using error-stack-parser without its dependency on the stackframe project.

You'll get that dependency automatically if you use npm or bower.

like image 129
Eric Wendelin Avatar answered Oct 18 '22 19:10

Eric Wendelin