Reactotron: "n.slice is not a function" with redux action parameter contaning circular references

[cwagner22]

I have this error when I am dispatching a redux action with an object containing circular references as parameter. The object is a WatermelonDB record but I am assuming the issue comes from the circular references.

"message": "n.slice is not a function. (In 'n.slice()', 'n.slice' is undefined)",
"stack": [
  {
    "functionName": null,
    "lineNumber": 1,
    "columnNumber": 3594,
    "fileName": "/Users/chris/Dev/Projects/MyProject/node_modules/reactotron-react-native/node_modules/reactotron-core-client/dist/reactotron-core-client.js"
  },
  {
    "functionName": "send",
    "lineNumber": 1,
    "columnNumber": 5525,
    "fileName": "/Users/chris/Dev/Projects/MyProject/node_modules/reactotron-react-native/node_modules/reactotron-core-client/dist/reactotron-core-client.js"
  },
  {
    "functionName": "reportAction",
    "lineNumber": 149,
    "columnNumber": 18,
    "fileName": "/Users/chris/Dev/Projects/MyProject/node_modules/reactotron-redux/dist/index.js"
  },
  {
    "functionName": "dispatch",
    "lineNumber": 126,
    "columnNumber": 41,
    "fileName": "/Users/chris/Dev/Projects/MyProject/node_modules/reactotron-redux/dist/index.js"
  },
  {
    "functionName": null,
    "lineNumber": 1412,
    "columnNumber": 26,
    "fileName": "/Users/chris/Dev/Projects/MyProject/node_modules/@redux-saga/core/dist/redux-saga-core.dev.cjs.js"
  },
  {
    "functionName": "loadLesson",
    "lineNumber": 138,
    "columnNumber": 35,
    "fileName": "/Users/chris/Dev/Projects/MyProject/App/Containers/LessonsListScreen.js"
  },
...

I don't have this issue with Redux DevTools. Is there any way to avoid it? I know serializable data is prefered with Redux but I'm only using the data in my redux saga, without saving it to the store.

[rmevans9]

Hey @cwagner22!

A quick way to work around this issue is using the except option to avoid sending over the action in question here.

ref: https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md#except

I would be interested in knowing if we can recreate this issue in a small sample project though so we can get a better fix then you just having to ignore an action completely if we can. Do you think you could make a small sample case?

[cwagner22]

Thanks, @rmevans9
I have found a way to reproduce the issue, not because of circular references but by passing an object like:

    const test = {
      map: new Map()
    };

So simply passing test to my action causes the n.slice is not a function error.

[rmevans9]

Hey @cwagner22

I just tested this out with the latest version of everything (betas, etc) and didn't encounter this issue. I am wondering if some recent change actually resolved this issue for you? Would you be able to upgrade to the best version of both reactotron-react-native and reactotron-redux and test in your main app and let us know if this is resolved?

[cwagner22]

I can't reproduce the issue anymore so the latest versions might have fixed it. However now it's still not working properly with my app. If the object I pass to my action is too big (like a collection of objects with many circular references}, then I either get: Out of Memory Error or Reactotron disconnects.

I spent 2 days trying to create a reproducable small project and I still don't understand exactly what's the issue. I guess the serialize function isn't optimized enough for such big objects. (despite working fine with redux-devtool)

Nonetheless, here is a repo that should allow you to reproduce the issue: https://github.com/cwagner22/IgniteWatermelonApp (generated via Ignite, run on ios simulator)
It basically creates a bunch of WatermelonDB records at startup and try to dispatch an action with those as parameter. (in App/Containers/RootContainer.js)

On my machine:
The first run: Freeze then Out of Memory Error
The second run (database already generated): Reactotron disconnects.

If this is too much of an edge case feel free to close.

[rmevans9]

Thank you so much for the example repo! I could see how an item that is too large could cause problems during serialization. I will try and see if I could figure out how to make this better.

A note about why it may work in redux-devtool but not reactotron: In RN you must turn on remote debugging to use redux-devtool. When you do that your app is actually getting executed by chrome. Not the JSC on the device. Because of that redux-devtool has basically direct access to the data where reactotron is serializing it to a string to pass over a websocket connection so that it can avoid having the remote debugging requirement.

That said, I would like to see if I can make this better. If not better at minimum prevent this case from causing crashes.

[cwagner22]

Ok, that makes sense!
PS: I couldn't update reactotron-redux to 3.0.0-beta.3 because Reactotron.createStore is undefined. You can also reproduce it in the repo.

[rmevans9]

Yeah, createStore is actually not a thing any more in the v3 of reactotron redux. I am trying to make the API better. I will be documenting this change soon but for now you would need to switch to calling the regular createStore from redux and then put on the reactotron enhancer like this:

const store = createStore(rootReducer, compose(middleware, Reactotron.createEnhancer()))

ref: https://github.com/infinitered/reactotron/blob/master/examples/demo-react-native/App/Redux/index.js#L37

[rmevans9]

v3.0.0 of reactotron-redux is released :tada: I still need to dig into this issue but if you have an interest of using the newest plugin without it being a beta version its out there :+1: