Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JavascriptException: TypeError: Cannot read property 'attributes' of undefined #6084

Closed
sentry-io bot opened this issue Aug 18, 2023 · 10 comments · Fixed by WordPress/gutenberg#56723
Closed

JavascriptException: TypeError: Cannot read property 'attributes' of undefined #6084

sentry-io bot opened this issue Aug 18, 2023 · 10 comments · Fixed by WordPress/gutenberg#56723
Assignees
@derekblank
Labels
[Type] Bug Something isn't working

Comments

@sentry-io
Copy link

sentry-io bot commented Aug 18, 2023 •
edited by fluiddot

Sentry Issue: JETPACK-ANDROID-AK2

How to reproduce it

  1. Open the app and create a post.
  2. Switch to HTML mode.
  3. Paste the following HTML code:
<div>
<p>Hello world!</p>
</div>
  1. Switch back to Visual mode.
  2. Tap two times on the Classic block to present the bottom sheet.
  3. Tap on Convert to blocks option.
  4. Observe the crash.

Stack trace

JavascriptException: TypeError: Cannot read property 'attributes' of undefined

This error is located at:
    in y
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in A
    in Unknown
    in RCTView
    in Unknown
    in _
    in RCTView
    in Unknown
    in T
    in Unknown
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in O
    in RCTView
    in Unknown
    in A
    in Unknown
    in withAnimatable(View)
    in RCTView
    in Unknown
    in Unknown
    in RCTModalHostView
    in h
    in T
    in C
    in WithPreferredColorScheme(C)
    in C
    in y
    in R
    in WithPreferredColorScheme(R)
    in Unknown
    in WithSelect(WithPreferredColorScheme(R))
    in WithDispatch(WithSelect(WithPreferredColorScheme(R)))
    in AndroidHorizontalScrollContentView
    in AndroidHorizontalScrollView
    in O
    in ScrollView
    in RCTView
    in Unknown
    in Unknown
    in Unknown
    in WithViewportMatch(Component)
    in WithDispatch(WithViewportMatch(Component))
    in Unknown
    in WithSelect(WithDispatch(WithViewportMatch(Component)))
    in p
    in RCTView
    in Unknown
    in C
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in Unknown
    in R
    in WithPreferredColorScheme(R)
    in Unknown
    in WithSelect(WithPreferredColorScheme(R))
    in RNCSafeAreaProvider
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in WithRegistryProvider(Component)
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in WithRegistryProvider(Component)
    in h
    in H
    in WithDispatch(H)
    in Unknown
    in WithSelect(WithDispatch(H))
    in y
    in RNGestureHandlerRootView
    in Unknown
    in F
    in WithDispatch(F)
    in Unknown
    in WithSelect(WithDispatch(F))
    in O
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in b, js engine: hermes, stack:
anonymous@1:1742892
anonymous@1:1751396
anonymous@1:1751308
anonymous@1:1797646
t@1:1797462
anonymous@1:3141692
y@1:3140924
Or@1:379418
Ma@1:420000
zi@1:406672
Ri@1:406574
Pi@1:406458
ki@1:403958
xt@1:369078
Ce@1:420373
Ne@1:362211
Me@1:362484
receiveTouches@1:415209
value@1:164399
anonymous@1:162899
value@1:163845
value@1:162857

    at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:72)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
    at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
    at com.facebook.jni.NativeRunnable.run(NativeRunnable.java)
...
(6 additional frame(s) were not displayed)
@derekblank derekblank added the [Type] Bug Something isn't working label Aug 18, 2023
@mkevins
Copy link
Contributor

mkevins commented Aug 18, 2023

I've looked into this a bit, and used source maps from v1.101.0 to symbolicate the trace, giving the following:

gutenberg-mobile/gutenberg/packages/blocks/src/api/parser/get-block-attributes.js:283:Object.entries.map$argument_0
gutenberg-mobile/gutenberg/packages/blocks/src/api/raw-handling/html-to-blocks.js:27:findTransform$argument_1
gutenberg-mobile/gutenberg/packages/blocks/src/api/raw-handling/html-to-blocks.js:31:Array.from.flatMap$argument_0
gutenberg-mobile/gutenberg/packages/blocks/src/api/categories.js:4:<global>
gutenberg-mobile/gutenberg/packages/blocks/src/api/raw-handling/index.js:63:pieces.map$argument_0
gutenberg-mobile/gutenberg/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js:16:<global>
gutenberg-mobile/gutenberg/packages/block-editor/src/components/inserter/block-types-tab.native.js:60:BlockTypesTab
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:3525:renderWithHooks
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7743:beginWork$1
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7304:performUnitOfWork
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7297:workLoopSync
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7279:renderRootSync
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6975:performSyncWorkOnRoot
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:2145:flushSyncCallbacks
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8462:batchedUpdatesImpl
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:batchedUpdates
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:_receiveRootNodeIDEvent
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1209:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:427:__callFunction
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

I'm unsure whether this mapped trace is accurate, since some "leaps" seem to be made between some parts of the call stack, but a few sections do appear to line up, suggesting that it isn't an entirely mis-matched symbolication (maybe it is just a bit sparse, due to transpilation, etc. 🤷‍♂️ ).

I've also looked at the code paths around this trace:

Which may provide a clue that this could have something to do with raw-handling and / or the inserter.

@dcalhoun
Copy link
Member

dcalhoun commented Aug 18, 2023 •
edited

The first of the two stack traces from the Sentry report looks quite different, even though Sentry groups it together under the same error. The trace does not point to specific first-party code, but third-party code related to pressability.

Gutenberg only uses Pressable (successor to Touchable) in a few places. React Native also uses pressability in Text and TextInput components. It feels like this stack trace is a "red herring" or unrelated.

The previously shared attributes trace feel more insightful.

com.facebook.react.common.JavascriptException: TypeError: false is not a function, js engine: hermes, stack:
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:758:_performTransitionSideEffects
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:695:_receiveSignal
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:525:responderEventHandlers.onResponderRelease
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:22:invokeGuardedCallbackImpl
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:40:invokeGuardedCallback
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:53:invokeGuardedCallbackAndCatchFirstError
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:73:executeDispatch
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1125:executeDispatchesAndReleaseTopLevel
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:361:forEachAccumulated
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1160:batchedUpdates$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8457:batchedUpdatesImpl
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:batchedUpdates
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:_receiveRootNodeIDEvent
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1209:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:427:__callFunction
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

@dcalhoun
Copy link
Member

I am unable to reproduce this, but noting a few things in the breadcrumbs:

  • References to core/freeform blocks, which I believe is the Classic editor block.
  • References to drag-and-drop events of the core/freeform block.
  • The entity being edited is a Page, not a Post.

@mkevins
Copy link
Contributor

mkevins commented Aug 20, 2023

Thank you for the additional info and trace David 👍 .

References to drag-and-drop events of the core/freeform block.

This clue might correlate with the raw-handling code paths that turned up in the other trace... perhaps somehow something goes wrong while the dropped html content is being parsed 🤔 - it could be something that is particular to the content, so maybe this makes it tricky to reproduce. This is just a theory / hunch, though, so please take it with a grain of salt. 🤷‍♂️

@dcalhoun
Copy link
Member

It seems like Sentry pretty consistently erroneously groups multiple React Native crashes. I symbolicated one of the more recent stack traces for JETPACK-ANDROID-AK2 and it mirrors stack traces found in JETPACK-ANDROID-7XY, which is addressed by @geriux's WordPress/gutenberg#53745 and an associated project issue.

com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'blur' of null, js engine: hermes, stack:
gutenberg-mobile/gutenberg/packages/components/src/search-control/index.native.js:117:useEffect$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Core/Timers/JSTimers.js:213:_allocateCallback$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Core/Timers/JSTimers.js:111:_callTimer
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/Core/Timers/JSTimers.js:359:callTimers
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:427:__callFunction
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
gutenberg-mobile/gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

Additionally, JETPACK-ANDROID-7XY is attached to wordpress-mobile/WordPress-Android#18750 which focuses on Reanimated and Maximum call stack size exceeded errors.

All that to say — the Sentry reports/groupings are very misleading. Reports that appear to be "new" seem to often be pre-existing and likely grouped with unrelated stack traces. It makes it quite difficult to track them accurately. 😕 It seems we need to focus on specific stack traces, rather than the top-level grouping Sentry is presenting.

@fluiddot
Copy link
Contributor

fluiddot commented Sep 7, 2023

Regarding the original issue referenced in this GitHub issue (TypeError: Cannot read property 'attributes' of undefined), I found out in one of the events that this is likely caused by pasting a specific piece of HTML:

Extracted from Sentry event:

'Processed HTML piece:\n\n', '<ol><li>Ըստ ներքևում բերված նկարների՝ աղյուսակում գրեք կենդանի և անկենդան բնության մարմինների անուններ:</li></ol><figure class="wp-block-table"><figcaption class="wp-element-caption"><a href="https://*******.files.wordpress.com/2022/09/img_20220905_124218.jpg"></a></figcaption></figure>'

I tried to reproduce it by generating an HTML page with the above code. However, when I paste it into the editor, it does not pass the same HTML:

ol><li>Ըստ ներքևում բերված նկարների՝ աղյուսակում գրեք կենդանի և անկենդան բնության մարմինների անուններ:</li></ol><p><a href="https://********.files.wordpress.com/2022/09/img_20220905_124218.jpg"></a></p>

I'm wondering how the user managed to copy that piece of HTML 🤔 .

@dcalhoun
Copy link
Member

dcalhoun commented Sep 7, 2023

I'm wondering how the user managed to copy that piece of HTML

Given there are references to core/freeform in the logs, I wonder if it was somehow copied or duplicated from within a Classic block.

@fluiddot
Copy link
Contributor

fluiddot commented Sep 7, 2023 •
edited

Given there are references to core/freeform in the logs, I wonder if it was somehow copied or duplicated from within a Classic block.

I also tried using the Classic block (core/freeform) as well as the HTML block (in the web version as it's not supported yet in native), but still had no luck reproducing it. I'm wondering if the content copy was made from a different app 🤔 .

@mkevins
Copy link
Contributor

mkevins commented Sep 7, 2023

I'm wondering if the content copy was made from a different app 🤔 .

Hm.. one possibility that comes to mind is the browser (copying content from mobile web). Any web-enabled block should be enabled there, so I wonder if that could help in reproducing it 🤔

@fluiddot fluiddot mentioned this issue Nov 28, 2023
Closed
@fluiddot fluiddot mentioned this issue Nov 29, 2023
Closed
@fluiddot
Copy link
Contributor

fluiddot commented Dec 1, 2023

Heads up that I found out the steps to reproduce it and added them to the PR's description.

@fluiddot fluiddot mentioned this issue Dec 1, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@derekblank derekblank

Labels
[Type] Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[RNMobile] Fix HTML to blocks conversion when no transformations are available WordPress/gutenberg
4 participants
@dcalhoun @derekblank @mkevins @fluiddot