Platform: StoreDevToolsModule predicate throws 'state' undefined error

[MarkoSulamagi]

Minimal reproduction of the bug/regression with instructions:

predicate configuration in StoreDevtoolsModule is throwing an exception core.js:15714 ERROR TypeError: Cannot read property 'state' of undefined

The complete stacktrace

I was unable to replicate this in StackBlitz, but I added a code with minimal requirements:
https://github.com/MarkoSulamagi/ngrx-dev-tool-predicate-error
The projects contains latest Angular CLI generated project with the implemented ngrx-seed project.
With an added predicate method and an action dispatch in onNgInit()

Run it with
npm ci
ng serve

The exception is thrown on page reload to browser console.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

npm 6.5.0
node 11,6,9
ng 7.2.0
Google Chrome
Redux dev tool extension installed
Ubuntu 18.04 (but the problem can be replicated in computer with mac)

[wesleygrimes]

Hi @MarkoSulamagi I just cloned your project and ran npm ci and ng serve and I am able to run with no errors in the Chrome Dev console. One thing to note is that I am not using node v11.6.9 but rather an LTS version of node v10.13.0.

Could you provide additional steps to recreate? Thanks!

[MarkoSulamagi]

Hi @wesleygrimes . Thanks for checking it out :)

I tested with v10.13.0 as well and the result is the same. So it doesn't look like an node version issue.

Do you have Redux extension added to Chrome (the problem doesn't show up if it isn't installed)?
I'm using Chrome with redux dev tools (in Ubuntu 18.04).

The problem also happens with my coworker's computer (Mac).

[timdeschryver]

I can reproduce it, @wesleygrimes make sure you open the redux devtools window.

[timdeschryver]

At first sight I think it's because of the following:

function unliftState(liftedState) {
    var computedStates = liftedState.computedStates, currentStateIndex = liftedState.currentStateIndex;
    var state = computedStates[currentStateIndex].state;
    return state;
}

Where currentStateIndex is out of the computedStates range because we don't add every state change to computedStates? (Because of the predicate)

[wesleygrimes]

@timdeschryver perhaps it's overkill but maybe something like this will resolve the nasty undefined error.

export function unliftState(liftedState) {
  let state = null;

  if (liftedState && liftedState.computedStates && liftedState.currentStateIndex) {
    const computedStates = liftedState.computedStates;
    const currentStateIndex = liftedState.currentStateIndex;

    if (computedStates[currentStateIndex]) {
      state = computedStates[currentStateIndex].state;
    }
  }

  return state;
}

Will returning a null state cause issues?

[timdeschryver]

@wesleygrimes that could be a fix, I'm not sure. I was thinking more of keeping the states and indices in sync if that's possible.

[wesleygrimes]

@timdeschryver Agreed...it makes sense to prevent the issue in the first place.