AngularJS - 忽略源映射的堆栈跟踪 [英] AngularJS - Stack trace ignoring source map

问题描述

我编写了一个 AngularJS 应用程序，但事实证明调试起来有点像噩梦.我正在使用 Grunt + uglify 来连接和缩小我的应用程序代码.它还在缩小的 JS 文件旁边创建了一个源映射.

I've written an AngularJS app but it's proving a bit of a nightmare to debug. I'm using Grunt + uglify to concatenate and minify my application code. It also creates a source map alongside the minified JS file.

当文件中有 JS 错误但在 AngularJS 应用程序之外时，源映射似乎可以正常工作.例如如果我在其中一个文件的顶部写入 console.log('a.b'); ，Chrome 调试器中记录的错误会显示原始文件的行 + 文件信息，而不是缩小后的文件一个.

The source map seems to work properly when there is a JS error in the file, but outside of the AngularJS application. e.g. If I write console.log('a.b'); at the top of one of the files, the error logged in the Chrome debugger displays line + file info for the original file, not the minified one.

当 Angular 自己运行的代码(例如在控制器代码中)出现问题时，就会出现问题.我从 Angular 得到了一个很好的堆栈跟踪，但它只详细说明了缩小后的文件，而不是原始文件.

The problem occurs when there is a problem with code that Angular runs itself (e.g. in Controller code). I get a nice stack trace from Angular, but it only details the minified file not the original.

我可以做些什么来让 Angular 确认源地图?

Is there anything I can do to get Angular to acknowledge the source map?

以下错误示例:

TypeError: Cannot call method 'getElement' of undefined
at Object.addMapControls (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:2848)
at Object.g [as init] (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:344)
at new a (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:591)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:29:495)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:30:123)

推荐答案

Larrifax 的 answer 很好，但有改进在同一问题报告中记录的函数版本:

Larrifax's answer is good but there is an improved version of the function documented in the same issue report:

.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;
      });
    };
  });
})

这将生成两个堆栈跟踪，正如 Andrew Magee 指出: 一个由 Angular 格式化，然后第二个由浏览器格式化.第二个跟踪将应用源映射.禁用重复项可能不是一个好主意，因为您可能还有其他 Angular 模块也处理异常，这些异常可以在此之后通过委托调用.

This will generate two stack traces, as Andrew Magee noted: one formatted by Angular, then a second one formatted by the browser. The second trace will apply sourcemaps. It's probably not a great idea to disable the duplicates, because you may have other Angular modules that also do work with exceptions that could be called after this via the delegation.

这篇关于AngularJS - 忽略源映射的堆栈跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！