Repository navigation
Source maps not working with Angular 2. Only compiled source locations shown. #11722
Description
I'm submitting a ... (check one with "x")
[x] bug report
Current behavior
When throwing any kind of exception in an Angular 2 app (e.g., from the constructor of a component) the error messages produced do not appear to support source maps.
Expected behavior
Mainly, I expect source locations to show in stack traces. Especially for trivial examples like throwing an exception from inside of a component.
Reproduction of the problem
I have tested this in a simple example built with angular-cli, it is trivial to reproduce.
https://github.com/chrisnicola/ng2-error-message-example
Edited with results of testing 2016-09-22
After extensive testing the issue may be related to the way the Chrome parses stack traces and maps them in the console to the source map. However Chrome does do this properly, but for some strange reason logging stack traces inside of an Angular 2 app (or possibly just a Zone) doesn't work.
Testing
The following trivial code is what I've used to test with. You will get different results if this code is contained within Angular2 or Zone.js managed code (such as a Component constructor) than if it is outside in the root of the same typescript file. Namely that source maps don't work for the former but do otherwise.
try {
throw new Error("Thrown.")
} catch (e) {
console.log(e.stack)
}
You can also just do:
console.log((new Error("Not Thrown")).stack)Results:
- You can log a stack trace with the above code snippet and the Chrome dev tools console will show original source locations.
- This is not true if that code is contained inside something running in Angular 2 like a Component constructor
- This is still true if the code is contained inside something like an Angular 1 controller constructor
- Caveat 1: Only full source map files work however (so webpack must be configured to use "source-map" as the dev tool). This means that this will not work with angular-cli until it is changed to output source map files.
- Caveat 2: Passing multiple arguments to console.log such as console.log("Error: ", e.stack) does break source mapped line locations (probably a Chrome bug)
- Caveat 3: This won't work with bare errors at all, e.g.) throw "Error"
Conclusions
Support for logging stack traces with source mapped source locations is clearly a bit spotty in Chrome. It does work but not if there are multiple arguments, and you must pass the .stack property of the error to the log and not the error directly.
However while it works, for some reason any errors logged from inside of an Angular 2 component don't work even when the stack traces are nearly identical. I have no idea why this happens but suspect it may have something to do with zones. As I understand little about how Zone.js works or what it does I can't really be of any more help than this.
In the end it appears that for the moment logging original locations in stack traces in Angular 2 apps is not possible. Something I would suggest is a show stopper, particularly considering this is a Typescript oriented framework.
If I'm still just doing something wrong here please let me know. Please, if anyone has an example that shows error handling working with original source locations in the stack traces please let me know.
What is the motivation / use case for changing the behavior?
Stack traces from a Typescript based codebase that don't support original source locations are extremely hard to work with, so this is a pretty serious productivity burden. That being said it is not impossible that this represents a bug that should be fixed in the Chrome dev tools and not Angular.
- Angular version: 2.0.0
- Browser: [Chrome]
- Language: [TypeScript 2.0.2]
Activity
vicb commentedon Sep 19, 2016
Please attach the (unhelpful) error message.
[-]Source maps not working with Angular 2 at all. Only compiled source locations shown.[/-][+]Source maps not working with Angular 2. Only compiled source locations shown.[/+]chrisnicola commentedon Sep 19, 2016
I've done what I can, copy and pasting from Chrome's console doesn't really format the text really well. I would suggest checking out the example for a better view of it.
vicb commentedon Sep 19, 2016
I think
throw "Test Error"do not preserve stack trace (this is a JS issue, not related to Angular).Could you try
throw new Error('Test Error')and report ?chrisnicola commentedon Sep 19, 2016
Same result. Also it should be noted that
throw "Error"does result in a correct source mapped source location if you put it inindex.tsinstead of in a component.Edit: Fixed copy-paste formatting of error messages.
vicb commentedon Sep 19, 2016
Can you try to reproduce in a plunker ?
chrisnicola commentedon Sep 19, 2016
Does the angular-cli example not work?
chrisnicola commentedon Sep 20, 2016
Ok so I tried this with Plunker and it actually shows the location (though it isn't shown until the third console error message, which is probably something for another discussion).
https://plnkr.co/edit/T54xlyn2c0KCqKJrT3YP?p=preview
So this might indicate this is an issue with Webpack + Angular 2. That said the problem manifests in both our own app and in the trivial
angular-clibuilt hello world example I provided. I'm not sure what Plunker is doing differently with respect to source maps. It is also odd that the source map locations work in the Webpack example for errors not thrown from Angular 2.vicb commentedon Sep 20, 2016
angular-cli does not load long-stack-trace in dev environment, see the issue linked above against the cli.
chrisnicola commentedon Sep 20, 2016
Sadly this is not the solution. I've added this to
src/polyfills.tsin theangular-cliexample (and I was already loading it in our project as we followed the guide for setting up with webpack on angular.io).I've updated the Git repo with the example with the change so you can verify yourself that the source locations are still not working.
chrisnicola commentedon Sep 20, 2016
This behaviour is really quite odd. I've tried doing a simple try catch and manually logging exceptions to the console and line numbers and everything work (even from the same .ts file). When I put the exception inside anything Angular is doing the console loging works but the console only links to compiled source locations.
7 remaining items
vicb commentedon Sep 22, 2016
@pkozlowski-opensource not sure if it is a good thing to re-open this issue. This thread is too long.
@chrisnicola could you please open a new issue and sum up your findings in the description so that we don't have to read the whole thread to know what is valid / no more valid. Thanks.
chrisnicola commentedon Sep 22, 2016
@vicb for simplicity and posterity I could just edit the top comment if you like.
vicb commentedon Sep 22, 2016
yep, please add the edit date in the comment then. Thanks.
chrisnicola commentedon Sep 22, 2016
No problem, let me know if the changes work for you.
chrisnicola commentedon Nov 7, 2016
Hi @IgorMinar is there anything I can provide in terms of a repro? I have the one built in Angular-CLI but perhaps that one has some issues.
IgorMinar commentedon Feb 6, 2018
It's taken way too long, but we are finally fixing this. I'm going to close this as dupe of #19841 for now.
hlolli commentedon May 18, 2018
I'm useing @angular/cli 6.0.3 (updated from 5x which also didn't work) and angular 5.1.1 and the source maps are located under webpack://. But they don't get referenced in stacktraces, I'm still only pointed to minified scripts.bundle.js and vendor.bundle.js from my
ng servedevelopment env. I'm a beginner in angular so if someone could explain in simple english what I need to do to get meaningful error messages, would be much appreciated.angular-automatic-lock-bot commentedon Sep 13, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.