TypeError: Cannot read property 'toString' of undefined

Question

TypeError: Cannot read property 'toString' of undefined

Closed this issue 8 months ago · 5 comments

Sentry issue: https://a8c.sentry.io/share/issue/27603df879a74eda975e3b0227b2535c/

⚠️ NOTE: On Android, all Javascript exceptions are being grouped in a single Sentry issue. Hence, we can't reference the specific crash here. Navigate to "All Events" in order to find events related to this crash.

Symbolicated stack trace:

gutenberg/packages/rich-text/src/split.js:47:text.split.map$argument_0
gutenberg/packages/rich-text/src/component/use-format-boundaries.js:23:onKeyDown
gutenberg/packages/rich-text/src/component/use-format-boundaries.js:20:onKeyDown
gutenberg/packages/blocks/src/api/validation/index.js:793:isValidBlockContent
gutenberg/packages/blocks/src/api/validation/index.js:754:validateBlock
gutenberg/packages/block-library/src/embed/edit.native.js:176:EmbedEdit
gutenberg/node_modules/equivalent-key-map/equivalent-key-map.js:270:<anonymous>
null:null:null
gutenberg/node_modules/react-native-video/Video.js:227:_onAudioFocusChanged
gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:821:_measureCallback
gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:402:Pressability
gutenberg/node_modules/react-native/Libraries/Pressability/Pressability.js:25:<global>
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:408:<global>
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:420:<global>
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:425:<global>
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:506:ResponderEventPlugin.extractEvents
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:201:releasePooledEvent
null:null:null
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:247:recordTouchStart
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:4054:HooksDispatcherOnMount.useLayoutEffect
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:197:createOrGetPooledEvent
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:242:recordTouchStart
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8356:findHostInstance
gutenberg/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:14:<global>
gutenberg/node_modules/react-native/Libraries/ReactNative/RendererProxy.js:26:<global>
gutenberg/node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js:31:module.exports.get__BatchedBridge
gutenberg/node_modules/react-native/Libraries/ReactNative/RendererProxy.js:26:<global>
mechanism

Answer 1 · 2024-01-22T05:26:04.000Z

The stack trace appears to reference the following code in embed/edit.native.js#L152:

useEffect( () => {
	if ( ! cannotEmbed || fetching || ! url ) {
		return;
	}

	// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
	if ( getAuthority( url ) === 'x.com' ) {
		const newURL = new URL( url );
		newURL.host = 'twitter.com';
		setAttributes( { url: newURL.toString() } );
	}
}, [ url, cannotEmbed, fetching, setAttributes ] );

I wondered if there could an issue with newURL.toString() where newURL is not defined. I tried testing the Embed block with various x.com URLs, including:

Creating an embed and link from pasting an x.com URL, such as https://x.com/WordPress/status/1603858217771098121
Creating an embed and link from a Twitter.com share URL, such as https://twitter.com/WordPress/status/1603858217771098121
Applying different rich text actions on the URL such as text formatting, backspace, undo/redo, etc.

In all cases so far I was not able to produce a crash, and the Embed block worked as expected.

Answer 2 · 2024-01-22T18:28:26.000Z

Hey @derekblank, I symbolicated the stack using the following parameters and I'm getting a different source:

Platform: ios
Gutenberg Mobile version: 1.110.0
Stack trace:

value@1:3164976
Ua@1:408091
Li@1:414741
Ii@1:414343
ki@1:411424
xt@1:376438
Ce@1:427728
Ne@1:369581
Me@1:369854
receiveTouches@1:422564
value@1:171281
anonymous@1:169781
value@1:170727
value@1:169739

Symbolicated stack trace:

gutenberg/packages/block-editor/src/components/rich-text/native/index.native.js:831:RichText#componentDidUpdate
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6499:commitLayoutEffects
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7412:commitRootImpl
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7354:commitRoot
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6992: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:1209:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches
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

It points to the RichText component and the use of toString introduced in WordPress/gutenberg#57028.

Answer 3 · 2024-01-22T18:28:53.000Z

Heads up that this issue will be fixed via WordPress/gutenberg#58088.

Answer 4 · 2024-01-22T19:47:11.000Z

Closing as I understand merging WordPress/gutenberg#58088 resolved this. We are preparing a v1.110.1 release to publish the fix. Please re-open this issue if needed.

Answer 5 · 2024-01-22T22:19:06.000Z

@fluiddot Thanks for updating -- indeed I was symbolicating against the following stack trace, which was from a different toString Sentry issue:

JavascriptException
TypeError: Cannot read property 'attributes' of undefined, js engine: hermes, stack:
anonymous@1:1673433
anonymous@1:1681959
anonymous@1:1681871
anonymous@1:1728576
t@1:1728392
replaceBlocks@1:4102727
anonymous@1:1590681
onPress@1:4101819
onPress@1:2511982
value@1:438948
value@1:438520
onResponderRelease@1:437337
c@1:361430
m@1:361487
v@1:361519
w@1:361651
Le@1:365889
$@1:363158
anonymous@1:366241
Ce@1:423905
Ne@1:365809
Me@1:366082
receiveTouches@1:418792
value@1:168905
anonymous@1:167405
value@1:168351
value@1:167363
mechanism