Debugging RxJS, Part 1: Tooling

Photo by Adam Sherez on Unsplash

I’m an RxJS convert and I’m using it in all of my active projects. With it, many things that I once found to be tedious are now straightforward. However, there is one thing that isn’t: debugging.

The compositional and sometimes-asynchronous nature of RxJS can make debugging something of a challenge: there isn’t much state to inspect; and the call stack is rarely helpful. The approach I’ve used in the past has been to sprinkle do operators and logging throughout the codebase — to inspect the values that flow through composed observables. For a number of reasons, this approach is not one with which I’ve been satisfied:

• I always seem to have to add more logging, changing the code whilst debugging it;
• once debugged, I either have to remove the logging or put up with spurious output;
• conditional logging to avoid said output looks pretty horrid when slapped in the middle of a nicely composed observable;
• even with a dedicated log operator, the experience is still less than ideal.

Recently, I set aside some time to build a debugging tool for RxJS. There were a number of features that I felt the tool must have:

• it should be as unobtrusive as possible;
• it should not be necessary to have to continually modify code to debug…