From 206421292ac8b470440506b7c5c0b16493d11181 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 29 Jun 2023 11:24:41 -0700
Subject: [PATCH] [C-2813] Catch collectibles runtime errors (#3675)

---
 .../profile-screen/CollectiblesCard.tsx       | 50 ++++++++++---------
 .../CollectiblesCardErrorBoundary.tsx         | 31 ++++++++++++
 .../profile-screen/CollectiblesTab.tsx        |  8 +--
 3 files changed, 63 insertions(+), 26 deletions(-)
 create mode 100644 packages/mobile/src/screens/profile-screen/CollectiblesCardErrorBoundary.tsx

diff --git a/packages/mobile/src/screens/profile-screen/CollectiblesCard.tsx b/packages/mobile/src/screens/profile-screen/CollectiblesCard.tsx
index 48b193743e2..f56015ed57e 100644
--- a/packages/mobile/src/screens/profile-screen/CollectiblesCard.tsx
+++ b/packages/mobile/src/screens/profile-screen/CollectiblesCard.tsx
@@ -15,6 +15,8 @@ import { useDispatch, useSelector } from 'react-redux'
 import IconPlay from 'app/assets/images/pbIconPlay.svg'
 import { ChainLogo, Tile } from 'app/components/core'
 import { makeStyles } from 'app/styles'
+
+import { CollectiblesCardErrorBoundary } from './CollectiblesCardErrorBoundary'
 const { setVisibility } = modalsActions
 const { setCollectible } = collectibleDetailsUIActions
 const getUserId = accountSelectors.getUserId
@@ -119,28 +121,30 @@ export const CollectiblesCard = (props: CollectiblesCardProps) => {
   const url = frameUrl ?? gifUrl
 
   return (
-    <Tile
-      styles={{ root: style, content: styles.content }}
-      onPress={handlePress}
-    >
-      {url ? (
-        <View>
-          <CollectibleImage style={styles.image} uri={url}>
-            {mediaType === 'VIDEO' ? (
-              <View style={styles.iconPlay}>
-                <IconPlay
-                  height={48}
-                  width={48}
-                  fill='none'
-                  fillSecondary='hsla(0,0%,100%,.6)'
-                />
-              </View>
-            ) : null}
-            <ChainLogo chain={chain} style={styles.chain} />
-          </CollectibleImage>
-        </View>
-      ) : null}
-      <Text style={styles.title}>{name}</Text>
-    </Tile>
+    <CollectiblesCardErrorBoundary>
+      <Tile
+        styles={{ root: style, content: styles.content }}
+        onPress={handlePress}
+      >
+        {url ? (
+          <View>
+            <CollectibleImage style={styles.image} uri={url}>
+              {mediaType === 'VIDEO' ? (
+                <View style={styles.iconPlay}>
+                  <IconPlay
+                    height={48}
+                    width={48}
+                    fill='none'
+                    fillSecondary='hsla(0,0%,100%,.6)'
+                  />
+                </View>
+              ) : null}
+              <ChainLogo chain={chain} style={styles.chain} />
+            </CollectibleImage>
+          </View>
+        ) : null}
+        <Text style={styles.title}>{name}</Text>
+      </Tile>
+    </CollectiblesCardErrorBoundary>
   )
 }
diff --git a/packages/mobile/src/screens/profile-screen/CollectiblesCardErrorBoundary.tsx b/packages/mobile/src/screens/profile-screen/CollectiblesCardErrorBoundary.tsx
new file mode 100644
index 00000000000..5123897ede7
--- /dev/null
+++ b/packages/mobile/src/screens/profile-screen/CollectiblesCardErrorBoundary.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { PureComponent } from 'react'
+
+import * as Sentry from '@sentry/react-native'
+
+type CollectiblesCardErrorBoundaryProps = {
+  children: ReactNode
+}
+
+export class CollectiblesCardErrorBoundary extends PureComponent<CollectiblesCardErrorBoundaryProps> {
+  state = {
+    error: null
+  }
+
+  componentDidCatch(error: Error | null, errorInfo: any) {
+    this.setState({ error: error?.message })
+
+    Sentry.withScope((scope) => {
+      scope.setExtras(errorInfo)
+      Sentry.captureException(error)
+    })
+  }
+
+  render() {
+    const { error } = this.state
+    const { children } = this.props
+
+    if (error) return null
+    return <>{children}</>
+  }
+}
diff --git a/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx b/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx
index e940c3a897e..aa5c460d0aa 100644
--- a/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx
@@ -160,9 +160,11 @@ export const CollectiblesTab = () => {
         </View>
       }
       renderItem={({ item }) => (
-        <View style={styles.collectibleListItem}>
-          <CollectiblesCard collectible={item} ownerId={profile.user_id} />
-        </View>
+        <CollectiblesCard
+          collectible={item}
+          ownerId={profile.user_id}
+          style={styles.collectibleListItem}
+        />
       )}
     />
   )