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

Question

我正在使用 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 中的错误还是我做错了什么？

任何帮助将不胜感激！

Answer 1

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

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

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

Answer 2

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

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

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

所述

Answer 3

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

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

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

System.js doesn't display full stack trace

javascript

typescript

systemjs