System.js 不显示完整的堆栈跟踪答案

【问题标题】：System.js doesn't display full stack traceSystem.js 不显示完整的堆栈跟踪
【发布时间】：2016-10-05 03:07:18
【问题描述】：

我正在使用 System.js 加载用 TypeScript 编写的模块。 System.js 将我的原始代码包装在一个函数中，因此当我的代码中有错误并尝试在 Chrome 开发人员工具中查看它时，单击错误只会将我带到 JavaScript 文件的第一行，其中有一个System.js 添加的包装函数的声明，而不是原始 TypeScript 文件中的正确行。

通常这不是问题，因为 System.js 将自己的堆栈跟踪添加到错误的末尾，然后单击它会将我带到原始 TypeScript 文件中的正确行，而没有包装功能。

但是，有时 System.js 不包含整个堆栈跟踪，那么 Chrome 生成的原始堆栈跟踪是唯一可以看到错误行的地方，但问题是单击它会将我带到 JavaScript 文件的 TypeScript 和第一行，而不是正确的，正如我上面已经描述的那样。

我的问题：这是 System.js 中的错误还是我做错了什么？

为了更容易理解，我将在此处添加我的代码并解释该场景。但是请记住，我不是试图修复我的代码，而是要了解为什么我无法通过开发者工具到达正确的错误行。

这是我的 System.js 声明和配置：

<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>

<script>
        System.config({
            defaultJSExtensions: true,
            transpiler: 'typescript',
        });

        System.import('app.module')
                  .then(null, console.error.bind(console));

 </script>

这是 app.module（System.js 加载的根文件）：

import './angular-1.4.7'
import './angular-route.min'
import {User} from "./classes";
import {Post} from "./classes";
import {BlogModel} from  "./model"

var app: angular.IModule = angular.module("blogApp", ["ngRoute"]);

var model: BlogModel = new BlogModel();

app.run(function($http: angular.IHttpService): void{
    $http.get("/user-context/current-user")
    .success(function(currentUser: User): void{
        if(currentUser.userName) {
            model.currentUser = currentUser;
        }
    }); 

  ... 
});

...

产生错误的行：

$http.get("/user-context/current-user")

这是我得到的完整堆栈跟踪：

如您所见，正确的错误行仅显示在 OOTB 开发人员工具堆栈跟踪中，但不在 System.js 中显示（其中 50% 的时间确实显示了实际的错误行，并且应该这样做一直）。

当我单击 OOTB 开发人员工具堆栈跟踪中的错误行时，我只得到了这个文件，第一行突出显示：

(function(require, exports, module, __filename, __dirname, global, GLOBAL) { //this line is highlighted
require('./angular-1.4.7');
require('./angular-route.min');
var model_1 = require("./model");
var app = angular.module("blogApp", ["ngRoute"]);
var model = new model_1.BlogModel();
app.run(function ($http) {
    $http.get("/user-context/current-user")  //but this is the line that should be highlighted
        .success(function (currentUser) {
        if (currentUser.userName) {
            model.currentUser = currentUser;
        }
    });
    ...
});
...
});
//# sourceMappingURL=app.module.js.map
}).apply(__cjsWrapper.exports, __cjsWrapper.args);

我的问题：这是 System.js 中的错误还是我做错了什么？

任何帮助将不胜感激！

【问题讨论】：

如果您通过 CDN 加载任何 JS，请尝试从与您的 JS 相同的服务器上提供它，看看是否有帮助。

标签： javascript typescript systemjs

【解决方案1】：

在 SystemJS 转译代码的错误堆栈跟踪上添加源映射支持。要解决堆栈跟踪，您必须安装 source-map-support

   require('systemjs');
System.import('./test/modules/error.js').catch(function(error){
      console.error(error.stack);
});

【讨论】：

【解决方案2】：

此问题已报告并关闭：Javascript errors don't link to original source?

Chrome 控制台通常会将您的错误指向第 1 行：Chrome appears to report wrong line for error。

也可以尝试使用其他浏览器，因为这可能是浏览器问题。另一种可能性是文件损坏，如here 所述。

【讨论】：

【解决方案3】：

System.js 使用的arguments.caller 已弃用。如果在最新版本的 chrome 中发生这种情况 - 你将无能为力。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller

尝试旧的 Firefox 版本来确认这一点。

【讨论】：