I'm using angular-cli to build a small angular2 web app and I'm debugging with chrome dev-tools.
Clearly I'm doing something wrong if I need to guess each time where is the source of the error and what is the stack-trace of that error.
Take for example this error:
error_handler.js:45EXCEPTION: Cannot read property 'provider' of nullErrorHandler.handleError @ error_handler.js:45
error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50
error_handler.js:51TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (auth.effects.ts:80)
at MapSubscriber._next (map.js:77)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:72)
at DistinctUntilChangedSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at RefCountSubscriber.Subscriber._next (Subscriber.js:125)ErrorHandler.handleError @ error_handler.js:51
zone.js:355Unhandled Promise rejection: Cannot read property 'provider' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'provider' of null(…) TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (http://localhost:4200/main.bundle.js:35342:83)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4171:35)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at DistinctUntilChangedSubscriber._next (http://localhost:4200/main.bundle.js:25485:30)
at DistinctUntilChangedSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at RefCountSubscriber.Subscriber._next (http://localhost:4200/main.bundle.js:431:26)consoleError @ zone.js:355
zone.js:357Error: Uncaught (in promise): TypeError: Cannot read property 'provider' of null
at resolvePromise (http://localhost:4200/main.bundle.js:93214:31)
at http://localhost:4200/main.bundle.js:93191:13
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:92988:28)
at Zone.run (http://localhost:4200/main.bundle.js:92881:43)
at http://localhost:4200/main.bundle.js:93247:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:93021:37)
at Zone.runTask (http://localhost:4200/main.bundle.js:92921:47)
at drainMicroTaskQueue (http://localhost:4200/main.bundle.js:93153:35)consoleError @ zone.js:357
The problem:
This errors means nothing to me. It's completely uselss and un readble.
I got lucky that I saw this line (sometimes I dont get any indication where the error is): at MapSubscriber.project (auth.effects.ts:80)
- This line is the only line that usefull here to get some idea how to fix that bug.
Trying to understand the stack-trace will be pointless because its all rxjs stack-trace.
My question:
I would like to know my code's stack-trace. Is that possible?
Its more general question about how to debug async code with rxjs then fixing this specific bug.
Stack trace error is a generic term frequently associated with long error messages. The stack trace information identifies where in the program the error occurs and is helpful to programmers. For users, the long stack track information may not be very useful for troubleshooting web errors.
In computing, a stack trace (also called stack backtrace or stack traceback) is a report of the active stack frames at a certain point in time during the execution of a program. When a program is run, memory is often dynamically allocated in two places; the stack and the heap.
A stack trace is a list of the functions, in order, that lead to a given point in a software program. A stack trace is essentially a breadcrumb trail for your software. You can easily see the stack trace in JavaScript by adding the following into your code: console.
It happened in the projection method you provided to a map
operator. The clue is at the top of your stack. MapSubscriber.project
.
Basically you read stack traces from the top. The top most call is where the error was thrown (or rethrown).
In RxJS 5, there are usually two or three calls per operator. Each operator has a subscriber named after it that does the work. MapSubscriber.Subscriber.next
MapSubscriber._next
etc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With