forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[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
+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
+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()} />