Spence Pope
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import {Component, type ErrorInfo, type ReactNode} from 'react'
|
|
import {type StyleProp, type ViewStyle} from 'react-native'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {logger} from '#/logger'
|
|
import {type Metadata} from '#/logger/types'
|
|
import {ErrorScreen} from './error/ErrorScreen'
|
|
import {CenteredView} from './Views'
|
|
|
|
interface Props {
|
|
children?: ReactNode
|
|
renderError?: (error: any) => ReactNode
|
|
getErrorMetadata?: (error: Error) => Metadata
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean
|
|
error: any
|
|
}
|
|
|
|
export class ErrorBoundary extends Component<Props, State> {
|
|
public state: State = {
|
|
hasError: false,
|
|
error: undefined,
|
|
}
|
|
|
|
public static getDerivedStateFromError(error: Error): State {
|
|
return {hasError: true, error}
|
|
}
|
|
|
|
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
logger.error(error, {
|
|
errorInfo,
|
|
...this.props.getErrorMetadata?.(error),
|
|
})
|
|
}
|
|
|
|
public render() {
|
|
if (this.state.hasError) {
|
|
if (this.props.renderError) {
|
|
return this.props.renderError(this.state.error)
|
|
}
|
|
|
|
return (
|
|
<CenteredView style={[{height: '100%', flex: 1}, this.props.style]}>
|
|
<TranslatedErrorScreen details={this.state.error.toString()} />
|
|
</CenteredView>
|
|
)
|
|
}
|
|
|
|
return this.props.children
|
|
}
|
|
}
|
|
|
|
function TranslatedErrorScreen({details}: {details?: string}) {
|
|
const {_} = useLingui()
|
|
|
|
return (
|
|
<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}
|
|
/>
|
|
)
|
|
}
|