Nativescript-cli: NativeScript+angular stack traces/errors not displaying context (module name, line number, etc)

[NickIliev]

_From @nikmartin on October 12, 2017 17:6_

Did you verify this is a real problem by searching [Stack Overflow]

YES: https://stackoverflow.com/questions/46475025/nativescript-error-context-is-not-fully-stringified/46475640#46475640

Tell us about the problem

When debugging app with tns debug android, and attaching the Chrome debugger to the app, error contexts or even simple console.log statements are not printed with the source context. This makes any errors thrown by the app impossible to debug. for example, here are messages thrown by my app in the terminal:

JS: ERROR TypeError: Cannot read property 'object' of undefined
JS: ERROR CONTEXT [object Object]
JS: Event type: ValueChanged
JS: Key: -KvckKXXehYoClU7_khk
JS: ERROR TypeError: Cannot read property 'object' of undefined
JS: ERROR CONTEXT [object Object]
JS: ERROR TypeError: Cannot read property 'object' of undefined
JS: ERROR CONTEXT [object Object]

and the same error in Chrome Dev tools:

ERROR TypeError: Cannot read property 'object' of undefined
12:03:21.303 ERROR CONTEXT [object Object]
12:03:21.325 Event type: ValueChanged
12:03:21.326 Key: -KvckKXXehYoClU7_khk
12:03:21.344 ERROR TypeError: Cannot read property 'object' of undefined
12:03:21.355 ERROR CONTEXT [object Object]
12:03:21.669 ERROR TypeError: Cannot read property 'object' of undefined
12:03:21.687 ERROR CONTEXT [object Object]

Which platform(s) does your issue occur on?

Android - have not tested in iOS

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 3.2.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project) 3.2.0
• Runtime(s): android: 3.2.0
• Plugin(s): (look for the version number in the package.json file of your
  project)
  "nativescript-angular": "4.2.0",
  "nativescript-camera": "^3.1.2",
  "nativescript-ngx-fonticon": "^2.2.3",
  "nativescript-plugin-firebase": "^4.0.6",
  "nativescript-telerik-ui": "3.0.4",
  "nativescript-theme-core": "1.0.4",
  "reflect-metadata": "0.1.10",
  "tns-core-modules": "^3.2.0",

Please tell us how to recreate the issue in as much detail as possible.

Run app using either hardware or emulator:
tns run android
then attach debugger: (it never works if I just run tns debug android)
tns debug android
Note: The behavior is the same if debugged from within VS Code with Nativescript plugin

launch Chrome or Chromium, then paste devtools link in address bar:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

Observe the console

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

I can duplicate it with nothing more than:
tns create HelloWorld --template nativescript-template-ng-tutorial

app.component.ts:

``` constructor(){
console.log('WHERE AM I');
try {
throw 'here is an error';
} catch (error) {
console.trace(error);
}
}

`console.trace()` DOES properly print a stack trace, but any errors  thrown by the app, console. logs, etc do not have any context information printed:
console of above output:

To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40001
[NSDebugAdapter] Ready to attach to application on 40001
[NSDebugAdapter] Connection to target application established on 40001
JS: WHERE AM I
JS: Stack Trace:
JS: at new AppComponent (file:///data/data/org.nativescript.HelloWorld/files/app/app.component.js:12:21) [angular]
JS: at createClass (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:10940:26) [angular]
JS: at createDirectiveInstance (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:10774:37) [angular]
JS: at createViewNodes (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12210:49) [angular]
JS: at createRootView (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12105:5) [angular]
JS: at callWithDebugContext (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:13488:42) [angular]
JS: at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:12805:12) [angular]
JS: at ComponentFactory_.create (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:9888:46) [angular]
JS: at ComponentFactoryBoundToModule.create (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:3365:29) [angular]
JS: at ApplicationRef_.bootstrap (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:4794:57) [angular]
JS: at file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:4577:81 [angular]
JS: at Array.forEach (native) [angular]
JS: at PlatformRef_._moduleDoBootstrap (file:///data/data/org.nativescript.HelloWorld/files/app/tns_modules/@angular/core/bundles/core.umd.js:4577:44) [angular]
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
[NSDebugAdapter] Connection to target application successfully enabled
 
 ```

_Copied from original issue: NativeScript/NativeScript#4941_

[Plamen5kov]

Hi @nikmartin,

When debugging app with tns debug android, and attaching the Chrome debugger to the app, error contexts or even simple console.log statements are not printed with the source context.

We've never meant for console.log to be used for debugging, and we've strived to keep console.log/dir/trace behavior the same as node.

12:03:21.687 ERROR CONTEXT [object Object]

Try printing this line with console.dir instead of console.log to see the actual object.

... but any errors thrown by the app, console. logs, etc do not have any context information printed:

Let me say again that console.log isn't ment to be used for debugging. Here's more info on how to debug your application.

[nikmartin]

12:03:21.687 ERROR CONTEXT [object Object]

Try printing this line with console.dir instead of console.log to see the actual object.

I don't know where this error originates. That's the problem. I'm not the one doing the console.log, it's being thrown by some other component, maybe a plugin, or a core module.

[Plamen5kov]

@nikmartin because you mentioned these logs in your post, I originally thought these were your console.logs, that's why I suggested this solution.
If you want to see exactly where these errors occur, you can use the tns debug <platform> command to figure out any issue you might have and possibly, help other users with using console.dir instead of console.log in case they want to print an object as is described in the documentation.

[nikmartin]

all of the examples I gave were while debugging my app using tns debug android. I'm still not getting any context when some (possibly handled in the component, hence just the ERROR message) error occurs. Since they are red in the Dev Tools console, my assumption is they ARE being printed using console.error(), but they still don't show any context

[petekanev]

@nikmartin you could try pausing on caught exceptions as shown in the short video - https://developers.google.com/web/updates/2015/05/automatically-pause-on-any-exception

[darkyelox]

I Have the same issue, Angular seem to throw some exception and the console and the chrome devtools don't show the trace, is like NativeScript always treats errors with console.log and this difficult the development too much

[petekanev]

@darkyelox could you provide a simple reproducible case for us? We've worked on improving the debugging experience, and have made some improvements to the console which will probably make it in the next release (February). I am happy to say that you should be able to see the source of the console.log/warn/whatever calls too.

You can follow the progress on that feature at https://github.com/NativeScript/android-runtime/pull/894

[engineerbaraazakariya]

I am trying to debug my code for web, same issue, as I see this is maybe just mentioned for android-runtime debugging but I need this feature even for web (or even better global Angular+Nativescript environment), I can't find the line that 's throwing the error in my .ts file from the Chrome DevTools console, so this thing will be very useful if it's there too (y)

[mdjamal]

I am seeing this issue after updating to NS7. Console log, stack traces/errors not displaying context (module name, line number, etc)

[louisyeoh]

Same here, After upgrading to NS7 NG10, console log suddenly not displaying line number