From 3b75bc1118cf1ee1dccb6a0235f892d4584afbab Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 14:25:46 +0100
Subject: [PATCH 1/4] error boundary on gif picker

---
 src/components/dialogs/GifSelect.tsx | 38 +++++++++++++++++++++++++++-
 src/view/com/util/ErrorBoundary.tsx  | 12 ++++++---
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index baff31168b..926849dafc 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -13,6 +13,8 @@ import {
   useSetExternalEmbedPref,
 } from '#/state/preferences'
 import {Gif, useGifphySearch, useGiphyTrending} from '#/state/queries/giphy'
+import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -54,13 +56,18 @@ export function GifSelectDialog({
       break
   }
 
+  const renderErrorBoundary = useCallback(
+    (error: any) => <DialogError details={error.toString()} />,
+    [],
+  )
+
   return (
     <Dialog.Outer
       control={control}
       nativeOptions={{sheet: {snapPoints}}}
       onClose={onClose}>
       <Dialog.Handle />
-      {content}
+      <ErrorBoundary renderError={renderErrorBoundary}>{content}</ErrorBoundary>
     </Dialog.Outer>
   )
 }
@@ -357,3 +364,32 @@ function GiphyConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
     </Dialog.ScrollableInner>
   )
 }
+
+function DialogError({details}: {details?: string}) {
+  const {_} = useLingui()
+  const control = Dialog.useDialogContext()
+
+  return (
+    <Dialog.ScrollableInner
+      style={[a.flex_1, a.gap_md]}
+      label={_(msg`An error occured`)}>
+      <ErrorScreen
+        title={_(msg`Oh no!`)}
+        message={_(
+          msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
+        )}
+        details={details}
+      />
+      <Button
+        label={_(msg`Close dialog`)}
+        onPress={() => control.close()}
+        color="primary"
+        size="medium"
+        variant="solid">
+        <ButtonText>
+          <Trans>Close</Trans>
+        </ButtonText>
+      </Button>
+    </Dialog.ScrollableInner>
+  )
+}
diff --git a/src/view/com/util/ErrorBoundary.tsx b/src/view/com/util/ErrorBoundary.tsx
index 22fdd606e4..dccd2bbc9b 100644
--- a/src/view/com/util/ErrorBoundary.tsx
+++ b/src/view/com/util/ErrorBoundary.tsx
@@ -1,12 +1,14 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
-import {ErrorScreen} from './error/ErrorScreen'
-import {CenteredView} from './Views'
 import {msg} from '@lingui/macro'
-import {logger} from '#/logger'
 import {useLingui} from '@lingui/react'
 
+import {logger} from '#/logger'
+import {ErrorScreen} from './error/ErrorScreen'
+import {CenteredView} from './Views'
+
 interface Props {
   children?: ReactNode
+  renderError?: (error: any) => ReactNode
 }
 
 interface State {
@@ -30,6 +32,10 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public render() {
     if (this.state.hasError) {
+      if (this.props.renderError) {
+        return this.props.renderError(this.state.error)
+      }
+
       return (
         <CenteredView style={{height: '100%', flex: 1}}>
           <TranslatedErrorScreen details={this.state.error.toString()} />

From 5b815ff93092251db0d0efbabe8d6e46a2877809 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 14:27:38 +0100
Subject: [PATCH 2/4] add dialog.close for web users

---
 src/components/dialogs/GifSelect.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 926849dafc..bdb4979832 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -373,6 +373,7 @@ function DialogError({details}: {details?: string}) {
     <Dialog.ScrollableInner
       style={[a.flex_1, a.gap_md]}
       label={_(msg`An error occured`)}>
+      <Dialog.Close />
       <ErrorScreen
         title={_(msg`Oh no!`)}
         message={_(

From 08c992e97040ceff606f6db25622bbc171bbc405 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 14:38:21 +0100
Subject: [PATCH 3/4] fix size of dialog on web

---
 src/components/dialogs/GifSelect.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index bdb4979832..0d398259a0 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -370,9 +370,7 @@ function DialogError({details}: {details?: string}) {
   const control = Dialog.useDialogContext()
 
   return (
-    <Dialog.ScrollableInner
-      style={[a.flex_1, a.gap_md]}
-      label={_(msg`An error occured`)}>
+    <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error occured`)}>
       <Dialog.Close />
       <ErrorScreen
         title={_(msg`Oh no!`)}

From a17e82ad80e30998408b3d398873f71f41b0816f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 22 Apr 2024 21:51:54 +0100
Subject: [PATCH 4/4] Safer coercion

---
 src/components/dialogs/GifSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 0d398259a0..ad4fbeadea 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -57,7 +57,7 @@ export function GifSelectDialog({
   }
 
   const renderErrorBoundary = useCallback(
-    (error: any) => <DialogError details={error.toString()} />,
+    (error: any) => <DialogError details={String(error)} />,
     [],
   )