ksz-ksz / rxjs-insights Goto Github PK

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"

Our app uses rxjs heavily and this tool has great potential to help us debug, but some QoL features are needed to manage large amounts of interconnected events.

in the image above, it would be great to partially expand those "excluded entries" in smaller steps. I think that something like "show 10 above/below" would be great to keep following a specific thread without getting lost in those thousands of events.

and then it would also be nice to have some more info in this list. The name of the operator and being able to see and interact with the data there would be very useful.

Our team uses Storybook to develop our application and it would be great to have this tool setup there too, but each story is rendered inside an iframe. Currently it works only when opening the story individually in a new tab.

Would you like to share how the graph is produced? Which package can do this? Thank you.

Hi, this is an amazing project! I'd like to submit a PR and add support for Vite & Rollup.

If you could explain to me what the integration plugins are doing I could get right to it.

Thanks very much!

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:

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).

Does anybody know how to make this work with nx? (https://nx.dev/)

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?

The StacktraceLocator class has a method getOriginalLocation that may return an undefined.
The locate method uses a value returned by getOriginalLocation and passes it through a guard isPromise.
However, the isPromise guard doesn't have a check if the value is not undefined, even though the getOriginalLocation method may return an undefined.
Therefore, if getOriginalLocation returns an undefined location, we end up getting an error like "Cannot use 'in' operator to search for 'then' in undefined".