Dont leave promise unresolved

3 files changed, 33 insertions, 17 deletions

diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index fde6a64ac..8782e1457 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -13,7 +13,7 @@ export async function openCamera(_opts: CameraOpts): Promise<RNImage> {
 
 export async function openCropper(opts: CropperOptions): Promise<RNImage> {
   // TODO handle more opts
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     unstable__openModal({
       name: 'crop-image',
       uri: opts.path,
@@ -24,6 +24,8 @@ export async function openCropper(opts: CropperOptions): Promise<RNImage> {
       onSelect: (img?: RNImage) => {
         if (img) {
           resolve(img)
+        } else {
+          reject(new Error('Canceled'))
         }
       },
     })
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 118e2ce2b..45327669b 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -8,6 +8,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {logger} from '#/logger'
 import {usePalette} from 'lib/hooks/usePalette'
 import {
   useCameraPermission,
@@ -282,15 +283,21 @@ let EditableUserAvatar = ({
       return
     }
 
-    const croppedImage = await openCropper({
-      mediaType: 'photo',
-      cropperCircleOverlay: true,
-      height: item.height,
-      width: item.width,
-      path: item.path,
-    })
+    try {
+      const croppedImage = await openCropper({
+        mediaType: 'photo',
+        cropperCircleOverlay: true,
+        height: item.height,
+        width: item.width,
+        path: item.path,
+      })
 
-    onSelectNewAvatar(croppedImage)
+      onSelectNewAvatar(croppedImage)
+    } catch (e: any) {
+      if (!String(e).includes('Canceled')) {
+        logger.error('Failed to crop banner', {error: e})
+      }
+    }
   }, [onSelectNewAvatar, requestPhotoAccessIfNeeded])
 
   const onRemoveAvatar = React.useCallback(() => {
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index f08044ec3..93ea32750 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -6,6 +6,7 @@ import {ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logger} from '#/logger'
 import {usePalette} from 'lib/hooks/usePalette'
 import {
   useCameraPermission,
@@ -64,14 +65,20 @@ export function UserBanner({
       return
     }
 
-    onSelectNewBanner?.(
-      await openCropper({
-        mediaType: 'photo',
-        path: items[0].path,
-        width: 3000,
-        height: 1000,
-      }),
-    )
+    try {
+      onSelectNewBanner?.(
+        await openCropper({
+          mediaType: 'photo',
+          path: items[0].path,
+          width: 3000,
+          height: 1000,
+        }),
+      )
+    } catch (e: any) {
+      if (!String(e).includes('Canceled')) {
+        logger.error('Failed to crop banner', {error: e})
+      }
+    }
   }, [onSelectNewBanner, requestPhotoAccessIfNeeded])
 
   const onRemoveBanner = React.useCallback(() => {