Debug RxJS events with Redux DevTools

The more frustrating problem you face in development, the more amazing solution you end up with.

Sometimes while working on a project we may have a case when we would like to track RxJs events by order without writing console.log and deleting it every time before releasing PR. This blog may be useful in the below cases:

1- The team refused to integrate the project with NgRx/Store || Akita || NgXs during the initial project setup because it was sounded like ‘overkill’ (typical reaction) then the project became bigger as expected and here we go, we are in production and it is late.
2- You implemented perfect state management with RxJs but still you want to track the order of RxJs events to be more confident.

Our solution should meet below conditions:

1- Available only on Dev mode

2- Should be TreeShakable so it won't load our production build.

Step 1 (Create Debug operator)

First, we gonna implement a custom debug operator which would spy RxJs events. It would look like below:

If you are not patient you can check code or Live DEMO.

No need for details, we just listen to NEXT, ERROR, and COMPLETE events of RxjS, then we dispatch JS event so it can be listened to by our DevTools integration logic which will be covered in Step 2.

Step 2 (Connect to Redux DevTools)

Here we will try to connect to Redux DevTools extension( if available) and listen to our custom operator event. Code or Live DEMO.

After catching the event we send this event Redux DevTools.

Step 3 (initialize our devtools)

We can initialize our devtools in app component by:

if (isDevMode()) {
 rxjsDevTools();
}

That's all, all we need is to add load our application with Redux DevTools extension installed. Still in doubt? Check Code or Live DEMO.

When not to use it?

When you are on the initial phase of the application. In this case, a proper state management tool is recommended.

I am Xtreme Junior Fron End developer, you can follow on Twitter.