CODEWITHSUNDEEP
javascriptangulargoogle-chrome-devtoolsrxjsangular-cli
Stav Alfi
Stav Alfi

Reputation: 13943

How to get the stacktrace of an error when using rxjs?

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?

  1. where in my code the subscription to that observable happens.
  2. If its an observable from ngrx, then where in my code someone dispanched that action that causes the error.

Its more general question about how to debug async code with rxjs then fixing this specific bug.

Upvotes: 6

Views: 2076

Answers (1)

Ben Lesh
Ben Lesh

Reputation: 108491

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

Upvotes: 1

Related Questions