System.js zeigt keine vollständige Stapelüberwachung an

Question

Ich verwende System.js, um in TypeScript geschriebene Module zu laden. System.js umschließt meinen ursprünglichen Code in einer Funktion. Wenn ich also einen Fehler in meinem Code habe und versuche, ihn im Chrome-Entwicklerwerkzeug zu sehen, bringt mich der Klick auf den Fehler in die erste Zeile der JavaScript-Datei, in der es einen gibt Deklaration einer Wrapping-Funktion, die System.js hinzugefügt hat, anstelle der korrekten Zeile in der ursprünglichen TypeScript-Datei.

Normalerweise ist dies kein Problem, da System.js am Ende des Fehlers einen eigenen Stack-Trace hinzufügt und durch Klicken darauf die richtige Zeile in der ursprünglichen TypeScript-Datei ohne die Wrapping-Funktion erreicht.

Manchmal enthält System.js jedoch nicht den gesamten Stack-Trace, dann ist der ursprüngliche Stapel-Trace, den Chrome erzeugt, der einzige Ort, an dem die Fehlerzeile angezeigt wird. Das Problem ist, dass das Klicken auf die JavaScript-Datei führt anstelle des TypeScript-Codes, und in die erste Zeile, anstelle des richtigen, wie ich oben bereits beschrieben habe.

Meine Frage: Ist das ein Fehler in System.js oder vielleicht etwas mache ich falsch?

Um es verständlicher zu machen, werde ich hier meinen Code hinzufügen und das Szenario erklären. Beachten Sie jedoch, dass ich nicht versuche, meinen Code zu korrigieren, sondern zu verstehen, warum ich die korrekte Fehlerzeile nicht über das Entwicklerwerkzeug erreichen kann.

Das ist also meine System.js Erklärung & Konfiguration:

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

Und das ist app.module (das Root-Datei, die System.js Lasten):

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

    ... 
}); 

... 

Die Linie, die produziert der Fehler:

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

Hier ist die vollständige Stack-Trace bekomme ich:

Wie Sie die richtige Fehlerzeile nur im OOTB Entwickler-Tool-Stack-Trace angezeigt wird sehen können, aber nicht in der System.js ein (die 50% der Zeit, die tatsächliche Fehlerzeile nicht zeigen und sollte es die ganze Zeit machen).

Und wenn ich auf der Fehlerzeile in der Spur OOTB Entwickler-Tool Stapel klicken, ich diese Datei nur mit der ersten Zeile erhalten hervorgehoben:

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

Meine Frage: Ist das ein Fehler in System.js oder vielleicht mache ich etwas falsch?

Jede Hilfe wird zutiefst geschätzt!

Answer 1

Dieses Problem wird berichtet & geschlossen: Javascript errors don't link to original source?

Chrome Konsole Ihre Fehler zeigen 1 Zeile ist üblich: Chrome appears to report wrong line for error.

Versuchen Sie auch einen anderen Browser, da es sich um ein Browserproblem handeln könnte. Eine weitere Möglichkeit ist die Dateikorruption here.

Answer 2

arguments.caller, das von System.js verwendet wird, ist veraltet. Wenn dies in der neuesten Version von Chrome passiert - Sie können nichts tun.

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

Versuchen alte Firefox-Version dies zu bestätigen.

Answer 3

Fügen Sie die Quellenzuordnungsunterstützung für die Fehlerprotokollierung von SystemJS-transpiliertem Code hinzu. Ihre Stack-Traces bekommen gelöst Sie die Quelle-map-Unterstützung

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