Fix: catch erros in message decoding (#4562)

src/components/safe-messages/DecodedMsg/index.tsx

@@ -10,6 +10,7 @@ import { isAddress } from 'ethers'
 import type { ReactElement } from 'react'
 import Msg from '../Msg'
 import css from './styles.module.css'
+import { logError, Errors } from '@/services/exceptions'
 
 const EIP712_DOMAIN_TYPE = 'EIP712Domain'
 
@@ -75,7 +76,13 @@ export const DecodedMsg = ({
   }
 
   // Normalize message such that we know the primaryType
-  const normalizedMsg = normalizeTypedData(message)
+  let normalizedMsg: EIP712Normalized
+  try {
+    normalizedMsg = normalizeTypedData(message)
+  } catch (error) {
+    logError(Errors._809, error)
+    normalizedMsg = message as EIP712Normalized
+  }
 
   return (
     <Box

src/components/safe-messages/MsgDetails/index.tsx

@@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import CodeIcon from '@mui/icons-material/Code'
 import classNames from 'classnames'
 import { SafeMessageStatus, type SafeMessage } from '@safe-global/safe-gateway-typescript-sdk'
+import { ErrorBoundary } from '@sentry/react'
 
 import { formatDateTime } from '@/utils/date'
 import EthHashInfo from '@/components/common/EthHashInfo'
@@ -26,7 +27,11 @@ const MsgDetails = ({ msg }: { msg: SafeMessage }): ReactElement => {
   const wallet = useWallet()
   const isConfirmed = msg.status === SafeMessageStatus.CONFIRMED
   const safeMessage = useMemo(() => {
-    return generateSafeMessageMessage(msg.message)
+    try {
+      return generateSafeMessageMessage(msg.message)
+    } catch (e) {
+      return ''
+    }
   }, [msg.message])
   const verifyingContract = isEIP712TypedData(msg.message) ? msg.message.domain.verifyingContract : undefined
 
@@ -65,15 +70,17 @@ const MsgDetails = ({ msg }: { msg: SafeMessage }): ReactElement => {
               </>
             }
           >
-            <DecodedMsg message={msg.message} />
+            <ErrorBoundary fallback={<div>Error decoding message</div>}>
+              <DecodedMsg message={msg.message} />
+            </ErrorBoundary>
           </InfoDetails>
         </div>
 
         <div className={txDetailsCss.txSummary}>
           <TxDataRow title="Created:">{formatDateTime(msg.creationTimestamp)}</TxDataRow>
           <TxDataRow title="Last modified:">{formatDateTime(msg.modifiedTimestamp)}</TxDataRow>
           <TxDataRow title="Message hash:">{generateDataRowValue(msg.messageHash, 'hash')}</TxDataRow>
-          <TxDataRow title="SafeMessage:">{generateDataRowValue(safeMessage, 'hash')}</TxDataRow>
+          {safeMessage && <TxDataRow title="SafeMessage:">{generateDataRowValue(safeMessage, 'hash')}</TxDataRow>}
         </div>
 
         {msg.preparedSignature && (

src/components/safe-messages/MsgListItem/ExpandableMsgItem.tsx

@@ -1,7 +1,8 @@
-import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, Box } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import type { ReactElement } from 'react'
 import type { SafeMessage } from '@safe-global/safe-gateway-typescript-sdk'
+import { ErrorBoundary } from '@sentry/react'
 
 import MsgDetails from '@/components/safe-messages/MsgDetails'
 import MsgSummary from '@/components/safe-messages/MsgSummary'
@@ -26,7 +27,9 @@ const ExpandableMsgItem = ({ msg, expanded = false }: { msg: SafeMessage; expand
       </AccordionSummary>
 
       <AccordionDetails sx={{ padding: 0 }}>
-        <MsgDetails msg={msg} />
+        <ErrorBoundary fallback={<Box sx={{ p: 2 }}>Failed to render message details</Box>}>
+          <MsgDetails msg={msg} />
+        </ErrorBoundary>
       </AccordionDetails>
     </Accordion>
   )