Issues with Devtools and StoreRouter #61

axtho · 2017-07-05T08:29:28Z

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 ngrx/store-devtools#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

The text was updated successfully, but these errors were encountered:

csutorasr · 2017-07-05T12:07:57Z

#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 · 2017-07-10T17:35:36Z

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

csutorasr · 2017-07-10T20:00:00Z

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

axtho · 2017-07-10T20:13:06Z

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 · 2017-07-24T17:23:29Z

@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 zalmoxisus/redux-devtools-extension#315

kuncevic · 2017-08-23T06:53:17Z

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/core@1.2.0
├─ @ngrx/effects@4.0.5
├─ @ngrx/router-store@4.0.4
├─ @ngrx/store-devtools@4.0.0
└─ @ngrx/store@4.0.3

Dunos · 2017-10-13T15:53:02Z

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

kuncevic · 2017-10-24T02:17:20Z

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 zloirock/core-js#347

GuskiS · 2017-12-21T12:46:26Z

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 · 2017-12-21T12:58:00Z

@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 · 2017-12-21T12:59:39Z

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 · 2018-01-17T13:37:26Z

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 · 2018-01-17T14:20:30Z

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 · 2018-01-17T15:08:16Z

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

brandonroberts · 2018-01-17T15:11:02Z

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

emcniece · 2018-03-15T19:37:20Z

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.

axtho mentioned this issue Jul 5, 2017

Plunker and new issue template #62

Closed

brandonroberts mentioned this issue Jul 14, 2017

refactor(Devtools): Show complex structures in monitor #79

Merged

MikeRyanDev closed this as completed in #79 Jul 14, 2017

kuncevic mentioned this issue Oct 24, 2017

'toISOString is not a function' when using 'redux-devtools-extension' zloirock/core-js#347

Closed

ghost mentioned this issue Feb 5, 2018

import MatDatepickerModule with "Redux DevTools" chrome extension causes an error and app crash. angular/components#9786

Closed

emcniece mentioned this issue Mar 15, 2018

RC 5: toISOString is not a function ionic-team/ionic-framework#9996

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issues with Devtools and StoreRouter #61

Issues with Devtools and StoreRouter #61

axtho commented Jul 5, 2017 •

edited

Loading

csutorasr commented Jul 5, 2017 •

edited

Loading

csutorasr commented Jul 10, 2017

csutorasr commented Jul 10, 2017

axtho commented Jul 10, 2017

karlhaas commented Jul 24, 2017

kuncevic commented Aug 23, 2017 •

edited

Loading

Dunos commented Oct 13, 2017

kuncevic commented Oct 24, 2017 •

edited

Loading

GuskiS commented Dec 21, 2017

axtho commented Dec 21, 2017

GuskiS commented Dec 21, 2017

sternetj commented Jan 17, 2018

brandonroberts commented Jan 17, 2018 •

edited

Loading

GuskiS commented Jan 17, 2018

brandonroberts commented Jan 17, 2018

emcniece commented Mar 15, 2018 •

edited

Loading

Issues with Devtools and StoreRouter #61

Issues with Devtools and StoreRouter #61

Comments

axtho commented Jul 5, 2017 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

Is there anything else we should know?

csutorasr commented Jul 5, 2017 • edited Loading

csutorasr commented Jul 10, 2017

csutorasr commented Jul 10, 2017

axtho commented Jul 10, 2017

karlhaas commented Jul 24, 2017

kuncevic commented Aug 23, 2017 • edited Loading

Dunos commented Oct 13, 2017

kuncevic commented Oct 24, 2017 • edited Loading

GuskiS commented Dec 21, 2017

axtho commented Dec 21, 2017

GuskiS commented Dec 21, 2017

sternetj commented Jan 17, 2018

brandonroberts commented Jan 17, 2018 • edited Loading

GuskiS commented Jan 17, 2018

brandonroberts commented Jan 17, 2018

emcniece commented Mar 15, 2018 • edited Loading

axtho commented Jul 5, 2017 •

edited

Loading

csutorasr commented Jul 5, 2017 •

edited

Loading

kuncevic commented Aug 23, 2017 •

edited

Loading

kuncevic commented Oct 24, 2017 •

edited

Loading

brandonroberts commented Jan 17, 2018 •

edited

Loading

emcniece commented Mar 15, 2018 •

edited

Loading