Large performance degradation from v3.1.11 to v3.2.0 chrome extension

[rbox-risk]

Hey thanks for the great extension - its hugely valuable.

I'm working with a relatively large redux store, until v3.1.11 redux-devtools worked fine for.

But when switching to v3.2.0, it becomes unusable - blocking the main thread.
I ran a chrome performance comparison (while trying to isolate the dev slowdown), and 2 things jump out:

1. Top chart is a test of about 9 seconds of performing some basic user actions while v3.1.11 is loaded.
2. The heap size jumps from a 60MB max to 1897MB max when performing the same test but with devtools v3.2.0 loaded
3. the "9 second test" actually takes over 30seconds with v3.2.0 due to the main thread slow-down

Are there any client code changes required before using v3.2.0 of the extension?

[markerikson]

This is likely due to the internal messaging changes described in #1705 (comment) , which include some loss of performance behavior due to having to work around the Chrome MV3 architecture limits

[Methuselah96]

Yeah, some performance degradation is expected since the DevTools no longer have direct access to the memory contents of the background page, and therefore all communication between the two need to be serialized and passed via message passing. However, an increase from 60MB to 1897MB seems unexpected.

I've got some large Redux stores, so I'll try reproducing this issue and hopefully get to the bottom of it. Meanwhile, if you need a fix sooner, you can download the chrome.zip from one of the earlier versions and manually install that by going to chrome://extensions, turning on Developer mode, unzipping the extension, and selecting "Load Unpacked."

[pauldambra]

👋 this is likely hitting us at PostHog too

We have a session replay product and an analytics product and the data can be large. We've had increasing reports of the site freezing which are resolved by disabling redux dev tools

Since this is our customer browsers we can't downgrade

Is there anything we can do in our code? E.g. to "hide" messages from the dev tool???

[markerikson]

@pauldambra : yes, you could use the actionSanitizer and stateSanitizer callback options to limit which actions get serialized and what state gets sent over (ie, ignore specific actions entirely, or strip out large chunks of state from being shipped to the extension):

• https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#actionsanitizer--statesanitizer

[pauldambra]

Ah, I've seen this https://github.com/reduxjs/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

We'll try that out

[pauldambra]

Awesome, thanks @markerikson will take a look now!

[rbox-risk]

Thanks @Methuselah96 and @markerikson for feedback and confirming the likely source as message passing and the work relating to MV3. Yep, I reverted back to 3.1.11 via zip, which has solved for my personal development. Although, as @pauldambra pointed out - I don't control browsers in all situations. I'll have a think to see if using stateSanitizer makes sense for us (working on a grid product) as there's no one particular large piece of state or frequent actions - just several data for the columns. Thanks

[Methuselah96]

@rbox-risk I've finally got a chance to look into this, sorry for the delay.

I am able to reproduce what you are seeing, however, I am wondering if it has to do with whether you have the Redux DevTools open or not. The easiest way to test is to have Redux DevTools open in a separate panel (for v3.1.11 "right-click in the page > Redux DevTools > To right" and for v3.2.0 "right-click in the page > Redux DevTools > Open in a window"

Here are the results I get when I have the Redux DevTools open vs not in the different versions:

v3.1.11 Redux Devtools closed

v3.1.11 Redux DevTools open

v3.2.0 Redux DevTools closed

v3.2.0 Redux DevTools open

I am thinking based on these results, that the main issue is that v3.2.0 is sending data when the Redux DevTools are closed, which it shouldn't. It also seems like the performance/memory usage while the DevTools is open (at least in the page) is about the same.

Let me know if you can reproduce the same results, I'll start working on a fix to make sure we're not sending data to the extension when the Redux DevTools are closed.

[rbox-risk]

@Methuselah96 thanks for looking. Correct - the slowdown was noticed without having devtools open, which agrees with your findings. I've also confirmed this my end. Although - it still remains unusable for me i.e. when dev tools are open and the extension is being used. I've not yet found the time to dig deeper in to my own store/use case to see if sanitize or ignoring certain actions will help - but will do. Thank you