Skip to main content

Debugging RXJS

Debugging RXJS code can be laborious. Let's fix that!

Old approach:​

  • Sprinkle tap and logging throughout the codebase.
  • Change the code whilst debugging.
  • Once debugged remove logging.

New approach:​

  • Tag observables (commands, epics, custom operators etc) using rxjs-spy
  • Log, pause, step through, modify and visualize observables via a module or console API.

Tag naming convention​

To allow for easy and consistent filtering please use the following naming convention - <module>/<type>/<namespace>/<function>

Examples

  • Epics
    • user/epic/setJwtTokens
    • ui/epic/invoice/redirectWhenInvoiceClosed

Using the console API​

Please refer to rxjs-spy for more info.

Global logging (log all tagged observables)​

spy.log()

Global logging

Filtering logs by string or regex​

  • Exact matches - spy.log('party/command/partySearch')
  • Pattern matches - spy.log(/party\/.+/)