How to debug rxjs5?

Question

On RxJS - Goals I read that their goal is better debuggability:

Goals

Provide more debuggable call stacks than preceding versions of RxJS

I have just started to use redux-observable which is quite easier for me to understand comparing it to redux-saga as I am already used to the reactive style with lodash and ramda (ok, fp style maybe ;). I was surprised that it's not possible to debug it yet. Is it true? If so, then I gotta switch to redux-sagas maybe or stick with redux-thunk.

Edit based on Jay Phelps's answer

By debugging I meant: "How to set a breakpoint on e.g. observable.map(...) in a browser?" With lodash I can set a breakpoint in the browser and it stops right there on the _.map(...). How to do it with redux-observable (or rxjs)? I don't want to depend on drawing of marble diagrams and console.log().

Markitamarkka

"it's not possible to debug it yet" what do you mean? The call stacks of RxJS v5 are much more accurate (as was the goal). You can certainly debug RxJS code. Everyone who uses it, debugs it. No one would use something that is impossible to debug. – Mirza

Answer 1

It certainly is possible to debug RxJS code. I think it's probably safe to say hardly anyone would use it if that wasn't the case--Angular2 is heavily built on it too.

The most common ways people use are the same ways they debug other JavaScript, breakpoints (e.g. debugger) and console.log()'s

There are more advanced techniques some users use like drawing dependency graphs or marble diagrams. André Staltz wrote about this recently, so that might be a helpful resource.

Ultimately, any kind of async programming is going to be harder to debug. This is not unique to redux-observable/RxJS; a quick search will reveal plenty of debugging concerns for redux-saga too.

It turns out that redux-thunk is the best solution for a vast majority of applications built because a majority of them do not have complex side effect concerns that justify something like redux-observable or redux-saga. Though if you are already proficient in RxJS, there's nothing wrong with using redux-observable.

redux-saga as a project has existed longer than redux-observable so that's certainly one major selling point. You'll find more documentation, examples, and likely are have a better community to get support from.

The counter being that the operators and APIs you learn in redux-saga aren't nearly as transferable as learning RxJS, which is used all over the place. redux-observable is super super super simple internally, it's really just giving you a natural way for you to use RxJS. So if you know RxJS (or want to), it's an extremely natural fit.

My advice at the moment for most people is that if you have to ask which one you should use, you probably should choose redux-saga.

(disclaimer: I am one of the maintainers of redux-observable and RxJS v5)

Mirza

Thank you for an exhausting answer. I updated the question to be more precise. – Markitamarkka

Thank you for an exhausting answer. I updated the question to be more precise. I also see that redux-observable is more reusable on other projects than redux-saga due to the usage of rx. – Markitamarkka

Looking into this article about debugging of rxjs - github.com/Reactive-Extensions/RxJS/blob/master/doc/… - it really seams there ain't no way of debugging it using breakpoints. So i will accept the answer. – Markitamarkka

@zatziky that article (and that repo) is for RxJS v4, not v5. That's one of the major reasons v5 was written, to resolve that. Also, it's internal lift mechanism is going to make possible some really amazing devtools, but these have not yet been written because we're still finishing up the first major v5 release. – Mirza

RxJS v5 repo is here: github.com/ReactiveX/rxjs, docs here reactivex.io/rxjs – Mirza

Answer 2

import Rx, { Observable } from 'rxjs'

const arrStream$ = Observable.of(1,2,3)
                    .do(x=>console.log('Before',x))  // 1, 2, 3
                    .map(x=>x*2)
                    .do(x=>console.log('After',x))   // 2, 4, 6
                    .subscribe(value=>doThingsWith(value))
// real console output
// Before 1
// After  2
// doThingsWith(2)
// Before 2
// After  4
// doThingsWith(4)
// Before 3
// After  6
// doThingsWith(6)

.do(debugValue=> console.log(debugValue))

Kendrickkendricks

Good example but need explanation to avoid down votes – Tympany