JSApplicationIllegalArgumentException: Error while updating property 'paddingRight' in shadow node of type: RCTAztecView

[AliSoftware]

Sentry Url: https://sentry.io/share/issue/946a6f9c27654b0c85636cc60080f81e/
User Count: 345
Count: 1746
First Release: org.wordpress.android@16.4+975
First Seen: 2021-02-02T19:13:37.052000Z
Last Seen: 2021-07-12T09:36:11Z
24 Hours: 23
30 Days: 666

JSApplicationIllegalArgumentException: Error while updating property 'paddingRight' in shadow node of type: RCTAztecView

...
(9 additional frame(s) were not displayed)

[SiobhyB]

I found that this crash was introduced in version 16.4 of the app, with the only code changes including paddingRight for that release in the following PR related to the file block: WordPress/gutenberg#27228

@etoledom, do you perhaps have any insights into whether the changes in that PR may indeed by the culprit here?

I'm labelling this with a Low priority, as it doesn't appear to be impacting a high percentage of users and I wasn't able to reproduce a crash following some experiments with the file block.

[etoledom]

@SiobhyB - It seems to be possible, the release of 16.4 corresponds with the date of the PR + release process.
Is this crash only happening on Android?

It seems to be a problem on Android's RCTAztecView. Since the origin is (presumably) on RN side, It would be nice to know if this is happening on iOS also.

Since I'm not longer working on this project, I'll cc to @hypest and @mchowning (hello! :D )

[hypest]

I think the paddingRight bit is not the main culprit here. The error reported seems to be:

java.lang.IllegalArgumentException: Unknown value: 0px
    at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:61)
    at com.facebook.react.uimanager.LayoutShadowNode.setPaddings(LayoutShadowNode.java:686)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersProp
    ...

and looks related to facebook/react-native#20206.

Also note that the same error (albeit with a different px value) manifests as when trying to set paddingBottom as well so, I wouldn't try to relate it to code that sets the right padding, per se.

[SiobhyB]

Thanks for pointing me back on the right path here, @hypest! I did some more digging into the reports of this and was able to replicate the crash by adding padding with a value of 0px to the columns block.

The following code can be copied/pasted to the web in order to create a page to replicate this crash within the app:

<!-- wp:columns {"className":"is-not-stacked-on-mobile","backgroundColor":"vivid-green-cyan","textColor":"white"} -->
<div class="wp-block-columns is-not-stacked-on-mobile has-white-color has-vivid-green-cyan-background-color has-text-color has-background"><!-- wp:column {"width":"240px","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;flex-basis:240px"><!-- wp:paragraph -->
<p>Paragraph one in column one.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Hello! This is paragraph two in column two.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

[SiobhyB]

Changing the label from Low to Medium as, although Sentry indicates ~1% of users are affected, we have reproducible steps now and it's blocking a high-priority flow.

[hypest]

The following code can be copied/pasted to the web in order to create a page to replicate this crash within the app:

Thanks for digging deeper and for the html snippet that can replicate the issue! Can you also share how those 0px values came to be? Like, is that a state one can reach via the web controls in Gutenberg, or it is some hand-written html perhaps? Thanks!

[SiobhyB]

I don't have a solid answer to that, unfortunately. I was able to get the HTML snippet from following Sentry's logs to "live" examples of sites associated with this crash, rather than by "organically" creating it myself.

From everything I found in my testing and research, padding controls aren't available in the columns block yet, but will be soon. So, it's my assumption that these users are either copying/pasting their columns from somewhere or creating the HTML themselves. I wouldn't completely rule out some kind of hidden setting I'm missing, but it does seem most likely that this was added manually at this time.