folly::toJson: JSON object value was a NaN or INF

[asklar]

Originally reported here: asklar/react-native-xaml#120 by @rymate1234. See that issue for a repro app.

When nesting a RN FlatList within a native viewmanager (e.g. a react-native-xaml Grid), and web debugging is enabled, the user gets a crash: folly::toJson: JSON object value was a NaN or INF

During layout, ViewManagerBase will dispatch a topLayout event, and serialize the layout props (left, top, width and height) into a json using folly, to send it over the bridge. The problem is that the native XAML control will have its width / height as "auto", which is represented by the float value -NaN. Folly does not have a way to serialize NaN or INF onto json, so it throws that exception instead.

When using JSI instead, we end up with stuff not rendering (since nesting layouts doesn't work quite right), but that is a different bug (#7601)

[NickGerleman]

When does the conversion from dynamic to JSON happen? Not sure if NaN etc are supported in JSON in general.

[NickGerleman]

Is it the serialization in WebSocketJSExecutor::Call?

[asklar]

it's dispatching the topLayout event: https://github.com/microsoft/react-native-windows/blob/ceb4a66113eac76f8f54c50471a17c0174221081/vnext/Microsoft.ReactNative/Views/ViewManagerBase.cpp#L351-L355

[NickGerleman]

I meant more where conversion happens to JSON.

[NickGerleman]

I.e. Dynamic is mostly just an untyped map. It's not serialized to JSON unless explicitly converted to it.

[chrisglein]

Hypothesis that this may go away with web debugging. Although we're not there yet.

Could verify by trying this with web debugging disabled?

Although difference between web debugging and not is going to be crash or not. Values are still going to be wrong.

This does sound like a problem:

Not sure if NaN etc are supported in JSON in general.

[acoates-ms]

There is an option you can pass into folly toJson to allow NaN or not. (serialization_opts::allow_nan_inf). I dont think NaN is strict JSON though.

However, NaN is also not a valid layout. -- So why are we passing NaN to onLayout? What does core return in this case?

[tero-paananen]

I start receiving this bug while navigating in the app after upgrading into

• "react-native-windows": "0.68.12",
• "@react-navigation/native": "^6.0.11",
• "@react-navigation/stack": "^6.2.2",
• "react-native-screens": "^3.15.0",

and have to find some solution/hack for this now...

Error is: folly:toJson: JSON object value was a NaN when serializing value at "arguments" ->2->2->"layout"->"height" and web debugger is enabled.

No error when InstanceSettings.UseWebDebugger = false;

I think that react-navigation and react-native-screens upgrade is behind this new error in my app + my props setup into navigation.

( My best quess is that maybe fails because RNScreen is runtimeclass RNScreensModule : Windows.UI.Xaml.Controls.TextBox but this issue is now more or less react-native-screens issue i think )

I tried to use Windows.UI.Xaml.Controls.UserControl in RNScreen.idl but did not help.

[cjhines]

This issue is also being discussed in the react-navigation repo: https://github.com/react-navigation/react-navigation/issues/10719

[cjhines]

Interestingly this doesn't happen to me on RNW 0.68.9.

Unfortunately I have to upgrade to 0.68.11 for another navigation related bug.

[tero-paananen]

I received it again on RNW 0.68.14

[tero-paananen]

Maybe this PR tries to fix this issue https://github.com/microsoft/react-native-windows/pull/10422