On giving console.log the love it truly deserves Photo by on Fauzan Saari Unsplash I got 99 things to be ashamed of but debugging with 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. console.log I got 99 things to be ashamed of but debugging with ain’t one. console.log I’m sure you’ve also faced this situation and you may have used or for this purpose: map tap 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 I mean something like this, which will log on ‘next’, ‘error’ and ‘complete’: a breeze source.pipe(log()).subscribe(...) Building the log operator We’ll build the operator step by step. This will actually help you understand how to create your own operators. In fact, make me proud and create a file in your project. Now fill that thing with as much operators as you can. . log utils/operators.ts 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: Let’s do it: an RxJS operator must receive and return an observable. 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 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 . We can achieve this by doing . output a proxy that just gets the value, console.logs it and pass it over observer.next(val) 5. Same principle applies for and so, whenever our source errors or completes, our output will do too. error complete 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 which suggests to just return the inner subscription and forget about it. official operator creation guideline Let’s do that and see how our operator finally looks like: Let it shine🕺 Time to use our brand new operator. log The snippet above logs before mapping, then logs after squaring the numbers ( that ) 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. nope, [**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation_%28**%29) is not a typo 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 or maybe . I write about web dev from time to time so consider subscribing or show some love with some claps! 👏👏 this post this one PS: I got DMs open at @caroso1222 in case you want to follow up on this post or ask me anything.

BUNCH

Mozilla

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The ultimate RxJS operator

Too Long; Didn't Read

Companies Mentioned

Carlos Roso

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The ultimate RxJS operator

Too Long; Didn't Read

Companies Mentioned

Carlos Roso

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES