feature: sentry, nextjs로 변경

.gitignore

@@ -25,4 +25,6 @@ dist-ssr
 *.sw?
 *.env
 
-*.cache
+*.cache
+# Sentry Auth Token
+.sentryclirc

next.config.mjs

@@ -0,0 +1,58 @@
+import { withSentryConfig } from '@sentry/nextjs';
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  // HJ TODO: 학습 필요
+  sentry: {
+    autoInstrumentServerFunctions: false,
+  },
+};
+
+/**
+ * @type {import('@sentry/nextjs/types/config/types').SentryWebpackPluginOptions}>
+ */
+const sentryWebpackPluginOptions = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  // Suppresses source map uploading logs during build
+  silent: true,
+
+  org: 'saekkkanda-m0',
+  project: 'omct-next',
+};
+
+/**
+ * @type {import('@sentry/nextjs/types/config/types').UserSentryOptions}>
+ */
+const sentryOptions = {
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Transpiles SDK to be compatible with IE11 (increases bundle size)
+  transpileClientSDK: true,
+
+  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+  tunnelRoute: '/monitoring',
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+};
+
+export default withSentryConfig(
+  nextConfig,
+  sentryWebpackPluginOptions,
+  sentryOptions
+);

package.json

@@ -16,9 +16,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@sentry/react": "^7.40.0",
-    "@sentry/tracing": "^7.40.0",
     "@types/kakao-js-sdk": "^1.39.1",
+    "@sentry/nextjs": "^7.52.1",
     "eslint-config-prettier": "^8.6.0",
     "firebase": "^9.17.1",
     "html2canvas": "^1.4.1",

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: 'https://9a3b5d02657d4031b2f5f2c1b33f0e44@o4504803405332480.ingest.sentry.io/4505216542572544',
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    new Sentry.Replay({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://9a3b5d02657d4031b2f5f2c1b33f0e44@o4504803405332480.ingest.sentry.io/4505216542572544",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://9a3b5d02657d4031b2f5f2c1b33f0e44@o4504803405332480.ingest.sentry.io/4505216542572544",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

src/pages/_app.tsx

@@ -3,7 +3,6 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
-import { ErrorBoundary } from '@sentry/react';
 import MobileLayout from '@Components/Layout/MobileLayout';
 import GlobalStyle from '@Styles/GlobalStyle';
 import theme from '@Styles/theme';
@@ -21,16 +20,14 @@ const App = ({ Component, pageProps }: AppProps) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
 
-      <ErrorBoundary>
-        <RecoilRoot>
-          <GlobalStyle />
-          <ThemeProvider theme={theme}>
-            <MobileLayout>
-              <Component {...pageProps} />
-            </MobileLayout>
-          </ThemeProvider>
-        </RecoilRoot>
-      </ErrorBoundary>
+      <RecoilRoot>
+        <GlobalStyle />
+        <ThemeProvider theme={theme}>
+          <MobileLayout>
+            <Component {...pageProps} />
+          </MobileLayout>
+        </ThemeProvider>
+      </RecoilRoot>
     </>
   );
 };

src/pages/_document.tsx

@@ -1,17 +1,5 @@
 import React from 'react';
 import { Html, Head, Main, NextScript } from 'next/document';
-import * as Sentry from '@sentry/browser';
-import { BrowserTracing } from '@sentry/tracing';
-
-const isProduction = process.env.PROD;
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: isProduction ? 'production' : 'development',
-  release: process.env.NEXT_PUBLIC_RELEASE_VERSION,
-  integrations: [new BrowserTracing()],
-  tracesSampleRate: 1.0,
-});
 
 export default function Document() {
   return (