Redux-devtools-extension: Excessive use of memory and CPU

[lightheaded]

MacOS High Sierra 10.13.2 (17C205)
Chrome Version 63.0.3239.132 (Official Build) (64-bit)
Redux Devtools 2.15.1

Every time I inspect any Redux application, it uses up a considerable chunk of CPU and starts leaking memory.

I realise this is not enough information for debugging, but I would appreciate any thoughts on where to look for finding the leak?.

[jotatoledo]

Are you setting a limit to the state history?

[lightheaded]

Yes, but it also happens when the page is opened and only a few events are
fired (less than 5)

[zalmoxisus]

That is happening due to serialization of some huge objects included in the state or action. The solution is to sanitize them.

[phil-lgr]

I did some profiling and the extension takes 1-2s seconds to finish rendering

[phil-lgr]

This was with v2.15.2 from the Chrome store.. i'll keep digging see what's going on

[phil-lgr]

I guess I need to sanitize... ? mmmm

[phil-lgr]

thanks @zalmoxisus, ui-router puts some big objects in the reducer, just took what I needed

const actionSanitizer = action => {
    const uiRouterActions = /@ui-router.+/g;
    return uiRouterActions.test(action.type)
        ? { type: action.type, transition: sanitizeUIRouterTransition(action.transition) }
        : action;
};
const stateSanitizer = (state: AppState): any => {
    if (state.router && state.router.last && state.router.last) {
        return {
            ...state,
            router: sanitizeUIRouterTransition(state.router.last)
        };
    }
    return state;
};
const sanitizeUIRouterTransition = (transition: Transition): any => ({
    params: transition.router && transition.router.globals && transition.router.globals.params,
    current: transition.router && transition.router.globals && transition.router.globals.current,
    targetState: transition.targetState && transition.targetState().state(),
    from: transition.from && transition.from(),
    to: transition.to && transition.to()
});
const reduxDevtoolsExtensionOptions = {
    actionSanitizer,
    stateSanitizer
};
const composeEnhancers =
    (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(reduxDevtoolsExtensionOptions)) ||
    compose;

[zalmoxisus]

Thanks for the example! Added it to Troubleshooting.

[phil-lgr]

@zalmoxisus do you have a patreon or open collective for redux dev tool, I wish I had time to contribute but I don't, I would happily $ to encourage you, this extension is so important in the redux ecosystem

[phil-lgr]

OH, I just saw you have an open collective! I will contribute thanks!

[zalmoxisus]

Thanks @phil-lgr! That example is also a contribution. Other contributions are also much appreciated, I'll use them to alloc more time in finishing https://github.com/zalmoxisus/redux-devtools-extension/projects

[phil-lgr]

Done, added my monthly contribution, BTW, I would put the open collective link higher in the README.md, it's long so I didn't noticed it, IMO no need to be shy for some $, put it right on top bro! 🥇

[zalmoxisus]

Thanks again!