The ultimate RxJS operator

On giving console.log the love it truly deserves

I got 99 things to be ashamed of but debugging with console.log ain’t one. My code is full them I can’t even count them. I’ve recently found myself logging too much stuff on RxJS pipelines and I’ve seen a bunch of codebases logging values at different steps of the pipe too.

I got 99 things to be ashamed of but debugging with console.log ain’t one.

I’m sure you’ve also faced this situation and you may have used map or tap for this purpose:

Now, let’s embrace our daemons and accept that our professional life depends upon logging stuff. We’ll then create an operator that makes logging RxJS stuff a breeze. An operator that rules them all. Let’s build the ultimate RxJS operator 🏆**.**

And by a breeze I mean something like this, which will log on ‘next’, ‘error’ and ‘complete’:

source.pipe(log()).subscribe(...)

Building the log operator

We’ll build the log operator step by step. This will actually help you understand how to create your own operators. In fact, make me proud and create a utils/operators.ts file in your project. Now fill that thing with as much operators as you can. Your code will look FP-abulous.

A RxJS operator is a high order function. This means a function that returns another function.

2. The signature of the returned function is incomplete, though. The rule of thumb when building operators is: an RxJS operator must receive and return an observable. Let’s do it:

3. Too much trash, I came here to log stuff! We’ve been told since infancy that we need to subscribe to an observable to get its value. Therefore, if we want to log the incoming value, we need to subscribe to the input observable and call console.log.

…but look at dat green console.log though.

4. Now, keep in mind that the output observable will be the one which the next operator in line will subscribe to. Therefore, if we’re hijacking the source observable to log its values, then we must be responsible and pass the values over to the next operator. Think of it like a proxy that just gets the value, console.logs it and pass it over. We can achieve this by doing observer.next(val) .

5. Same principle applies for error and complete so, whenever our source errors or completes, our output will do too.

6. We need to be careful as we’re creating an inner subscription to the input source. Everybody has been told in a peer review to “handle dat subscription appropriately, you want memory leaks or what”. This situation is easily solved by following the official operator creation guideline which suggests to just return the inner subscription and forget about it. Let’s do that and see how our operator finally looks like:

Let it shine🕺

Time to use our brand new log operator.

The snippet above logs before mapping, then logs after squaring the numbers (nope, that [**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation_%28**%29) is not a typo) and finally logs after filtering. How cool, huh? I’ve created a blitz for you so you can play around with the operator. Thank me later.

I hope you enjoy logging stuff as much as I do! If you’re interested in reading more things from me you might want to check out this post or maybe this one. I write about web dev from time to time so consider subscribing or show some love with some claps! 👏👏

PS: I got DMs open at @caroso1222 in case you want to follow up on this post or ask me anything.