[ngrx] Get 'window.webkitStorageInfo' depreciation warning and crashes during serialization

[jameshydeamg]

I'm not sure what it is that's triggering the issue, but often I get a warning in Chrome:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

Once I get this warning, Redux crashes and I have to reload it.

There's a stack trace (full trace here), but the most relevent lines to Redux probably is the following two:

...
push../node_modules/@ngrx/store-devtools/fesm5/store-devtools.js.DevtoolsExtension.notify @ store-devtools.js:210
StoreDevtools.liftedAction$.pipe.Object.state @ store-devtools.js:649
...

Chrome version: 70.0.3538.110 Redux version: 2.16.5

[zalmoxisus]

Thanks for the report. I edited the title to reflect that it's not about Redux (I mean it's related to Redux DevTools, but not Redux as a library), but @ngrx/store-devtools according to your stack trace.window.webkitStorageInfo is called from the object you're passing during serialization. There should be some custom types calling it during toJSON, then probably also having an infinite recursion there. The solution is to sanitize them. I didn't follow @ngrx/store-devtools recently, and not sure it supports actionSanitizer / stateSanitizer.

[zalmoxisus]

Could you put a live example, a CodeSandbox/JSFiddle or an repo I could run to reproduce?

[sbkpilot1]

I'm getting the same exact warning after my upgrade to ngrx 7. Trying to diagnose it led me here!

I see this is the point in the code where the error is triggered so it's something inside "send":

DevtoolsExtension.prototype.sendToReduxDevtools = function (send) {
        try {
            send();
        }
        catch (err) {
            console.warn('@ngrx/store-devtools: something went wrong inside the redux devtools', err);
        }
    };

[zalmoxisus]

@sbkpilot1 looks like it's a problem with serializing some client data. The example here works without problems. If you can share a demo to reproduce would be helpful.

[sbkpilot1]

@zalmoxisus unfortunately it's part of a larger application so I can't replicate the problem in isolation. Something odd I noticed is that if I launch a Chrome debug session from VSCode then I no longer get that warning in the console (ensured that all log levels are checked in the newly spawned browser instance).

Trying to research this more it looks like something is iterating over the window object and it generates that warning when it hits that particular property, speculating here.

The code unchanged works with no warnings in version 6.

[sbkpilot1]

fyi, traced the issue to some stopgap code I had added to resolve this bug https://github.com/ngrx/platform/issues/975

The deprecation warning went away when I commented out that block. I'm still not sure why the offline storage is relevant to this though.

the code that I was using as a stopgap was to workaround the Navigation action firing before Guards are invoked which I believe is now fixed with v7. The code just dispatches a Router Navigated event on the NavigationEnd event of the router with a new RouterNavigationPayload.

[karloscode]

Hi , same issue here , any advances? Beginning when try to save "componentRef" to store, but now i removed this object from store and the problem dont solve.

Edit: removing the componentRefs in the store the problem solve. I think devtools create a circular dependency when find a componentRef in the store.

version 2.17.0