TypeError: Cannot read property 'width' of undefined

[fluiddot]

Sentry Issue: https://a8c.sentry.io/share/issue/9a338d040674404dad0055ce6249c2de/

⚠️ 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:

block-experiments/blocks/layout-grid/src/grid-column/edit.native.js:118:ColumnsEdit
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:3525:renderWithHooks
gutenberg/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7743: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

[derekblank]

From the stack trace, it appears the issue may be due to contentStyle being undefined in this line from the grid-columns block on the block-experiments repo:

const calculatedColumnStyles = getColumnStyles(
    parentColumnCount,
    selectedColumnIndex,
    contentStyle.width,
    viewportSize
);

Perhaps the fix would be to accept an undefined contentStyle?.width and update the default arguments on getColumnStyles. However, I haven't yet found a way to replicate the issue. I tried various manipulations of column widths and different themes and was not able to produce a crash in order to confirm a fix.

[fluiddot]

Perhaps the fix would be to accept an undefined contentStyle?.width and update the default arguments on getColumnStyles. However, I haven't yet found a way to replicate the issue. I tried various manipulations of column widths and different themes and was not able to produce a crash in order to confirm a fix.

Thanks @derekblank for taking a look 🙇 ! I think it might be only reproduced in a very specific case. Based on the Sentry events for version 23.8.1, I noticed it only affected two users. However, one of them produced 38 events. We could investigate sessions from that user in detail and try to reproduce the issue using the same themes/plugins.

[derekblank]

@fluiddot Thanks for that info -- I agree it does seem theme-based. I've added myself to the issue as 🔍 Investigating to see if I can replicate anything from that user's session details.