Trying to combat redux devtools crashing

Before crashing it at least complains it is going to be slow
and consume a huge amount of memory.
That is described here:
https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

In there is a link to a more useful example:
zalmoxisus/redux-devtools-extension#455

Latest conversation seems to be here:
zalmoxisus/redux-devtools-extension#619

Signed-off-by: michael sorens <[email protected]>

Author: msorens

components/automate-ui/src/app/app.module.ts

@@ -17,7 +17,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { StoreModule } from '@ngrx/store';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { NgrxEffectsModule } from './ngrx.effects';
-import { ngrxReducers, RouterSerializer, runtimeChecks } from './ngrx.reducers';
+import { ngrxReducers, RouterSerializer, runtimeChecks, actionSanitizer, stateSanitizer } from './ngrx.reducers';
 
 // angular material stuff
 import {
@@ -276,7 +276,8 @@ import { WelcomeModalComponent } from './page-components/welcome-modal/welcome-m
     StoreRouterConnectingModule.forRoot({
       serializer: RouterSerializer
     }),
-    !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : []
+    environment.production ? []
+      : StoreDevtoolsModule.instrument({ maxAge: 25 /* states */, actionSanitizer, stateSanitizer })
   ],
   providers: [
     ApiTokenRequests,

components/automate-ui/src/app/ngrx.reducers.ts

@@ -250,3 +250,26 @@ export const ngrxReducers = {
   users: userEntity.userEntityReducer,
   userSelf: userSelfEntity.userSelfEntityReducer
 };
+
+export const actionSanitizer = action => {
+  const uiRouterActions = /@ui-router.+/g;
+  return uiRouterActions.test(action.type)
+    ? { type: action.type, transition: sanitizeUIRouterTransition(action.transition) }
+    : action;
+};
+export const stateSanitizer = (state): any => {
+  if (state.router && state.router.last && state.router.last) {
+    return {
+      ...state,
+      router: sanitizeUIRouterTransition(state.router.last)
+    };
+  }
+  return state;
+};
+const sanitizeUIRouterTransition = (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()
+});