Resolve redux devtools crashing

[msorens]

🔩 Description: What code changed, and why?

Before this patch, ReduxDevTools in the browser (Chrome or Firefox) would crash very soon after launching the Automate UI. Sometimes it would actually mention that it was going to be slow and consume a huge amount of memory.

To see this: install the Redux Dev Tools browser extension, enable it, navigate to a2-dev.test in your browser, open the browser Dev Tools (cmd + opt + i), and open the Redux tab in the browser Dev Tools.

Depending on your timing, you might see an initial few actions like this...

... but it will stop updating and eventually crash.

You can see that it is consuming huge amounts of memory via Activity Monitor, htop, or other process monitor. In the illustration I have filtered by chrome's helpers and sorted descending. The topmost "Google Chrome Helper (Renderer)" before this patch is applied will quickly grow to just about 5 GB -- yes, gigabytes! -- and that is precisely when the Redux Dev Tools will report a crash.

The redux dev tools docs include a Troubleshooting Section on Excessive Memory Use. There it talks about introducing sanitizing the state and action against huge pieces with an action sanitizer and a state sanitizer: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#actionsanitizer--statesanitizer

I went down a couple false trails trying to unravel this: the first was hunting the ui-router aspect mentioned on the troubleshooting page.

The second was ngrx/router-store crashing Chrome Redux DevTools Extension (ngrx/platform#537). That may actually have been an issue in our code base at one time, but we already have the referenced code there integrated into ngrx.reducers.ts, so it is not involved in the current issue.

The path forward

There were two things I needed to figure out to resolve this issue:

What to prune

I needed to isolate the actions and state generating large data footprints in our data store, then prune those using action/state sanitizers.

Wiring up the sanitizers

The only references (e.g., https://github.com/zalmoxisus/redux-devtools-extension/#14-using-in-production) only show using sanitizers via createStore, which is not used directly in an Angular application.

This issue (zalmoxisus/redux-devtools-extension#455) -- which again discusses the not relevant ui-router problem -- goes as far as wiring them up to a thing called composeEnhancers... but then does not show what to do with that constant.

This article (https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f) ties together the createStore and the composeEnhancers, but alas, nothing further.

One more issue (zalmoxisus/redux-devtools-extension#619) discusses some possibilities but nothing concrete there.

I finally divined that I need to use the StoreDevtoolsModule...

... and, in fact, actionSanitizer and stateSanitizer are components of the StoreDevtoolsConfig.

⛓️ Related Resources

Because this was a non-trivial exercise, I pushed an update to their troubleshooting doc via this PR.

👍 Definition of Done

👟 How to Build and Test the Change

• install the Redux Dev Tools browser extension
• enable it
• navigate to a2-dev.test in your browser
• open the browser Dev Tools (cmd + opt + i)
• open the Redux tab in the browser Dev Tools
• navigate around the Automate app
• observe the actions populating the store in the redux Dev Tools

✅ Checklist

• I have read the CONTRIBUTING document.
• Tests added/updated?
• Docs added/updated?
• All commits have been signed-off for the Developer Certification of Origin.

📷 Screenshots, if applicable

[netlify]

👷 Deploy preview for chef-automate processing.

🔨 Explore the source changes: 8e06064

🔍 Inspect the deploy logs: https://app.netlify.com/sites/chef-automate/deploys/5fd91ffe3e18c4000737d59e

[tarablack01]

LGTM 🎉

[SEAjamieD]

Fantastic work, @msorens! Thanks for fixing this incredibly important tool 🎉