System.js不显示完整堆栈跟踪 [英] System.js doesn't display full stack trace

问题描述

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

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

但是，有时System.js不包括整个堆栈跟踪，然后Chrome生成的原始堆栈跟踪是查看错误行的唯一位置，但问题是单击它会将我带到JavaScript文件而不是TypeScript文件，并且第一个如上所述，行，而不是正确的行。

我的问题：这是Syst中的错误em.js或者我做错了什么？

为了使它更容易理解，我将在这里添加我的代码并解释这个场景。但请记住，我不会尝试修复我的代码，而是要了解为什么我无法通过开发人员工具找到正确的错误行。

所以这是我的System.js声明&配置：

 < script src =/ assets / libs / systemjs-master / dist / system-polyfills.js> ;< /脚本> 
< 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 {用户}来自./classes; 
从./classes导入{Post};来自./model的
 import {BlogModel} 
 
 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）
  

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

Chrome控制台通常会将错误指向第1行： Chrome似乎报告错误的错误行。

还可以尝试其他浏览器，因为它可能是浏览器问题。另一种可能是文件损坏，如这里。

I'm using System.js to load modules written in TypeScript. System.js wraps my original code in a function, therefore when I have an error in my code and I try to see it in Chrome developer tool, clicking on the error just brings me to the first line of the JavaScript file in which there's a declaration of a wrapping function that System.js has added, instead of the correct line in the original TypeScript file.

Usually this is not a problem because System.js adds its own stack trace to the end of the error and clicking on it brings me to the correct line in the original TypeScript file without the wrapping function.

However, sometimes System.js does not include the entire stack trace, then the original stack trace that Chrome produces is the only place to see the error line, but the problem is that clicking on it brings me to the JavaScript file instead of the TypeScript one, and to the first line, instead of the correct one, as I described above already.

My question: Is this a bug in System.js or perhaps I'm doing something wrong?

To make it more understandable, I will add here my code and will explain the scenario. However please remember that I don't try to fix my code but to understand why I can't reach the correct error line via the developer tool.

So this is my System.js declaration & configuration:

<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>

And this is app.module (the root file that System.js loads):

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

  ... 
});

...

The line that produces the error:

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

Here is the full stack trace I get:

As you can see, the correct error line is only shown in the OOTB developer tool stack trace, but not in the System.js one (which 50% of the time does show the actual error line, and supposed to do it all the time).

And when I click on the error line in the OOTB developer tool stack trace, I just get this file with the first line highlighted:

(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);

My question: Is this a bug in System.js or perhaps I'm doing something wrong?

Any help will be profoundly appreciated!

解决方案

This issue is reported & closed :Javascript errors don't link to original source?

Chrome console pointing your error to line 1 is usual: Chrome appears to report wrong line for error.

Also try on another browser as it could be a browser issue. Another possibility is file corruption as stated here.

这篇关于System.js不显示完整堆栈跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！