diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 87797e2b..dbcb62a3 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -32,6 +32,7 @@ "design-system": "workspace:^", "nativewind": "^2.0.11", "react": "18.2.0", + "react-error-boundary": "^4.0.13", "react-native": "0.74.3", "react-native-calendars": "^1.1306.0", "react-native-date-picker": "^5.0.4", diff --git a/packages/react-native/src/App.tsx b/packages/react-native/src/App.tsx index 57ed6302..bb7fb94e 100644 --- a/packages/react-native/src/App.tsx +++ b/packages/react-native/src/App.tsx @@ -8,6 +8,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, + throwOnError: true, }, }, }); diff --git a/packages/react-native/src/components/HOC/withSpotErrorBoundary.tsx b/packages/react-native/src/components/HOC/withSpotErrorBoundary.tsx new file mode 100644 index 00000000..0a3ba17a --- /dev/null +++ b/packages/react-native/src/components/HOC/withSpotErrorBoundary.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import Error from '../common/Error'; + +export default function withSpotErrorBoundary( + Component: React.ComponentType, +) { + return function ErrorBoundaryComponent({ ...props }: T) { + return ( + }> + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + + ); + }; +} diff --git a/packages/react-native/src/components/common/Error.tsx b/packages/react-native/src/components/common/Error.tsx new file mode 100644 index 00000000..e5388975 --- /dev/null +++ b/packages/react-native/src/components/common/Error.tsx @@ -0,0 +1,51 @@ +import { SafeAreaView, TouchableOpacity, View } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { Font } from 'design-system'; +import LinearGradient from 'react-native-linear-gradient'; +import { StackNavigation } from '@/types/navigation'; + +export default function Error() { + const navigation = useNavigation>(); + + return ( + + + + + + + 오류가 발생했어요. + + + 잠시 뒤에 시도해볼까요? + + + navigation.reset({ + index: 0, + routes: [{ name: 'Splash' }], + }) + } + > + + 새로고침 + + + + + + + + ); +} diff --git a/packages/react-native/src/hooks/useGeolocation.ts b/packages/react-native/src/hooks/useGeolocation.ts index 55fd870d..6486a6c1 100644 --- a/packages/react-native/src/hooks/useGeolocation.ts +++ b/packages/react-native/src/hooks/useGeolocation.ts @@ -54,7 +54,7 @@ export default function useGeolocation() { return null; } - const result = new Promise((resolve) => { + const result = await new Promise((resolve) => { Geolocation.getCurrentPosition((pos) => resolve(pos)); }); return result; diff --git a/packages/react-native/src/pages/Splash.tsx b/packages/react-native/src/pages/Splash.tsx index fca3a655..83835590 100644 --- a/packages/react-native/src/pages/Splash.tsx +++ b/packages/react-native/src/pages/Splash.tsx @@ -21,7 +21,7 @@ export default function Splash() { setRefresh(refresh); return navigation.navigate('Main'); }); - }, []); + }); return ( diff --git a/packages/react-native/src/routes/StackNavigator.tsx b/packages/react-native/src/routes/StackNavigator.tsx index 2bb3fbc7..cb31fa0d 100644 --- a/packages/react-native/src/routes/StackNavigator.tsx +++ b/packages/react-native/src/routes/StackNavigator.tsx @@ -1,4 +1,5 @@ import { createStackNavigator } from '@react-navigation/stack'; +import { QueryErrorResetBoundary } from '@tanstack/react-query'; import Login from '@pages/Login/Login'; import TabScreens from '@pages/TabScreens'; import CameraPage from '@/pages/CameraPage'; @@ -8,6 +9,7 @@ import SettingStackNavigator from './SettingStackNavigator'; import Landing from '@/pages/Landing'; import Splash from '@/pages/Splash'; import TOS from '@/pages/TOS'; +import withSpotErrorBoundary from '@/components/HOC/withSpotErrorBoundary'; const Stack = createStackNavigator(); @@ -18,19 +20,36 @@ const Stack = createStackNavigator(); */ export default function StackNavigator() { return ( - - - - - - - - - - + + + + + + + + + + + + ); } diff --git a/yarn.lock b/yarn.lock index 3cee8222..03f20a90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14625,6 +14625,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.0.13": + version: 4.0.13 + resolution: "react-error-boundary@npm:4.0.13" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + react: ">=16.13.1" + checksum: 50398d080015d51d22c6f94c56f4ea336d10232d72345b36ee6f15b6b643666d20b072829b02f091a80e5af68fe67f68a62ef0d2b649dbd759ead929304449af + languageName: node + linkType: hard + "react-freeze@npm:^1.0.0": version: 1.0.4 resolution: "react-freeze@npm:1.0.4" @@ -14983,6 +14994,7 @@ __metadata: nativewind: ^2.0.11 prettier: ^3.3.3 react: 18.2.0 + react-error-boundary: ^4.0.13 react-native: 0.74.3 react-native-calendars: ^1.1306.0 react-native-date-picker: ^5.0.4