[C-2813] Catch collectibles runtime errors (#3675)

AudiusProject · Jun 29, 2023 · 2064212 · 2064212
1 parent 29233ea
commit 2064212
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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}
+        />
       )}
     />
   )