AngularJS - трассировка стека без учета исходной карты

ответ Ларифакса хорош, но есть улучшенная версия задокументированной функции в том же отчете о проблеме:

.config(function($provide) {

  // Fix sourcemaps
  // @url https://github.com/angular/angular.js/issues/5217#issuecomment-50993513
  $provide.decorator('$exceptionHandler', function($delegate) {
    return function(exception, cause) {
      $delegate(exception, cause);
      setTimeout(function() {
        throw exception;
      });
    };
  });
})

Это приведет к созданию двух трассировок стека, как отметил Эндрю Маги: одна отформатированная от Angular, затем второй, отформатированный браузером. Вторая трассировка применит исходные карты. Вероятно, не стоит отключать дубликаты, потому что у вас могут быть другие модули Angular, которые также работают с исключениями, которые могут быть вызваны после этого через делегирование.

Единственное решение, которое я смог найти, - это укусить пулю и самостоятельно проанализировать исходные карты. Вот код, который это сделает. Сначала вам нужно добавить на свою страницу карту источников. Затем добавьте этот код:

angular.module('Shared').factory('$exceptionHandler', 
function($log, $window, $injector) {
  var getSourceMappedStackTrace = function(exception) {
    var $q = $injector.get('$q'),
        $http = $injector.get('$http'),
        SMConsumer = window.sourceMap.SourceMapConsumer,
        cache = {};

    // Retrieve a SourceMap object for a minified script URL
    var getMapForScript = function(url) {
      if (cache[url]) {
        return cache[url];
      } else {
        var promise = $http.get(url).then(function(response) {
          var m = response.data.match(/\/\/# sourceMappingURL=(.+\.map)/);
          if (m) {
            var path = url.match(/^(.+)\/[^/]+$/);
            path = path && path[1];
            return $http.get(path + '/' + m[1]).then(function(response) {
              return new SMConsumer(response.data);
            });
          } else {
            return $q.reject();
          }
        });
        cache[url] = promise;
        return promise;
      }
    };

    if (exception.stack) { // not all browsers support stack traces
      return $q.all(_.map(exception.stack.split(/\n/), function(stackLine) {
        var match = stackLine.match(/^(.+)(http.+):(\d+):(\d+)/);
        if (match) {
          var prefix = match[1], url = match[2], line = match[3], col = match[4];
          return getMapForScript(url).then(function(map) {
            var pos = map.originalPositionFor({
              line: parseInt(line, 10), 
              column: parseInt(col, 10)
            });
            var mangledName = prefix.match(/\s*(at)?\s*(.*?)\s*(\(|@)/);
            mangledName = (mangledName && mangledName[2]) || '';
            return '    at ' + (pos.name ? pos.name : mangledName) + ' ' + 
              $window.location.origin + pos.source + ':' + pos.line + ':' + 
              pos.column;
          }, function() {
            return stackLine;
          });
        } else {
          return $q.when(stackLine);
        }
      })).then(function (lines) {
        return lines.join('\n');
      });
    } else {
      return $q.when('');
    }
  };

  return function(exception) {
    getSourceMappedStackTrace(exception).then($log.error);
  };
});

Этот код загрузит исходный код, затем загрузит исходные карты, проанализирует их и, наконец, попытается заменить местоположения в стеке, отслеживая сопоставленные местоположения. Это отлично работает в Chrome и вполне приемлемо в Firefox. Недостатком является то, что вы добавляете довольно большую зависимость к своей базе кода и переходите от очень быстрого синхронного сообщения об ошибках к довольно медленному асинхронному сообщению об ошибках.

У меня была такая же проблема, и я искал решение - по-видимому, это проблема Chrome с трассировкой стека в целом и, как правило, применима к Angular, потому что он использует трассировку стека в отчетах об ошибках. Видеть:

Будет ли исходное сопоставление в Google Chrome выдавать ошибку .stack

Я бы посмотрел на следующий проект: https://github.com/novocaine/sourcemapped-stacktrace

Согласно этой проблеме, похоже, что $logProvider Angular нарушает отображение источников. В проблеме предлагается обходной путь, подобный этому:

var module = angular.module('source-map-exception-handler', [])

module.config(function($provide) {
  $provide.decorator('$exceptionHandler', function($delegate) {
    return function(exception, cause) {
        $delegate(exception, cause);
        throw exception;
    };
  });
});

Поскольку ошибка была исправлена ​​ в Chrome (но проблема сохраняется в Angular), обходной путь, при котором трассировка стека не выводится дважды, будет следующим:

app.factory('$exceptionHandler', function() {
    return function(exception, cause) {
        console.error(exception.stack);
    };
});