it's crashed when I try to see a ref via redux-devtools-extention

[GilHyeon]

I see #513.

I stored two refs of my components to the store.

The chrome dev tool was crashed when I tried to see the refs via redux-devtools-extention.

Should be fixed in last version as per kolodny/jsan#13. Feel free to reopen the issue if it's still relevant.

It resolved only two refs... But, I stored more than two.. 4 or more.. And again chrome dev tool was crashed when I tried to see the refs via redux-devtools-extention.

[uni-zheng]

Hi, There is same problem.

List env below React 16.5.2 Chrome 73.0.3683.103 Redux DevTools 2.17.0

DevTools was crashed when I stored only one ref.

If I miss provide any info please let me know. Thank you.

[nagman]

Same here. With only one ref.

React: 16.8.5 Redux DevTools: 2.17.0 Redux DevTools Extension: 2.13.8 Opera: 60.0.3255.70

Actually, for me, it doesn't crash. But it's extremely slow.

[0xdevalias]

I was trying to pass a single ref in a redux action, when I click into ReduxDevtools either the entire tab crashes, or devtools manages to catch it as it tries to save itself from an out of memory error.

React: 16.8.6 Redux DevTools Extension: 2.17.0 Chrome: 74.0.3729.131 (Official Build) (64-bit)

[0xdevalias]

I was doing some investigation in https://github.com/kolodny/jsan/issues/29 and I believe where this happens it's getting into a cycle with the referenced HTMLElement, then hitting the redux store, then presumably getting the ref again at some point and cycling again.

I noticed in my callstack that the ref turned into it basically trying to serialize a bunch of react internals, and my entire redux store, and presumably a whole bunch of my DOM.

I figured out a really simple high level fix (https://github.com/kolodny/jsan/issues/29#issuecomment-495415792) that makes it pretty easy to avoid this issue (at least in a naive way, they may be a better 'real' fix): lib/cycle.js#L92-L96

        return "toJSON failed for '" + (map.get(value) || keyString) + "'";
      }
    }

+  if (value instanceof HTMLElement ) {
+      return {$jsan: 'HTMLElement::'+value.tagName}
+    }

    if (typeof value === 'object' && value !== null &&

Output:

{
  "inputRef": {
    "current": {
      "$jsan": "HTMLElement::INPUT"
    }
  }
}

[aynzad]

Hi, I had this problem too and finally I ended up with this temporary solution that is using actionSanitizer & stateSanitizer to mapped ref value with something else :

const actionSanitizer = (action: any) =>
  action.type === "CHANGE_CHAT_REF"
    ? { ...action, payload: "not null" }
    : action;
const stateSanitizer = (state: any) =>
  state.ref.chatRef ? { ...state, ref: { chatRef: "not null" } } : state;

const composeEnhancers = composeWithDevTools({
  actionSanitizer,
  stateSanitizer,
});

let store: Store = createStore(
  persistedReducer,
  isDev
    ? composeEnhancers(applyMiddleware(...middlewares))
    : applyMiddleware(...middlewares),
);