Search code examples
ngrxredux-devtools-extension

Redux devtools extension error when dispatching @ngrx/router-store action

I'm using the following libraries:

  • Angular 4
  • @ngrx/router-store
  • @ngrx/store-devtools

Just recently, when trying to dispatch a go router action with the relativeTo set to the current active route: 

go(['test', id], {}, {relativeTo: this._active}))

I am getting this error:

ERROR TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (shim.js:736)
    at derez (<anonymous>:2:5166)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)

It seems there is a problem with the devtools handling the ActivatedRoute in the payload (similar to this issue).

If I implement a new version of the go action creator (as suggested here: Redux Devtools Extension Troubleshooting)to add a toJSON function to the NavigationExtras, then it all works:

go(path: string|any[], query?: any, extras?: NavigationExtras): any {
    extras['toJSON'] = function(): any {
        return { ...this, relativeTo: this.relativeTo.snapshot.url };
    };

    const payload = { path, query, extras };
    return { type: routerActions.GO, payload };
}

Has anyone else run into this issue? Any suggestions on how to fix this?

UPDATE: Looks like it also has something to do with lazy-loaded routes. The error only happens if the current route is part of a lazy-loaded module (i.e. via loadChildren)

Solution

  • Most likely you're passing a React Synthetic Event, which cannot be serialized. See the similar issue and the troubleshooting. Note that the solution in that issue will not be available in React 16, since we're relying on React internals. So, I recommend to choose one of the solutions from the troubleshooting.

    However, it would be great if we could make jsan not to throw in this case, but at least to skip those data. If you could add a pr with a test case there, it would be much appreciated. Seems like the issue with toISOString is only for specific events as I wasn't able to reproduce.