diff --git a/packages/suite-base/src/panels/RawMessages/index.tsx b/packages/suite-base/src/panels/RawMessages/index.tsx index ff70a3f814..464a51c413 100644 --- a/packages/suite-base/src/panels/RawMessages/index.tsx +++ b/packages/suite-base/src/panels/RawMessages/index.tsx @@ -244,12 +244,23 @@ function RawMessages(props: PropsRawMessages) { if (rawVal == undefined) { return rawVal; } - const idValue = (rawVal as Record)[diffLabels.ID.labelText]; - const addedValue = (rawVal as Record)[diffLabels.ADDED.labelText]; - const changedValue = (rawVal as Record)[ + + // react-json-tree treats typed arrays as opaque objects; convert them + // to regular arrays so users can expand and inspect element values. + const toDisplayValue = + ArrayBuffer.isView(rawVal) && !(rawVal instanceof DataView) + ? Array.from(rawVal as unknown as ArrayLike) + : rawVal; + const idValue = (toDisplayValue as Record)[ + diffLabels.ID.labelText + ]; + const addedValue = (toDisplayValue as Record)[ + diffLabels.ADDED.labelText + ]; + const changedValue = (toDisplayValue as Record)[ diffLabels.CHANGED.labelText ]; - const deletedValue = (rawVal as Record)[ + const deletedValue = (toDisplayValue as Record)[ diffLabels.DELETED.labelText ]; if ( @@ -259,9 +270,12 @@ function RawMessages(props: PropsRawMessages) { 1 && idValue == undefined ) { - return addedValue ?? changedValue ?? deletedValue; + const unwrappedValue = addedValue ?? changedValue ?? deletedValue; + return ArrayBuffer.isView(unwrappedValue) && !(unwrappedValue instanceof DataView) + ? Array.from(unwrappedValue as unknown as ArrayLike) + : unwrappedValue; } - return rawVal; + return toDisplayValue; }} theme={{ ...jsonTreeTheme, diff --git a/packages/suite-base/src/panels/RawMessagesCommon/getValueActionForValue.ts b/packages/suite-base/src/panels/RawMessagesCommon/getValueActionForValue.ts index 8885ab7405..9136935a18 100644 --- a/packages/suite-base/src/panels/RawMessagesCommon/getValueActionForValue.ts +++ b/packages/suite-base/src/panels/RawMessagesCommon/getValueActionForValue.ts @@ -148,9 +148,10 @@ export const getValueActionForValue = ( // We currently don't support looking inside them. return undefined; } else { - throw new Error( - `Invalid structureType: ${state.structureItem?.structureType} for value/pathItem.`, - ); + // Unexpected path/value/schema combinations can happen for synthetic keys + // (e.g. array internals). This path is only used for optional hover actions, + // so fail gracefully instead of crashing the panel. + return undefined; } }