config: sentry로 오류발생시 보고하도록 처리

packages/react-native/android/app/build.gradle

@@ -73,6 +73,7 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
+apply from: new File(["node", "--print", "require.resolve('@sentry/react-native/package.json')"].execute().text.trim(), "../sentry.gradle")
 android {
     ndkVersion rootProject.ext.ndkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion

packages/react-native/env.d.ts

@@ -3,4 +3,5 @@ declare module '@env' {
   export const BASE_URL: string;
   export const DEV_ACCESS_TOKEN: string;
   export const DEV_REFRESH_TOKEN: string;
+  export const SENTRY_DSN: string;
 }

packages/react-native/ios/Podfile.lock

@@ -1019,6 +1019,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-mail (6.1.1):
+    - React-Core
   - react-native-pager-view (6.3.3):
     - DoubleConversion
     - glog
@@ -1317,6 +1319,15 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNImageCropPicker (0.41.2):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.41.2)
+    - TOCropViewController (~> 2.7.4)
+  - RNImageCropPicker/QBImagePickerController (0.41.2):
+    - React-Core
+    - React-RCTImage
+    - TOCropViewController (~> 2.7.4)
   - RNPermissions (4.1.5):
     - React-Core
   - RNReanimated (3.14.0):
@@ -1362,9 +1373,34 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNSentry (5.33.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Sentry/HybridSDK (= 8.36.0)
+    - Yoga
   - RNSVG (15.4.0):
     - React-Core
+  - Sentry/HybridSDK (8.36.0)
   - SocketRocket (0.7.0)
+  - TOCropViewController (2.7.4)
   - VisionCamera (4.5.0):
     - VisionCamera/Core (= 4.5.0)
     - VisionCamera/React (= 4.5.0)
@@ -1412,6 +1448,7 @@ DEPENDENCIES:
   - react-native-date-picker (from `../../../node_modules/react-native-date-picker`)
   - "react-native-geolocation (from `../../../node_modules/@react-native-community/geolocation`)"
   - react-native-image-picker (from `../../../node_modules/react-native-image-picker`)
+  - react-native-mail (from `../../../node_modules/react-native-mail`)
   - react-native-pager-view (from `../../../node_modules/react-native-pager-view`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
   - react-native-view-shot (from `../../../node_modules/react-native-view-shot`)
@@ -1441,9 +1478,11 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../../../node_modules/react-native-image-crop-picker`)
   - RNPermissions (from `../../../node_modules/react-native-permissions`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
+  - "RNSentry (from `../../../node_modules/@sentry/react-native`)"
   - RNSVG (from `../../../node_modules/react-native-svg`)
   - VisionCamera (from `../../../node_modules/react-native-vision-camera`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
@@ -1454,7 +1493,9 @@ SPEC REPOS:
     - KakaoSDKAuth
     - KakaoSDKCommon
     - KakaoSDKUser
+    - Sentry
     - SocketRocket
+    - TOCropViewController
 
 EXTERNAL SOURCES:
   boost:
@@ -1530,6 +1571,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@react-native-community/geolocation"
   react-native-image-picker:
     :path: "../../../node_modules/react-native-image-picker"
+  react-native-mail:
+    :path: "../../../node_modules/react-native-mail"
   react-native-pager-view:
     :path: "../../../node_modules/react-native-pager-view"
   react-native-safe-area-context:
@@ -1588,12 +1631,16 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@react-native-async-storage/async-storage"
   RNGestureHandler:
     :path: "../../../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../../../node_modules/react-native-image-crop-picker"
   RNPermissions:
     :path: "../../../node_modules/react-native-permissions"
   RNReanimated:
     :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
+  RNSentry:
+    :path: "../../../node_modules/@sentry/react-native"
   RNSVG:
     :path: "../../../node_modules/react-native-svg"
   VisionCamera:
@@ -1642,6 +1689,7 @@ SPEC CHECKSUMS:
   react-native-date-picker: 6891317e850deae5b53d51355226e07a495aba61
   react-native-geolocation: 67d909c955daedea3f8c30d912f004f806edff64
   react-native-image-picker: c3afe5472ef870d98a4b28415fc0b928161ee5f7
+  react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
   react-native-pager-view: f848f89049a8e888d38f10ff31588eb63292a95f
   react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
   react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
@@ -1671,11 +1719,15 @@ SPEC CHECKSUMS:
   ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
   RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
   RNGestureHandler: 8dbcccada4a7e702e7dec9338c251b1cf393c960
+  RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
   RNPermissions: 4eb47e412214ddbc0fc5cc76fd441f456da95df7
   RNReanimated: 7e6fc1e80f412285a16ac3879b9e4672ffa91cef
   RNScreens: 5aeecbb09aa7285379b6e9f3c8a3c859bb16401c
+  RNSentry: c74f756c88aa2a90070f555609d2a31ab2a7f461
   RNSVG: cb24fb322de8c1ebf59904e7aca0447bb8dbed5a
+  Sentry: f8374b5415bc38dfb5645941b3ae31230fbeae57
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
+  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   VisionCamera: 412fec057156eb5fe84a44351e8ed71a072c1228
   Yoga: 04f1db30bb810187397fa4c37dd1868a27af229c
 

packages/react-native/ios/SPOTClient.xcodeproj/project.pbxproj

@@ -208,6 +208,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */,
 				E235C05ADACE081382539298 /* [CP] Copy Pods Resources */,
+				9B09695C53C748268689B9F8 /* Upload Debug Symbols to Sentry */,
 			);
 			buildRules = (
 			);
@@ -293,7 +294,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
+			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode.sh $REACT_NATIVE_XCODE\\\"\"\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -407,6 +408,20 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-SPOTClient-SPOTClientTests/Pods-SPOTClient-SPOTClientTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		9B09695C53C748268689B9F8 /* Upload Debug Symbols to Sentry */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			name = "Upload Debug Symbols to Sentry";
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			shellPath = /bin/sh;
+			shellScript = "/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode-debug-files.sh";
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */

packages/react-native/metro.config.js

@@ -1,6 +1,11 @@
 const path = require('path');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const { withSentryConfig } = require('@sentry/react-native/metro');
+
 const config = {
   watchFolders: [path.resolve(__dirname, '../../')],
 };
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withSentryConfig(
+  mergeConfig(getDefaultConfig(__dirname), config),
+);

packages/react-native/package.json

@@ -25,6 +25,7 @@
     "@react-navigation/material-top-tabs": "^6.6.14",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
+    "@sentry/react-native": "^5.33.1",
     "@tanstack/react-query": "^5.51.9",
     "axios": "^1.7.2",
     "babel-plugin-module-resolver": "^5.0.2",

packages/react-native/src/App.tsx

@@ -4,6 +4,12 @@ import StackNavigator from '@routes/StackNavigator';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Alert } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import * as Sentry from '@sentry/react-native';
+import { SENTRY_DSN } from '@env';
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+});
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -12,13 +18,14 @@ const queryClient = new QueryClient({
       throwOnError: true,
     },
     mutations: {
-      onError: () => {
+      onError: (err) => {
+        Sentry.captureException(err);
         Alert.alert('오류가 발생했어요', '잠시뒤에 시도해보세요.');
       },
     },
   },
 });
-export default function App() {
+function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <GestureHandlerRootView style={{ flex: 1 }}>
@@ -31,3 +38,5 @@ export default function App() {
     </QueryClientProvider>
   );
 }
+
+export default Sentry.wrap(App);

packages/react-native/src/components/HOC/withSpotErrorBoundary.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import * as Sentry from '@sentry/react-native';
 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 />}>
+      <ErrorBoundary
+        fallback={<Error />}
+        onError={(err) => Sentry.captureException(err)}
+      >
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <Component {...props} />
       </ErrorBoundary>