main -> develop

next.config.js

@@ -1,16 +1,60 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",
-  images: {
-    unoptimized: true,
-    domains: ["picsum.photos"],
-  },
-  reactStrictMode: true,
-  trailingSlash: true,
-  experimental: {
-    appDir: true,
-    esmExternals: "loose",
-  },
+    output: 'export',
+    images: {
+        unoptimized: true,
+        domains: ['picsum.photos'],
+    },
+    reactStrictMode: true,
+    trailingSlash: true,
+    experimental: {
+        appDir: true,
+        esmExternals: 'loose',
+    },
 };
 
 module.exports = nextConfig;
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require('@sentry/nextjs');
+
+module.exports = withSentryConfig(module.exports, {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: 'jobis-fe',
+    project: 'jobis-student',
+
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
+
+    // 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,
+
+    // Automatically annotate React components to show their full name in breadcrumbs and session replay
+    reactComponentAnnotation: {
+        enabled: true,
+    },
+
+    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    // tunnelRoute: '/monitoring',
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+});

package.json

@@ -1,41 +1,42 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@next/font": "^13.5.2",
-    "@tanstack/react-query": "4.33.0",
-    "@team-return/design-system": "^1.1.15",
-    "axios": "^1.6.2",
-    "debug": "^4.3.4",
-    "next": "13.4.7",
-    "react": "^18.2.0",
-    "react-cookie": "6.1.0",
-    "react-dom": "18.2.0",
-    "react-query": "^3.39.3",
-    "styled-components": "^6.0.7",
-    "yarn": "^1.22.19"
-  },
-  "packageManager": "[email protected]",
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/debug": "^4",
-    "@types/eslint": "^8",
-    "@types/node": "20.8.2",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
-    "@yarnpkg/sdks": "^3.0.0-rc.49",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.50.0",
-    "eslint-config-next": "^13.5.3",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "4.7.2"
-  }
+    "name": "my-app",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@next/font": "^13.5.2",
+        "@sentry/nextjs": "^8.33.1",
+        "@sentry/utils": "^8.33.1",
+        "@tanstack/react-query": "4.33.0",
+        "@team-return/design-system": "^1.1.15",
+        "axios": "^1.6.2",
+        "debug": "^4.3.4",
+        "next": "13.4.7",
+        "react": "^18.2.0",
+        "react-cookie": "^7.2.1",
+        "react-dom": "18.2.0",
+        "react-query": "^3.39.3",
+        "styled-components": "^6.0.7"
+    },
+    "devDependencies": {
+        "@sentry/webpack-plugin": "^2.22.5",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@types/debug": "^4",
+        "@types/eslint": "^8",
+        "@types/node": "20.8.2",
+        "@types/react": "18.2.0",
+        "@types/react-dom": "18.2.7",
+        "@yarnpkg/sdks": "^3.0.0-rc.49",
+        "autoprefixer": "^10.4.17",
+        "eslint": "^8.50.0",
+        "eslint-config-next": "^13.5.3",
+        "postcss": "^8.4.35",
+        "tailwindcss": "^3.4.1",
+        "typescript": "4.7.2"
+    }
 }

sentry.client.config.ts

@@ -0,0 +1,31 @@
+// 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: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Add optional integrations for additional features
+    integrations: [
+        Sentry.replayIntegration({
+            maskAllText: false, // 리플레이 텍스트 마스킹 off
+            blockAllMedia: false, // 리플레이 미디어 block off
+        }),
+    ],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Define how likely Replay events are sampled.
+  // 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,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

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: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Define how likely traces are sampled. 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: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Define how likely traces are sampled. 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/apis/axios.ts

@@ -1,73 +1,76 @@
-import axios, { AxiosError } from "axios";
-import { Cookies } from "react-cookie";
-import { useReissueToken } from "./auth";
+import axios, { AxiosError } from 'axios';
+import { Cookies } from 'react-cookie';
+import { useReissueToken } from './auth';
+import * as Sentry from '@sentry/nextjs';
 
 export const instance = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
-  timeout: 10000,
+    baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+    timeout: 10000,
 });
 
 const cookies = new Cookies();
 let isRefreshing = false;
 
 instance.interceptors.request.use(
-  (config) => {
-    const accessToken = cookies.get("access_token");
-    const returnConfig = { ...config };
-    if (accessToken) {
-      returnConfig.headers!["Authorization"] = `Bearer ${accessToken}`;
-    }
-    return returnConfig;
-  },
-  (error: AxiosError) => Promise.reject(error)
+    (config) => {
+        const accessToken = cookies.get('access_token');
+        const returnConfig = { ...config };
+        if (accessToken) {
+            returnConfig.headers!['Authorization'] = `Bearer ${accessToken}`;
+        }
+        return returnConfig;
+    },
+    (error: AxiosError) => Promise.reject(error)
 );
 
 instance.interceptors.response.use(
-  (response) => response,
-  async (error: AxiosError<AxiosError>) => {
-    if (axios.isAxiosError(error) && error.response) {
-      const { config } = error;
-      const refreshToken = cookies.get("refresh_token");
+    (response) => response,
+    async (error: AxiosError<AxiosError>) => {
+        if (axios.isAxiosError(error) && error.response) {
+            const { config } = error;
+            const refreshToken = cookies.get('refresh_token');
+
+            Sentry.captureMessage(error.response.data.message);
 
-      if (
-        (error.response.data.message === "Invalid Token" ||
-          error.response.data.message === "Token Expired" ||
-          !cookies.get("access_token")) &&
-        refreshToken
-      ) {
-        if (!isRefreshing) {
-          cookies.remove("access_token");
-          isRefreshing = true;
-          useReissueToken(refreshToken)
-            .then((res) => {
-              isRefreshing = false;
-              cookies.remove("refresh_token");
-              const accessExpired = new Date(res.access_expires_at);
-              const refreshExpired = new Date(res.refresh_expires_at);
-              cookies.set("access_token", res.access_token, {
-                path: '/',
-                expires: accessExpired,
-              });
-              cookies.set("refresh_token", res.refresh_token, {
-                path: '/',
-                expires: refreshExpired,
-              });
-              if (config!.headers) {
-                config!.headers["Authorization"] = `Bearer ${res.access_token}`;
-              }
-              return axios(config!);
-            })
-            .catch(() => {
-              isRefreshing = false;
-              cookies.remove("access_token");
-              cookies.remove("refresh_token");
-              window.location.href = "/account/login";
-            });
+            if (
+                (error.response.data.message === 'Invalid Token' ||
+                    error.response.data.message === 'Token Expired' ||
+                    !cookies.get('access_token')) &&
+                refreshToken
+            ) {
+                if (!isRefreshing) {
+                    cookies.remove('access_token');
+                    isRefreshing = true;
+                    useReissueToken(refreshToken)
+                        .then((res) => {
+                            isRefreshing = false;
+                            cookies.remove('refresh_token');
+                            const accessExpired = new Date(res.access_expires_at);
+                            const refreshExpired = new Date(res.refresh_expires_at);
+                            cookies.set('access_token', res.access_token, {
+                                path: '/',
+                                expires: accessExpired,
+                            });
+                            cookies.set('refresh_token', res.refresh_token, {
+                                path: '/',
+                                expires: refreshExpired,
+                            });
+                            if (config!.headers) {
+                                config!.headers['Authorization'] = `Bearer ${res.access_token}`;
+                            }
+                            return axios(config!);
+                        })
+                        .catch(() => {
+                            isRefreshing = false;
+                            cookies.remove('access_token');
+                            cookies.remove('refresh_token');
+                            window.location.href = '/account/login';
+                        });
+                }
+            } else if (error.response.status === 403) {
+                window.location.href = '/account/login';
+            }
         }
-      } else if (error.response.status === 403) {
-        window.location.href = "/account/login";
-      }
+        return Promise.reject(error);
     }
-    return Promise.reject(error);
-  }
 );

src/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}