[GIFs] Add error boundary to GIF picker (#3643)

* error boundary on gif picker

* add dialog.close for web users

* fix size of dialog on web

* Safer coercion

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

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={String(error)} />,
+    [],
+  )
+
   return (
     <Dialog.Outer
       control={control}
       nativeOptions={{sheet: {snapPoints}}}
       onClose={onClose}>
       <Dialog.Handle />
-      {content}
+      <ErrorBoundary renderError={renderErrorBoundary}>{content}</ErrorBoundary>
     </Dialog.Outer>
   )
 }
@@ -357,3 +364,31 @@ function GiphyConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
     </Dialog.ScrollableInner>
   )
 }
+
+function DialogError({details}: {details?: string}) {
+  const {_} = useLingui()
+  const control = Dialog.useDialogContext()
+
+  return (
+    <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error occured`)}>
+      <Dialog.Close />
+      <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>
+  )
+}

src/view/com/util/ErrorBoundary.tsx

@@ -1,12 +1,14 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
 import {ErrorScreen} from './error/ErrorScreen'
 import {CenteredView} from './Views'
-import {msg} from '@lingui/macro'
-import {logger} from '#/logger'
-import {useLingui} from '@lingui/react'
 
 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()} />