Redux Devtools floods profiler event list

[fmalcher]

tl;dr; message events trigger CD which makes the Profiler unusable together with Redux DevTools

---

• Project with NgRx, StoreDevToolsModule and Redux DevTools Chrome Extension
• NgRx and Redux DevTools communicate through window.postMessage
• message events trigger Change Detection and flood the profiler event list
• the profiler is not really usable without disabling the Redux DevTools

Example project: https://github.com/angular-schule/2021-03-angular-workshop-online/tree/main/book-rating

This problem is not specifically related to the Angular DevTools, but I never noticed this behavior before. It could be solved on the NgRx or Redux DevTools side, but it would be cool to have a solution within Angular DevTools for this, too.

Idea

• some sort of filtering for event type
• or ignoring specific events (or event sources?)

[GregOnNet]

• We experience the same issue in our Redux project.
• Redux Devtools Plugin for Chrome is active
• We use NgxSDevTools

Observed Behaviour

• Start Profiler
• Lots of events are captured by the profiler
• The app freezes and cannot be used any more until the profiler is stoped.

[mgechev]

Looks like Redux DevTools triggers change detection cycles. Not sure if Angular DevTools should be aware of other existing tooling that communicates via postMessage.

So far it feels like a won't fix, but let me know if you have other thoughts.

[GregOnNet]

I will investigate this issue a little further. Even without Redux DevTools the Angular DevTools recognize hundreds of CD-Cycles in one second.

Currently, I cannot tell what the root cause is.

---

So far it feels like a won't fix, but let me know if you have other thoughts.

Maybe this question can be answered after getting more feedback how many teams out there rely on Redux DevTools. A simple solution would be to mention a workaround in the documentation. I myself tried to disable the Redux DevTools in Chrome and in my application without success.

@fmalcher Can you try to disable Redux DevTools and see if the problem persists?

Cheers Gregor

[fmalcher]

It got worse... 🐞 Communication with the Redux Devtools floods the event list with hundreds of entries per second. This freezes the whole browser and I can only force quit it. It also outputs warnings on the console so I can't use the console anymore (can't even open it).

The event filter is a good means in general to go and see the CD cycles. However, for me it doesn't even come this far when I can't stop the profiling recording.

I think there are very many people using the Redux DevTools extension so we need a practical and pragmatic solution here. Otherwise those people (including me) would not be able to actually use ADT . What do you think about a hard switch like "Ignore window.message events"? @mgechev

[mgechev]

What do you think about a hard switch like "Ignore window.message events"?

We can skip important change detection cycles this way. I'm not confident the fix should be in Angular DevTools given that these are actual change detection cycles that the app performs.