Platform: Issues with Devtools and StoreRouter

[axtho]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

No errors

What is the current behavior?

When using StoreDevTools and the RouterConnectionModule together I also am getting some issues, which are the same as in the 2.x branch (see https://github.com/ngrx/store-devtools/issues/61).

The error is the same:

ERROR Error: Uncaught (in promise): TypeError: toISOString is not a function
TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (_ctx.js:18)
    at derez (<anonymous>:2:5451)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (_ctx.js:18)
    at derez (<anonymous>:2:5451)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at resolvePromise (zone.js:770)
    at resolvePromise (zone.js:741)
    at zone.js:818
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

What are the steps to reproduce?

It happens after a dispatch action and then navigating away from that page. The FIRST click creates the above error. The second click works again, after which the error does not occur again.

Refreshing the page and following the same steps creates the same issue.

If I take out the RouterConnectionModule the error DOES NOT occur.

The setup in AppModule is the following:

imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpModule,
        AppRoutingModule,
        MHCoreModule,
        StoreModule.forRoot(reducers),
        !environment.prod ? StoreDevtoolsModule.instrument() : [],
        StoreRouterConnectingModule,
        EffectsModule.forRoot([
            PersonEffects,
            AuthEffects,
            SettingsEffects,
            InteractionEffects
        ]),
        FormsModule,
        ReactiveFormsModule,
        AppMaterialModule,
        MHCommonModule,
        SearchModule,
        InteractionModule
    ],

Which versions of Angular, NGRX, OS, TypeScript, CLI, browsers are affected?

node: 8.1.3
os: darwin x64
TS: 2.3.4
@angular/cli: 1.2.0
@angular/animations: 4.2.5
@angular/cdk: 2.0.0-beta.7-b00f838
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5
@angular/platform-server: 4.2.5

Is there anything else we should know?

May relate to #60

[csutorasr]

60 is not related anymore. I refreshed to the newest version of the nightlies and I get nearly the same as you.

The error can be caused by 'window.webkitStorageInfo' which is deprecated in chrome. Sometimes it stats to eat up memory and freeze the browser. The same happens in Firefox.

[csutorasr]

The problem is with the redux devtools. It causes the error. If I disable it. The website works.

[csutorasr]

I found this. It seems to happen only with lazy loaded routes.

[axtho]

In my case it was because of an undefined value in the routerLink directive. The value was not loaded yet and the error occurred. I changed the link to a function that checks whether the value is set and then navigates the route.

So, maybe that will help someone else ... it could be because you are navigating with an undefined value (like ID) in routerLink (or similar).

[karlhaas]

@brandonroberts when using the shim import 'core-js/es6/date'; which includes:

'use strict';
// 20.3.4.36 / 15.9.5.43 Date.prototype.toISOString()
var $export = require('./_export')
  , fails   = require('./_fails')
  , getTime = Date.prototype.getTime;

var lz = function(num){
  return num > 9 ? num : '0' + num;
};

// PhantomJS / old WebKit has a broken implementations
$export($export.P + $export.F * (fails(function(){
  return new Date(-5e13 - 1).toISOString() != '0385-07-25T07:06:39.999Z';
}) || !fails(function(){
  new Date(NaN).toISOString();
})), 'Date', {
  toISOString: function toISOString(){
    if(!isFinite(getTime.call(this)))throw RangeError('Invalid time value');
    var d = this
      , y = d.getUTCFullYear()
      , m = d.getUTCMilliseconds()
      , s = y < 0 ? '-' : y > 9999 ? '+' : '';
    return s + ('00000' + Math.abs(y)).slice(s ? -6 : -4) +
      '-' + lz(d.getUTCMonth() + 1) + '-' + lz(d.getUTCDate()) +
      'T' + lz(d.getUTCHours()) + ':' + lz(d.getUTCMinutes()) +
      ':' + lz(d.getUTCSeconds()) + '.' + (m > 99 ? m : '0' + lz(m)) + 'Z';
  }
});

we get the error:

Uncaught error: Error - Uncaught (in promise): TypeError: toISOString is not a function
TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (http://localhost:5555/polyfills.bundle.js:1091:15)
    at derez (<anonymous>:2:5451)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)

This happens just when using StoreRouterConnectingModule

Maybe related to https://github.com/zalmoxisus/redux-devtools-extension/issues/315

[kuncevic]

Can confirm it is happend with lazy loading module when redux-dev-tools is on so in incognito window with redux-dev-tools is off have no issues.
I am on:

├─ @ngrx/[email protected]
├─ @ngrx/[email protected]
├─ @ngrx/[email protected]
├─ @ngrx/[email protected]
└─ @ngrx/[email protected]

[Dunos]

Any idea how to fix this? For me this still happens so I cannot use the StoreRouterConnectingModule

[kuncevic]

I just spend some time on debugging the issue. So the thing is it is polyfils issue. You have to disable/comment import 'core-js/es6/date'; in polyfills.ts to workaround the error when debugging with redux-devtools.

That the piece of code from the polyfil which is causing the problem:

$export($export.P + $export.F * __webpack_require__("../../../../core-js/modules/_fails.js")(function(){
  return new Date(NaN).toJSON() !== null || Date.prototype.toJSON.call({toISOString: function(){ return 1; }}) !== 1;
}), 'Date', {
  toJSON: function toJSON(key){
    var O  = toObject(this)
      , pv = toPrimitive(O);
    return typeof pv == 'number' && !isFinite(pv) ? null : O.toISOString();
  }
});

I just reported the issue here https://github.com/zloirock/core-js/issues/347

[GuskiS]

My browser freezes and eats up memory when I add StoreRouter 🤔 But import 'core-js/es6/date'; is disabled already and I don't get any error. I think this issue should be reopened.

[axtho]

@GuskiS I "fixed" this by removing the router store ... that caused a lot of issues. But maybe you won#t be able to, so simply.

[GuskiS]

Well, I was just trying to add it, so no harm for me to not use it, but I would rather have it than not have it.

[sternetj]

I was getting this error as well. I was refactoring my app and determined that the issue was because I had included StoreRouterConnectingModule in two separate Modules. Hope this helps someone else.

[brandonroberts]

Leaving this here for reference to handle router store issue https://github.com/ngrx/platform/blob/v4.1.1/docs/router-store/api.md#custom-router-state-serializer

[GuskiS]

So the fix is to create our own, custom serializer?

[brandonroberts]

@GuskiS for now, yes. There is an Angular PR to make the router state serializable, but no timeline on when that will land.

[emcniece]

I have encountered this with an Ionic Framework (v3.9) app, even though I am not using RouterConnectionModule or StoreRouterConnectingModule. The toISOString is not a function is thrown when one specific page is pushed on to the nav stack. I don't know why it's only this one page, so strange.

Has anyone else hit this in an Ionic project?

Update: Figured out that the error was due to a store property that couldn't be serialized, possibly due to circular references. I didn't have luck with creating a custom serializer - I ended up refactoring code to make this object available in a provider instead of a store.