From af2ad1cf30673e2fc73d2a70eb096f8895ac751c Mon Sep 17 00:00:00 2001
From: Eugene Kim <67894159+eugene028@users.noreply.github.com>
Date: Mon, 26 Aug 2024 04:30:26 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20Sentry=20=EC=97=90=EB=9F=AC=20dsn=20?=
 =?UTF-8?q?=ED=82=A4=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20(#107)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: sentry sourcemap 설정

* fix: sentry 에러바운더리인식문제 해결
---
 src/constants/environment.ts |  2 +-
 src/main.tsx                 |  5 +++--
 src/utils/sentry.ts          | 14 ++++++++++----
 vite.config.ts               | 30 +++++++++++++++++-------------
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/constants/environment.ts b/src/constants/environment.ts
index 6d5cc9e..358eafc 100644
--- a/src/constants/environment.ts
+++ b/src/constants/environment.ts
@@ -5,6 +5,6 @@ export const {
   VITE_ACCESS_TOKEN: ACCESS_TOKEN,
   VITE_CLIENT_KEY: CLIENT_KEY,
   REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY: SECURE_KEY,
-  SENTRY_DSN_KEY: SENTRY_DSN_KEY,
+  VITE_SENTRY_DSN_KEY: VITE_SENTRY_DSN_KEY,
   SENTRY_AUTH_TOKEN: SENTRY_AUTH_TOKEN
 } = import.meta.env;
diff --git a/src/main.tsx b/src/main.tsx
index c561d5f..6128d27 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,10 @@
-import sentry from '@utils/sentry';
+/* eslint-disable import/namespace */
 import * as Sentry from '@sentry/react';
+import sentry from './utils/sentry';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
 import BottomSheetProvider from './components/provider/BottomSheetProvider';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Routers } from '@/routes';
@@ -10,7 +12,6 @@ import { GlobalStyle } from '@/styles';
 import { Global } from '@emotion/react';
 import { ToastContainer } from 'react-toastify';
 import './styles/styles.scss';
-
 try {
   sentry.initSentry();
 } catch (error: unknown) {
diff --git a/src/utils/sentry.ts b/src/utils/sentry.ts
index 8f9439e..9956be2 100644
--- a/src/utils/sentry.ts
+++ b/src/utils/sentry.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/namespace */
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import {
@@ -6,17 +7,23 @@ import {
   useLocation,
   useNavigationType
 } from 'react-router-dom';
-import { SENTRY_DSN_KEY } from '@/constants/environment';
+import { VITE_SENTRY_DSN_KEY } from '@/constants/environment';
 
 const setSentry = () => {
   function initSentry() {
     if (process.env.NODE_ENV === 'development') return;
 
     Sentry.init({
-      environment: process.env.VERCEL_ENV,
-      dsn: SENTRY_DSN_KEY,
+      environment: process.env.NODE_ENV,
+      dsn: VITE_SENTRY_DSN_KEY,
       tracesSampleRate: 1.0,
+      tracePropagationTargets: [
+        'localhost',
+        /^https:\/\/(?:dev-|local-)?onboarding\.gdschongik\.com(?:\/.*)/,
+        /^https:\/\/(?:dev-)?api\.gdschongik\.com(?:\/.*)/
+      ],
       integrations: [
+        Sentry.browserTracingIntegration(),
         Sentry.reactRouterV6BrowserTracingIntegration({
           useEffect,
           useLocation,
@@ -24,7 +31,6 @@ const setSentry = () => {
           createRoutesFromChildren,
           matchRoutes
         }),
-        // eslint-disable-next-line import/namespace
         Sentry.replayIntegration()
       ],
 
diff --git a/vite.config.ts b/vite.config.ts
index 72bffb6..eb11dc1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,23 +1,27 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
-
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths(), sentryVitePlugin({
-    org: process.env.SENTRY_ORG_NAME,
-    project: process.env.SENTRY_PROJECT_NAME,
-    authToken: process.env.SENTRY_AUTH_TOKEN,
-    sourcemaps: {
-      assets: './dist/**',
-      filesToDeleteAfterUpload: '**/*.map'
-    }
-  }), sentryVitePlugin({
-    org: "gdsc-hongik",
-    project: "wow-onboarding"
-  })],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    sentryVitePlugin({
+      org: process.env.VITE_SENTRY_ORG_NAME,
+      project: process.env.VITE_SENTRY_PROJECT_NAME,
+      authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
+      sourcemaps: {
+        assets: './dist/**',
+        filesToDeleteAfterUpload: '**/*.map'
+      }
+    }),
+    sentryVitePlugin({
+      org: 'gdsc-hongik',
+      project: 'wow-onboarding'
+    })
+  ],
   build: {
     sourcemap: true
   }