[ React Native ] ErrorBoundary 예제

import * as React from 'react';

import {Alert, Text, TouchableOpacity, View} from 'react-native';

interface ErrorBoundaryProps {}

interface ErrorBoundaryState {

hasError: boolean;

errorMessage: string;

}

export default class ErrorBoundary extends React.Component<

React.PropsWithChildren<ErrorBoundaryProps>,

ErrorBoundaryState

> {

constructor(props: ErrorBoundaryProps) {

super(props);

this.state = {hasError: false, errorMessage: ''};

}

static getDerivedStateFromError(_error: Error) {

return {hasError: true};

}

componentDidCatch(error: Error, _errorInfo: any) {

this.setState({errorMessage: error.toString()});

}

onRefresh = () => {

Alert.alert('', 'error refresh');

this.setState({hasError: false});

};

render() {

if (this.state.hasError) {

return (

<View

style={{

flex: 1,

justifyContent: 'center',

alignContent: 'center',

backgroundColor: '#ffe2e2',

}}>

<Text>system error</Text>

<Text>{this.state.errorMessage}</Text>

<TouchableOpacity onPress={this.onRefresh}>

<Text>refresh</Text>

</TouchableOpacity>

</View>

);

}

return this.props.children;

}

}