feat: 공통 에러 처리

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",

packages/react-native/src/App.tsx

@@ -8,6 +8,7 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
+      throwOnError: true,
     },
   },
 });

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<T extends object>(
+  Component: React.ComponentType<T>,
+) {
+  return function ErrorBoundaryComponent({ ...props }: T) {
+    return (
+      <ErrorBoundary fallback={<Error />}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <Component {...props} />
+      </ErrorBoundary>
+    );
+  };
+}

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<StackNavigation<'Home/Main'>>();
+
+  return (
+    <LinearGradient
+      colors={['#FF1919', '#000000']}
+      start={{ x: 0, y: -0.5 }}
+      end={{ x: 0, y: 0.5 }}
+      className="h-full"
+    >
+      <LinearGradient
+        colors={['rgba(0, 0, 0, 0.4)', 'rgba(0, 0, 0, 0.4)']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        className="h-full"
+      >
+        <SafeAreaView className="flex-1">
+          <View className="flex-1" style={{}}>
+            <View className="flex-1 justify-center items-center">
+              <Font.Bold type="body2" color="white">
+                오류가 발생했어요.
+              </Font.Bold>
+              <Font.Bold type="body2" color="white">
+                잠시 뒤에 시도해볼까요?
+              </Font.Bold>
+              <TouchableOpacity
+                className="bg-Button-red rounded-xl px-4 py-2 mt-4"
+                onPress={() =>
+                  navigation.reset({
+                    index: 0,
+                    routes: [{ name: 'Splash' }],
+                  })
+                }
+              >
+                <Font type="body2" color="white">
+                  새로고침
+                </Font>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </SafeAreaView>
+      </LinearGradient>
+    </LinearGradient>
+  );
+}

packages/react-native/src/hooks/useGeolocation.ts

@@ -54,7 +54,7 @@ export default function useGeolocation() {
       return null;
     }
 
-    const result = new Promise<GeolocationResponse>((resolve) => {
+    const result = await new Promise<GeolocationResponse>((resolve) => {
       Geolocation.getCurrentPosition((pos) => resolve(pos));
     });
     return result;

packages/react-native/src/pages/Splash.tsx

@@ -21,7 +21,7 @@ export default function Splash() {
       setRefresh(refresh);
       return navigation.navigate('Main');
     });
-  }, []);
+  });
 
   return (
     <BackGroundGradient withoutScroll>

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<StackParamList>();
 
@@ -18,19 +20,36 @@ const Stack = createStackNavigator<StackParamList>();
  */
 export default function StackNavigator() {
   return (
-    <Stack.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <Stack.Screen name="Splash" component={Splash} />
-      <Stack.Screen name="TOS" component={TOS} />
-      <Stack.Screen name="Login" component={Login} />
-      <Stack.Screen name="Signup" component={SignupStackNavigator} />
-      <Stack.Screen name="Main" component={TabScreens} />
-      <Stack.Screen name="Camera" component={CameraPage} />
-      <Stack.Screen name="Setting/Main" component={SettingStackNavigator} />
-      <Stack.Screen name="Landing" component={Landing} />
-    </Stack.Navigator>
+    <QueryErrorResetBoundary>
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+      >
+        <Stack.Screen name="Splash" component={withSpotErrorBoundary(Splash)} />
+        <Stack.Screen name="TOS" component={withSpotErrorBoundary(TOS)} />
+        <Stack.Screen name="Login" component={withSpotErrorBoundary(Login)} />
+        <Stack.Screen
+          name="Signup"
+          component={withSpotErrorBoundary(SignupStackNavigator)}
+        />
+        <Stack.Screen
+          name="Main"
+          component={withSpotErrorBoundary(TabScreens)}
+        />
+        <Stack.Screen
+          name="Camera"
+          component={withSpotErrorBoundary(CameraPage)}
+        />
+        <Stack.Screen
+          name="Setting/Main"
+          component={withSpotErrorBoundary(SettingStackNavigator)}
+        />
+        <Stack.Screen
+          name="Landing"
+          component={withSpotErrorBoundary(Landing)}
+        />
+      </Stack.Navigator>
+    </QueryErrorResetBoundary>
   );
 }

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