develop -> main

.eslintrc.cjs

@@ -70,7 +70,13 @@ module.exports = {
       "error",
       {
         case: "camelCase",
-        ignore: ["App.tsx", "vite-env.d.ts", "next-env.d.ts", /^vendor/i],
+        ignore: [
+          "App.tsx",
+          "vite-env.d.ts",
+          "next-env.d.ts",
+          "global-error.tsx",
+          /^vendor/i,
+        ],
       },
     ], // 파일명은 camelCase
     "unicorn/prevent-abbreviations": "off", //축약어 사용피하도록 권장 off

apps/company/next.config.js

@@ -20,3 +20,47 @@ const nextConfig = {
 };
 
 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-company",
+
+  // 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,
+});

apps/company/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "^13.5.4",
+    "@sentry/nextjs": "^8",
+    "@sentry/utils": "^8.33.1",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",
     "axios": "^1.6.7",

apps/company/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,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

apps/company/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,
+});

apps/company/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,
+});

apps/company/src/apis/axios.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosError } from "axios";
 import { Cookies } from "react-cookie";
 import { ReissueToken } from "./auth";
+import * as Sentry from "@sentry/nextjs";
 
 export const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
@@ -28,13 +29,27 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   async response => response,
   async (error: AxiosError<AxiosError>) => {
+    console.error(error);
+    Sentry.captureException(error);
     if (axios.isAxiosError(error) && error.response) {
-      const { config } = error;
+      const {
+        config,
+        response: { data },
+      } = error;
       const refreshToken = cookie.get("refresh_token");
       const { response, message } = error;
-      if (
-        response.data.message === "Invalid Token" ||
-        response.data.message === "Token Expired" ||
+
+      Sentry.captureMessage(data.message);
+
+      if (response.data.status && response.data.status > 500) {
+        window.location.href = "/serverCheck";
+        return Promise.reject(error);
+      }
+
+      if (status)
+        if (
+          response.data.message === "Invalid Token" ||
+          response.data.message === "Token Expired" ||
         message === "Request failed with status code 403"
       ) {
         const originalRequest = config;

apps/company/src/apis/files/index.ts

@@ -8,7 +8,7 @@ export type ImageType = "LOGO_IMAGE" | "EXTENSION_FILE";
 
 export const fileUpload = async (files: File[]) => {
   const body = files.map(file => ({
-    type: "EXTENSION_FILE",
+    type: "LOGO_IMAGE",
     file_name: file.name,
   }));
   const { data } = await instance.post<PresignedURLResponse>(

apps/company/src/app/api/sentry-example-api/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+// A faulty API route to test Sentry's error monitoring
+export function GET() {
+  throw new Error("Sentry Example API Route Error");
+  return NextResponse.json({ data: "Testing Sentry Error..." });
+}

apps/company/src/app/global-error.tsx

@@ -0,0 +1,27 @@
+"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>
+  );
+}