CODEWITHSUNDEEP
angularjsexception
user800014
user800014

Reputation:

How can I get more stacktrace in AngularJS

I'm using the decorator to change the $exceptionHandler behavior, sending logs to the server. My problem with this is that the stackatrace of the exceptions seems useless, showing only part of the stack. For example:

Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [expression here].

at Error (native)
at throwError (http://localhost:8080/angular/angular.js:6674:62)
at primary (http://localhost:8080/angular/angular.js:6918:9)
at unary (http://localhost:8080/angular/angular.js:6900:14)
at multiplicative (http://localhost:8080/angular/angular.js:6883:16)
at additive (http://localhost:8080/angular/angular.js:6874:16)
at relational (http://localhost:8080/angular/angular.js:6865:16)
at equality (http://localhost:8080/angular/angular.js:6856:16)
at logicalAND (http://localhost:8080/angular/angular.js:6847:16)
at logicalOR (http://localhost:8080/angular/angular.js:6839:41)

Is there some way to configure AngularJS to show more stacks? If I look at Chrome console, I can see more stack, and get the filename, but not in the exception handler.

Even if I change the Error limit I cannot see the original file:

Error.stackTraceLimit = Infinity;

Upvotes: 17

Views: 8918

Answers (1)

nach0
nach0

Reputation: 389

1 Use a debugger, instead of Chrome console

Google Chrome provides a debugger that helps JS programmers to find bugs and problematic code.

As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of a issue and fix it efficiently. The Chrome DevTools include several useful tools to help make debugging JavaScript less painful.

You can try putting some breakpoints wherever you want (try to detect the problematic lines/ methods).

See the official documentation here: Google Chrome Debugger

2 Use a browser extension

Many plugins like ng-inspector or AngularJS Batarang helps you to print the status of your AngularJS program (controller instances, variable names/values, and scopes).

3 Use $log service (console.log wrapper)

The AngularJS $log service provides a simple resource to print the status of your variables in the browser console (if present).

Simple service for logging. Default implementation safely writes the message into the browser's console (if present).

The main purpose of this service is to simplify debugging and troubleshooting.

The default is to log debug messages. You can use ng.$logProvider#debugEnabled to change this. AngularJS $log service helps you to debug your program.

From my point of view, a good AngularJS debug includes the combination of all the above solutions.

I hope it is useful for you.

Upvotes: 3

Related Questions