JSON.stringify reactive object cause Error on IOS: json.stringify cannot serialize cyclic structures

[rick-yo]

Version

3.0.0-rc.6

Reproduction link

https://codesandbox.io/s/nifty-morse-hce62?file=/src/index.js

Steps to reproduce

It works fine on other IOS device, but throw error on IOS 12.0, safari

What is expected?

Not throw error when stringify

What is actually happening?

Throw error

---

Screenshot url: https://ibb.co/qj1YDyk

[posva]

It looks like iOS 12 still traverses the property __v_reactive even though it is not enumerable and it wouldn't show up on the final JSON.stringify result.

You can create a copy of the value as a workaround:

JSON.stringify({ ...s })

That way the non-enumerable keys will be dropped as they should

[yyx990803]

Does this happen only on iOS 12.0 or all 12.x? Can someone try it on 12.1?

If it's 12.0 only I'm afraid this is going to be a wontfix since it's technically a bug in the JavaScript Core bundled with iOS 12 and according to stats it's <0.37% of all iOS versions as of April 2020, so I'd expect it to phase out next year.

[posva]

I could only test on 12.1 on Browserstack but I couldn't find in what version this bug was fixed https://en.wikipedia.org/wiki/IOS_version_history#iOS_12

[rick-yo]

I reproduce this problem on IOS 12.4.4 (real device), and IOS simulator 12.0.

[Picknight]

@luvsic3 You can solve it as follows, I verified it on iOS 12 iPhone 8 Plus simulator:

var seen = [];
const res = JSON.stringify(s, function (key, val) {
  if (val != null && typeof val === "object") {
    if (seen.indexOf(val) >= 0) {
      return;
    }
    seen.push(val);
  }
  return val;
});

[Picknight]

Root cause speculation:

JSON.stringify() needs to get key-array first, and then get the value. It will trigger the call of Reflect.ownKeys(). The return of ownKeys will not be directly used as the key-array, Enumerable of the attribute will be verified here. But this verification does not seem to be performed on iOS 12.

For this kind of problem, I think if Vue3 tries to solve it, it may cause more problems. So I suggest users to be compatible.

Reference: ECMAScript - JSON.stringify