See through the observables.

Related tags

Learning resource rxjs-insights
Overview

RxJS Insights

npm version MIT license

RxJS Insights is a toolset that helps you debug the RxJS Observables.

✨ Developer friendly: Easy to setup. Easy to use.

✨ Comprehensive: Collects all types of events that happen inside RxJS.

✨ Unobtrusive: Does not require source code modification to be useful.

RxJS Insights gathers the data about:

  • constructors (e.g. Observable, Subject, etc.),
  • creators (e.g. of, interval, etc.),
  • operators (e.g. map, delay, etc.),
  • subscribers,
  • subscriber chains (i.e. subscribers created by other subscribers),
  • events:
    • notification events (i.e. next, error and complete),
    • subscription events (i.e. subscribe and unsubscribe),
  • event relations (i.e. events caused by other events),
  • async tasks: (e.g. setTimeout, setInterval, DOM events, REST events, etc.).

Try it out on StackBlitz ⚡

Example console output

Documentation

Future work

  • 🧩 Create plugins for other bundlers (e.g. Rollup, Parcel, etc.),
  • 🧩 Create a DevTools extension! 😎
You might also like...

The backend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

The backend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

My first full stack application with the concept of a personal wallet that allows you to create a personal account to keep track of your entire statement by adding incoming and outgoing transactions, as well as calculating the total balance and being able to edit and delete old transactions.

Jun 23, 2022

A project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever

Leaderboard This is a project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever! Built W

Mar 4, 2022

This is a website for a simple to do list, where you can add and remove tasks, edit and reorder them as you see fit.

This is a website for a simple to do list, where you can add and remove tasks, edit and reorder them as you see fit.

To-Do-List This is a website for a simple to do list, where you can do the following: Add the tasks you want to do. Remove any tasks you finished alre

Apr 6, 2022

See a banned user's profile, their friends, their favorite games, their followers etc.

Roblox-Banned-User-Viewer AKA BanView See a banned user's profile, their friends, their favorite games, their followers etc. Ever wondered how to view

Nov 18, 2022

🌈 Put a date and a crypto, optionally a quantity of that crypto, to see how much has augmented/increased in dollars & percentage

crypif Put a date and a crypto, optionally a quantity of that crypto, to see how much has augmented/increased in dollars & percentage Figma I still ha

Apr 4, 2022

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Mini Presentation Additio

Jun 30, 2022

A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

BOOK-DIRECTORY-NODEJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

May 18, 2022

A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

Book-Directory-NodeJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

May 13, 2022

A website to tell your confession, and to see your IP, inspired by BattleOfWits

A website to tell your confession, and to see your IP, inspired by BattleOfWits

Jan 5, 2023
Comments
  • devtools throws 404 errors, including for '[ContextTrackerZone]'

    devtools throws 404 errors, including for '[ContextTrackerZone]'

    Hi, thank you for your work developing this tool, it looks like it will be extraordinarily useful. I'm having trouble configuring an app to drive the chrome plugin, and am not sure how to proceed troubleshooting.

    The extension indicates that it has successfully connected with the devtools, but then immediately throws three errors, one of which appears to be thrown by the zonejs-tracer package.

    Specifically, immediately after the console reports RxJS Insights: connected with the devtools., three 404 errors are thrown:

    • GET http://127.0.0.1:4200/[%3Croot%3E] 404 (Not Found)
    • GET http://127.0.0.1:4200/[angular] 404 (Not Found)
    • GET http://127.0.0.1:4200/[ContextTrackerZone] 404 (Not Found)

    The angular.json file for the project includes updates from the previous version that I attempted to copy as closely as I could from the one in your rxjs-insights-angular14 project. I don't recall having to make any major changes to get it to the point where it is currently compiling and connecting.

    I did do a migration from angular v13 to v14, however the error persisted. I thought that it might be its proxy configuration which also requires custom-webpack:dev-server, but the error persists when I comment out its options object.

    I tracked the ContextTrackerZone in the error message to the zonejs-tracer library, but am stuck there as to how to identify a problem with the host app or its configuration.

    Thanks again for your work on this tool, I'm looking forward to using it to troubleshoot some particularly complex observables. Here's the screenshot of the console output summarized above:

    Screen Shot 2022-09-25 at 14 27 29
    opened by jmcmichael 4
  • It seems that the instrumentation was not installed

    It seems that the instrumentation was not installed

    Can't connect Angular project to rxjs-insights chrome plugin.

    message shows up: It seems that the instrumentation was not installed...

    I followed each step of the docs at:

    • https://github.com/ksz-ksz/rxjs-insights/blob/master/docs/instrumentation/setup/angular.md
    • https://github.com/ksz-ksz/rxjs-insights/blob/master/docs/devtools/setup.md

    Furthermore plugin docs state that connect() will return a Promise<boolean> while connect() signature is Promise<void>

    specs:

    • angular 14.x.x (dev server running on node 14.19)
    • chrome 105 running on
    • wsl2 on windows 11
    • installed:
      • "@rxjs-insights/rxjs7": "0.4.3",
      • "@rxjs-insights/plugin-webpack5": "0.4.2",
      • "@angular-builders/custom-webpack": "14.0.1",
      • "@rxjs-insights/devtools": "0.4.3"
    opened by marnec-ad 3
  • React Native?

    React Native?

    Hi,

    Just want to chime in with accolades. This is awesome! Great work! :)

    Also, do you have an idea how one would make this work in a React Native context?

    opened by jakobloekke 1
  • Angular setup not working

    Angular setup not working

    I followed the instructions for Angular and I am getting the following error for ng server:

    Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(extraWebpackConfig).

    opened by mangelo123 3
Owner
ksz ksz
ksz ksz
GitHub
Create a card layout that let your user flip through it like you see on Google Tips

#Tip Cards by Pete R. Create an animated card layout that let your viewer flip through it like you see on Google Tips Page. Created by Pete R., Founde

Pete R. 213 Nov 5, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
Using a RPI 3b+ to create a PT camera accessible through Windows browser and controllable through MQTT

web-camera_PT A Web flask server converts the MJPEG stream from RPI to JPG img using opencv, then display in browser. Controls added to move Camera in

null 11 Dec 20, 2022
SEE WHO GETS TO A SCORE OF A 100 FIRST

PIG-GAME RULES 1 . The main goal is to reach a score equal or above to a 100. 2 . To play, click on the button named " ROLL DICE ". 3 . To hold your s

Daniel Dukundane 6 Jun 12, 2021
This tool allows you to test your chains.json file to see if your chains are available, syncing, or in sync.

Chains Tester This tool allows you to test your chains.json file to see if your chains are available, syncing, or in sync. This is an open source tool

Jorge S. Cuesta 9 Nov 4, 2022
💠 Webapp to see what time is in any timezone

Timero Webapp to see what time is in any timezone. Deploy https://ultirequiem.github.io/timero Characteristic Responsive Design Uses Packup as Bundler

Eliaz Bobadilla 7 May 15, 2022
Example CRUD API for API Fest'22. See Pull Requests for chapter 2 and 3

Example CRUD API for API Fest'22. See Pull Requests for chapter 2 and 3

Postman Student Program 6 Mar 2, 2022
PAC-MAN Leaderboard includes the Leaderboard API. You can add your name and score, and see other player's scores.

PAC-MAN Leaderboard includes the Leaderboard API. You can add your name and score, and see other player's scores.

Pedro Guerreiro 7 Oct 26, 2022
The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

Bernardo Rodrigues 5 Jun 2, 2022
A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ💯

A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ??

Reem janina 7 May 31, 2022