TypeError: Cannot read property 'replace' of undefined

[fluiddot]

How to reproduce it

🔍 Under investigation...

This issue seems to have originated from multiple sources:

✅ Source 1

• Solved in RichText (native): remove HTML check in getFormatColors WordPress/gutenberg#56684
• block-editor/src/components/rich-text/native/get-format-colors.native.js

Symbolicated stack trace

gutenberg/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js:19:format.forEach$argument_0
gutenberg/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js:15:newFormats.forEach$argument_0
gutenberg/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js:14:getFormatColors
gutenberg/packages/block-editor/src/components/rich-text/native/index.native.js:199:RichText#getRecord
gutenberg/packages/block-editor/src/components/rich-text/native/index.native.js:1120:RichText#render
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:4729:finishClassComponent
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:4700:updateClassComponent
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7866:beginWork$1
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7304:performUnitOfWork
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7297:workLoopSync
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7279:renderRootSync
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6975:performSyncWorkOnRoot
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:2145:flushSyncCallbacks
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8462:batchedUpdatesImpl
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:batchedUpdates
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:_receiveRootNodeIDEvent
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1178:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveEvent
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:427:__callFunction
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

Raw stack trace ⤵️

TypeError: Cannot read property 'replace' of undefined

This error is located at:

    in B
    in Unknown
    in WithPreferredColorScheme(Component)
    in Unknown
    in WithSelect(WithPreferredColorScheme(Component))
    in t
    in v
    in E
    in WithAlignmentControls(E)
    in WithAnchorControls(WithAlignmentControls(E))
    in WithBlockStyleControls(WithAnchorControls(WithAlignmentControls(E)))
    in WithFilters(E)
    in Unknown
    in RCTView
    in Unknown
    in AnimatedComponent(View)
    in Unknown
    in LongPressGestureHandler
    in Unknown
    in B
    in RCTView
    in Unknown
    in Unknown
    in _
    in Unknown
    in IfCondition(Component)
    in WithDispatch(IfCondition(Component))
    in Unknown
    in Pure(WithSelect(WithDispatch(IfCondition(Component))))
    in RCTView
    in Unknown
    in I
    in b
    in RCTView
    in Unknown
    in s
    in Unknown
    in b
    in RCTView
    in Unknown
    in RCTScrollView
    in O
    in ScrollView
    in Unknown
    in H
    in E
    in AnimatedComponent(E)
    in Unknown
    in RCTView
    in Unknown
    in C
    in v
    in RCTView
    in Unknown
    in AnimatedComponent(View)
    in Unknown
    in c
    in AnimatedComponent(c)
    in Unknown
    in Unknown
    in _
    in Unknown
    in RCTView
    in Unknown
    in Unknown
    in B
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in Unknown
    in _
    in WithPreferredColorScheme(_)
    in Unknown
    in WithSelect(WithPreferredColorScheme(_))
    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 I
    in B
    in WithDispatch(B)
    in Unknown
    in WithSelect(WithDispatch(B))
    in c
    in RNGestureHandlerRootView
    in Unknown
    in B
    in WithDispatch(B)
    in Unknown
    in WithSelect(WithDispatch(B))
    in O
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in b, js engine: hermes, stack:
anonymous@1:3141655
anonymous@1:3141571
anonymous@1:3141549
value@1:3131624
value@1:3138077
Vl@1:391735
Wl@1:391596
Ma@1:423796
zi@1:410866
Ri@1:410768
Pi@1:410652
ki@1:408152
xt@1:373277
Ce@1:424567
Ne@1:366420
Me@1:366693
receiveEvent@1:419133
value@1:169507
anonymous@1:168007
value@1:168953
value@1:167965

🔍 Source 2

• Pending to be investigated
• packages/wordcount/src/stripTags.js

Symbolicated stack trace

gutenberg/packages/wordcount/src/stripTags.js:10:stripTags
gutenberg/packages/wordcount/src/index.js:98:reduce$argument_0
gutenberg/packages/wordcount/src/index.js:98:countCharacters
gutenberg/packages/wordcount/src/index.js:127:count
gutenberg/packages/editor/src/components/provider/index.native.js:322:NativeEditorProvider#serializeToNativeAction
gutenberg/packages/editor/src/components/provider/index.native.js:117:subscribeParentGetHtml$argument_0
gutenberg/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:105:emit
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:427:__callFunction
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

Raw stack trace (from version 23.8.1) ⤵️

TypeError: Cannot read property 'replace' of undefined, js engine: hermes, stack:

anonymous@1:3867687
anonymous@1:3867213
x@1:3867156
anonymous@1:3867306
value@1:3865038
value@1:3865299
anonymous@1:3863779
value@1:165322
value@1:169507
anonymous@1:168007
value@1:168953
value@1:167965

[fluiddot]

On Android beta version 23.8-rc-2, this issue already generated 8 events so far. It's not a new issue so we shouldn't consider it a blocker. However, based on the stack trace, it might be a regression introduced in recent changes to the RichText component.

[fluiddot]

The issue spotted in version 23.8-rc-2 can be fixed via changes introduced in WordPress/gutenberg#56684. Hence, I'd advocate using that PR in the ongoing betafix 1.109.1 to address it.

[fluiddot]

Re-opening this issue as the issue originated in Source 2 is still happening in recent versions (e.g. 23.8.1).

[sentry-io]

Sentry issue: JETPACK-ANDROID-HWJ

[fluiddot]

I'm de-assigning myself from the issue as I don't plan to work on a fix in the short term.

[sentry-io]

Sentry Issue: JETPACK-ANDROID-KYN

[derekblank]

Noted that JETPACK-ANDROID-KYN was reported as a new crash, but has the same stack trace as JETPACK-ANDROID-HWJ. Linked the two issues.