After initial load every action seems to crash DevTools

[geoguide]

I'm loading the devtools like this:

const store = createStore(reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  applyMiddleware(ReduxPromise, ReduxThunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

Reducer:

export default function(state = INITIAL_STATE, action = {}) {
  switch(action.type) {
  case POPULATE_TABLE:
    return { ...state, rows: action.payload.data };
  case 'UPDATE_PAGE':
    return { ...state, page: action.payload };
  default:
    return state;
  }
}

Actions

export function fetchRows(page = 1) {
  const url = `${rootUrl}/records`;
  const request = axios.get(url);
  return function(dispatch) {
    dispatch(updatePage(page));
    return request.then((data) => {
      dispatch({
        type: POPULATE_TABLE,
        payload: data
      });
    }, (error) => {
      console.error(error);
    });
  };
}

export function updatePage(page) {
  return {
    type: 'UPDATE_PAGE',
    payload: page
  };
}

Using Chrome 65, High Sierra, React 16.3, Redux 3.7

Any help appreciated!

[miachenmtl]

I'm experiencing the same problem, but I think I see something wrong with your createStore call. I believe instead of

const store = createStore(reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  applyMiddleware(ReduxPromise, ReduxThunk));

it should be

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(
  applyMiddleware(ReduxPromise, ReduxThunk)));

My configuration is this, though, and I don't see what's wrong with it:

const configureStore = (middleware) => {
  const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(middleware))
  );
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./src/store/reducer', () => {
      const nextRootReducer = require('./src/store/reducer').default; // eslint-disable-line global-require
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
};

const sagaMiddleware = createSagaMiddleware();

const store = configureStore(sagaMiddleware);

This seems to be only a problem with Chromium. In Firefox it works okay.

[zalmoxisus]

Usually it's due to having a huge payload in the state or action object which takes to much resources to be serialized. The solution is to use actionSanitizer / stateSanitizer.

[barberdt]

My application indeed does have large payloads, but this is a recent regression for us. Up until I attempted to use the extension today, it had no issue breezing through these large payloads.

[zalmoxisus]

@barberdt last versions should be much faster as I made serialization faster and it's not serializing as much as before. The only thing that comes to mind is that before you were not getting all the data to the extension as it was blocked by the Chrome message limit, which was fixed in #582. If that's the case, then you should have this warning in the console:

Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://git.io/fpcP5 on how to configure it.

In that case before you were getting not all actions (if any at all) after reaching that message limit. See #566.

If you can share more information, I'd look into it. You can try to downgrade to 2.15.5 (here's how to install).

It's planned for 3.0 to offer an option to use the extension from client side (instead of Chrome devtools panel), so there will be no need for serialization.

[barberdt]

@zalmoxisus makes sense. Timing of you merging #582 would suggest we were in the boat of not receiving all actions before. We are indeed getting that message right before the extension crashes. Will try and put together a more detailed report soon.

[RossKinsella]

@zalmoxisus Thanks for this project. Is there a way I can export some debugging information to help with this issue?

[zalmoxisus]

@RossKinsella if possible to share a live example or a code on CodeSandbox or JSFiddle would be helpful. However I think it's not something we can fix right now. Chrome limits extension's memory size and as soon as it reaches that limit, it crashes the extension. Current workaround is to use actionSanitizer / stateSanitizer. The plan is to offer a way to inject everything in client apps process (alternatively for running extension from devpanel), so we'd not have to serialize and duplicate the history, also as it won't be in extension's process there will be no RAM limit.

[zalmoxisus]

@RossKinsella I published a build, which removes some recent changes, in #619. Let's move the discussion there.