Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[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>

authored by

Samuel Newman
Dan Abramov
and committed by
GitHub
f4e72cc8 27c4054f

+45 -4
+36 -1
src/components/dialogs/GifSelect.tsx
··· 13 13 useSetExternalEmbedPref, 14 14 } from '#/state/preferences' 15 15 import {Gif, useGifphySearch, useGiphyTrending} from '#/state/queries/giphy' 16 + import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' 17 + import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 16 18 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 17 19 import * as Dialog from '#/components/Dialog' 18 20 import * as TextField from '#/components/forms/TextField' ··· 54 56 break 55 57 } 56 58 59 + const renderErrorBoundary = useCallback( 60 + (error: any) => <DialogError details={String(error)} />, 61 + [], 62 + ) 63 + 57 64 return ( 58 65 <Dialog.Outer 59 66 control={control} 60 67 nativeOptions={{sheet: {snapPoints}}} 61 68 onClose={onClose}> 62 69 <Dialog.Handle /> 63 - {content} 70 + <ErrorBoundary renderError={renderErrorBoundary}>{content}</ErrorBoundary> 64 71 </Dialog.Outer> 65 72 ) 66 73 } ··· 357 364 </Dialog.ScrollableInner> 358 365 ) 359 366 } 367 + 368 + function DialogError({details}: {details?: string}) { 369 + const {_} = useLingui() 370 + const control = Dialog.useDialogContext() 371 + 372 + return ( 373 + <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error occured`)}> 374 + <Dialog.Close /> 375 + <ErrorScreen 376 + title={_(msg`Oh no!`)} 377 + message={_( 378 + msg`There was an unexpected issue in the application. Please let us know if this happened to you!`, 379 + )} 380 + details={details} 381 + /> 382 + <Button 383 + label={_(msg`Close dialog`)} 384 + onPress={() => control.close()} 385 + color="primary" 386 + size="medium" 387 + variant="solid"> 388 + <ButtonText> 389 + <Trans>Close</Trans> 390 + </ButtonText> 391 + </Button> 392 + </Dialog.ScrollableInner> 393 + ) 394 + }
+9 -3
src/view/com/util/ErrorBoundary.tsx
··· 1 1 import React, {Component, ErrorInfo, ReactNode} from 'react' 2 - import {ErrorScreen} from './error/ErrorScreen' 3 - import {CenteredView} from './Views' 4 2 import {msg} from '@lingui/macro' 5 - import {logger} from '#/logger' 6 3 import {useLingui} from '@lingui/react' 7 4 5 + import {logger} from '#/logger' 6 + import {ErrorScreen} from './error/ErrorScreen' 7 + import {CenteredView} from './Views' 8 + 8 9 interface Props { 9 10 children?: ReactNode 11 + renderError?: (error: any) => ReactNode 10 12 } 11 13 12 14 interface State { ··· 30 32 31 33 public render() { 32 34 if (this.state.hasError) { 35 + if (this.props.renderError) { 36 + return this.props.renderError(this.state.error) 37 + } 38 + 33 39 return ( 34 40 <CenteredView style={{height: '100%', flex: 1}}> 35 41 <TranslatedErrorScreen details={this.state.error.toString()} />