[cs frontend] sentry 추가 테스트 케이스 추가

apps/cs/instrumentation-client.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [Sentry.replayIntegration()],
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/cs/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

apps/cs/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import { withSentryConfig } from "@sentry/nextjs";
 
 const subDomain =
   process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
@@ -58,4 +59,16 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  silent: true,
+  widenClientFileUpload: true,
+  tunnelRoute: "/monitoring",
+  webpack: {
+    treeshake: {
+      removeDebugLogging: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true" ? false : true,
+    },
+    automaticVercelMonitors: false,
+  },
+});

apps/cs/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@sentry/nextjs": "^10.57.0",
     "@tanstack/react-query": "^5.75.5",
     "@tanstack/react-query-devtools": "^5.75.5",
     "@tanstack/react-table": "^8.21.2",

apps/cs/sentry.edge.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/cs/sentry.server.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/cs/src/entities/menu/lib/menu-wrapper.tsx

@@ -2,9 +2,10 @@
 
 import { useEffect } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
 import { MenuAuthorityApi } from "@/entities/menu-authority/@x/menu";
 import { getCookie, useAlertStore, useMenuStore } from "@/shared/lib";
-import { SITE_ID } from "@/shared/config";
+import { SITE_ID, ENDPOINT } from "@/shared/config";
 import { MenuApi } from "../api/menu-service";
 import { getCurrentMenu } from "./utils";
 
@@ -16,11 +17,10 @@ const MenuWrapper = ({ children }: { children: React.ReactNode }) => {
   const { pageMenuAuthority, setCurrentMenuInfo, setPageMenuAuthority } =
     useMenuStore((state) => state);
 
-  const getCurrentMenuInfo = async () => {
-    const menuRoles = await MenuApi.getMenuRoles(SITE_ID);
-    if (!menuRoles) return;
-    return getCurrentMenu(menuRoles, pathname ?? "");
-  };
+  const { data: menuRoles } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
+    queryFn: () => MenuApi.getMenuRoles(SITE_ID),
+  });
 
   const getPageMenuAuthority = async () => {
     const menuCd = getCookie("menu-code-key");
@@ -36,10 +36,14 @@ const MenuWrapper = ({ children }: { children: React.ReactNode }) => {
   };
 
   useEffect(() => {
-    (async () => {
-      const currentMenu = await getCurrentMenuInfo();
+    if (menuRoles) {
+      const currentMenu = getCurrentMenu(menuRoles, pathname ?? "");
       if (currentMenu) setCurrentMenuInfo(currentMenu);
+    }
+  }, [menuRoles, pathname]);
 
+  useEffect(() => {
+    (async () => {
       const response = await getPageMenuAuthority();
       if (response?.length) setPageMenuAuthority(response[0]!);
     })();