ci: sentry 초기 설정

frontend/.gitignore

@@ -2,4 +2,6 @@ node_modules
 dist
 
 yarn-error.log
-.env
+.env
+# Sentry Config File
+.env.sentry-build-plugin

frontend/package.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@sentry/react": "^8.23.0",
+    "@sentry/webpack-plugin": "^2.21.1",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
     "dotenv-webpack": "^8.1.0",

frontend/src/index.tsx

@@ -1,4 +1,5 @@
 import { Global, ThemeProvider } from '@emotion/react';
+import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -17,6 +18,20 @@ import ReviewWritingCompletePage from './pages/ReviewWritingCompletePage';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
+const { hostname, port } = DEV_ENVIRONMENT;
+const isDev = window?.location.hostname === hostname && window.location.port === port;
+const baseUrlPattern = new RegExp(`^${process.env.API_BASE_URL?.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`);
+
+Sentry.init({
+  dsn: `${process.env.SENTRY_DSN}`,
+  enabled: !isDev,
+  environment: 'production',
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [baseUrlPattern],
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -62,9 +77,6 @@ const router = createBrowserRouter([
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 async function enableMocking() {
-  const { hostname, port } = DEV_ENVIRONMENT;
-  const isDev = window?.location.hostname === hostname && window.location.port === port;
-
   if (isDev) {
     const { worker } = await import('./mocks/browser');
     return worker.start();

frontend/webpack.config.js

@@ -2,6 +2,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -38,6 +39,7 @@ module.exports = (env, argv) => {
         },
       ],
     },
+    devtool: 'source-map',
     plugins: [
       new HtmlWebpackPlugin({
         template: './public/index.html',
@@ -54,6 +56,11 @@ module.exports = (env, argv) => {
         systemvars: true,
         path: './.env',
       }),
+      sentryWebpackPlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'review-me',
+        project: 'review-me',
+      }),
     ],
     devtool: isProduction ? 'hidden-source-map' : 'eval',
     devServer: {