import React, { ReactNode } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { Column, WarningIcon, SizedBox, Wrapper } from './components'; // ErrorBoundary 컴포넌트의 Props와 State 인터페이스 정의 interface ErrorBoundaryProps { children: ReactNode; } interface ErrorBoundaryState { hasError: boolean; error: Error | null; } // ErrorBoundary 클래스 컴포넌트 구현 export class ErrorBoundary extends React.Component< ErrorBoundaryProps, ErrorBoundaryState > { constructor(props: ErrorBoundaryProps) { super(props); this.state = { hasError: false, error: null, }; } // 오류가 발생했을 때 state를 업데이트하는 메서드 static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error }; } // 오류 발생 시 로그를 찍거나 외부 서비스에 전송하는 메서드 componentDidCatch(error: Error, info: React.ErrorInfo) { console.log('Error caught:', error, info); // 여기에서 Sentry, Firebase Crashlytics 등의 오류 추적 서비스를 호출할 수 있다. logger.logEvent(EVENT_TYPE.ERROR, EVENT_KEY.ERROR_BOUNDARY, { error_cause: error.cause, error_stack: error.stack, error_message: error.message, error_info: info, }); } // 에러 발생 시 사용자에게 보여줄 fallback UI render() { if (this.state.hasError) { return ( An error has occurred We apologize for the inconvenience. If you have any inquiries, please contact our support center. We will investigate the issue and resolve it as soon as possible. Thank you. ); } // 문제가 없으면 자식 컴포넌트를 그대로 렌더링 return this.props.children; } } // 스타일 추출 const styles = StyleSheet.create({ centeredContent: { alignItems: 'center', }, icon: { marginBottom: 50, }, errorTitle: { fontSize: 30, textAlign: 'center', fontFamily: 'extraBold', }, errorSubtitle: { fontSize: 16, textAlign: 'center', fontFamily: 'bold', }, messageBox: { borderRadius: 16, paddingVertical: 24, paddingHorizontal: 35, backgroundColor: '#F2F4F5', marginHorizontal: 24, }, errorMessage: { fontSize: 14, fontFamily: 'regular', textAlign: 'center', lineHeight: 20, }, });

React Native Crash 핸들링 및 로깅