"Maximum call stack size exceeded." triggered by version 0.0.18 [iOS]

[webraptor]

Platform: iOS only; [Android is OK]

We've just upgraded to redux-persist-transform-filter: 0.0.18 and the following error is thrown.
Unfortunately, the call stack isn't very useful.

Maximum call stack size exceeded.

initCloneObject
    index.js:1253:66
baseClone
    index.js:869:31
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17

[edy]

how does your state look like? could you provide a reproducible example? i can only test with android devices

[sibelius]

I think this happen when there are cyclic dependencies in redux store

[webraptor]

We finally managed to track the issue down on RN 0.57.5 .
Created an issue with lodash.clonedeep as well.

Reverting to 0.0.17 fixes the problem.

[webraptor]

@sibelius we are using redux-persist-transform-filter exactly to eliminate objects that cannot be serialized. Disabling the redux-persist-transform-filter functionality in the app produces exactly errors specific to trying to serialize non-serializable objects with redux-persist.

[webraptor]

The issue on lodash was closed as it was the intended behaviour:

Hi @webraptor!

The recursive implementation of cloneDeep was by design with the shortcoming that in some rare cases it could run into stack size exceeded issues. I'm not how cloneDeep is being used but chances are a more specialized clone tailored to their scenario will be a better option.

With this in mind, alternatives to commit baddb0597eab5ded23f08d9d88111929b45dc693 should be considered because we can't really have production apps that may crash at any time...

[edy]

What about just using JSON.parse(JSON.stringify(state)) instead of cloneDeep(state)? Would that solve the issue?

[webraptor]

I'll try it out tomorrow and come back with the results.

[webraptor]

@edy unfortunately it doesn't work, error thrown is: JSON.stringify cannot serialize cyclic structures
The circular structure is within actioncable (react-native-actioncable) which we actually try to blacklist.

Looked into the code for blacklisting a little more and looks like we should filter out blacklisted properties before creating a deepclone?

[edy]

yeah, i think that would be the best solution. the thing is, i didn't want to manipulate the state directly, so I deepcloned it.