Skip to content

An alternative way to keep track of RxJS opened subscriptions

Notifications You must be signed in to change notification settings

filipemendes1994/rxjs-debugger

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RxJS Debugger

Build Status

Demo

The demo app in this repo is available in repo's GitHub pages.

What is it?

rxjs-debugger is an alternative and easy way to debug RxJS Observables and its subscriptions. Disclaimer: don't use this tool in production. This is a very experimental exercise.

Why might you need it?

The usual approach to debug RxJS-based code involves sprinkling do or custom operators. Then, logging is made available to notice an observable is subscribed and unsubscribed.

While debugging Angular applications with hundreds of observables, I found these methods very time-consuming, since we have to pipe every single observable we want to track. Badly-managed RxJS Subscriptions can affect application's performance widely and sail aimlessly can be very painfull.

You can find more info about this package in this Medium Post (https://medium.com/@filipemendes_73527/rxjs-debugger-an-alternative-way-to-debug-rxjs-observables-eb6d4b7fef6c)

I'm sure you also thinks the same, and this is a package you might need.

Install

Install the package using NPM:

npm install --save-dev rxjs-debugger

And add only the following code to main.ts,

import { Observable } from "rxjs";
import { RxJSDebugger } from "rxjs-debugger";
RxJSDebugger.init(Observable);

Or require the module to use with CommonJS bundler:

const { RxJSDebugger } = require("rxjs-debugger");
const { Observable } = require("rxjs");
RxJSDebugger.init(Observable);

Core concepts

rxjs-debugger adds logic to Observable's prototype subscribe method that allow us to monitorize the subscription and unsubscription calls of RxJS Observables and its extended classes (EventEmitter, Subject, BehaviorSubject...).

Module API

The exported RxJSDebugger object exposes the following API:

export declare type SubscriptionsMap = { [key: string]: string[] };
export declare type ClassName = string;
export declare type ObservableDef = typeof Observable;

export const RxJSDebugger: {
  valueChanges: Subject<SubscriptionsMap>;
  obSubscribed$: Subject<ClassName>,
  obUnsubscribed$: Subject<ClassName>,

  addOnSubscribeLogic: (fn: Function) => void,
  addOnUnsubscribeLogic: (fn: Function) => void,

  clearOnSubscribeLogic: () => void,
  clearOnUnsubscribeLogic: () => void,

  setTargettedClasses: (targettedClasses: ClassName[]) => void,

  subscriptionsMap: () => SubscriptionsMap,
  openedSubscriptionsCount: () => number,
  clearSubscriptionsMap: () => void,

  init: (
    observableDef: ObservableDef,
    targettedClasses?: ClassName[],
    onSubscribeFn?: () => void,
    onUnsubscribeFn?: () => void
  ) => void
}

Unlike other RxJS debugging libraries, this one doesn't force you to change every observable you want to monitorize. Calling .init() method is enough to trigger the debugging mode. After that, when an observable is subscribed, a new uuid is pushed to subscriber's class entry in subscriptionsMap. It allows us to know in realtime how many subscriptions exist in each class.

Window API

More than that, developer can access the tracked data via browser's console, using window.subscriptionsMap.

About

An alternative way to keep track of RxJS opened subscriptions

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published