config: sentry 설정 추가

성능 및 에러 모니터링을 위한 sentry를 추가했습니다.

Author: BHyeonKim

instrument.server.mjs

@@ -0,0 +1,13 @@
+import { nodeProfilingIntegration } from '@sentry/profiling-node';
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+	dsn: 'https://8343c6ee467e6f35f22c570a68cd2e6e@o4509544992407552.ingest.us.sentry.io/4509548888391680',
+	sendDefaultPii: true,
+	// Enable logs to be sent to Sentry
+	_experiments: { enableLogs: true },
+
+	integrations: [nodeProfilingIntegration()],
+	tracesSampleRate: 1.0, // Capture 100% of the transactions
+	profilesSampleRate: 1.0, // profile every transaction
+});

package.json

@@ -4,8 +4,8 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "react-router dev",
-		"build": "react-router build",
+		"dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",
+		"build": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js",
 		"start": "react-router-serve ./build/server/index.js",
 		"typecheck": "react-router typegen && tsc",
 		"test": "vitest",
@@ -21,6 +21,8 @@
 		"@react-router/fs-routes": "^7.5.3",
 		"@react-router/node": "^7.5.3",
 		"@react-router/serve": "^7.5.3",
+		"@sentry/profiling-node": "^9.30.0",
+		"@sentry/react-router": "^9.30.0",
 		"@stomp/stompjs": "^7.1.1",
 		"@xstate/react": "^5.0.4",
 		"clsx": "^2.1.1",
@@ -66,8 +68,6 @@
 	},
 	"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
 	"msw": {
-		"workerDirectory": [
-			"public"
-		]
+		"workerDirectory": ["public"]
 	}
 }

react-router.config.ts

@@ -1,6 +1,10 @@
 import type { Config } from '@react-router/dev/config';
+import { sentryOnBuildEnd } from '@sentry/react-router';
 
 export default {
 	appDirectory: './src/app',
 	ssr: true,
+	buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
+		await sentryOnBuildEnd({viteConfig, reactRouterConfig, buildManifest});
+	},
 } satisfies Config;

src/app/entry.client.tsx

@@ -1,20 +1,41 @@
+import * as Sentry from '@sentry/react-router';
 /* v8 ignore start */
 import { startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
 
+Sentry.init({
+	dsn: 'https://8343c6ee467e6f35f22c570a68cd2e6e@o4509544992407552.ingest.us.sentry.io/4509548888391680',
+
+	sendDefaultPii: true,
+
+	integrations: [
+		Sentry.reactRouterTracingIntegration(),
+		Sentry.replayIntegration(),
+		Sentry.feedbackIntegration({
+			colorScheme: 'system',
+		}),
+	],
+
+	_experiments: { enableLogs: true },
+
+	tracesSampleRate: 1.0,
+
+	// Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled
+	tracePropagationTargets: [/^\//, /^https:\/\/investfuture\.my\/api/],
+	// Capture Replay for 10% of all sessions,
+	// plus 100% of sessions with an error
+	replaysSessionSampleRate: 0.1,
+	replaysOnErrorSampleRate: 1.0,
+});
+
 async function prepareApp() {
 	return Promise.resolve();
 }
 
 prepareApp().then(() => {
 	startTransition(() => {
-		hydrateRoot(
-			document,
-			// <StrictMode>
-			// </StrictMode>,
-			<HydratedRouter />,
-		);
+		hydrateRoot(document, <HydratedRouter />);
 	});
 });
 

src/app/entry.server.tsx

@@ -2,6 +2,10 @@
 import { PassThrough } from 'node:stream';
 
 import { createReadableStreamFromReadable } from '@react-router/node';
+import {
+	getMetaTagTransformer,
+	wrapSentryHandleRequest,
+} from '@sentry/react-router';
 import { isbot } from 'isbot';
 import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { renderToPipeableStream } from 'react-dom/server';
@@ -10,7 +14,7 @@ import { ServerRouter } from 'react-router';
 
 export const streamTimeout = 5_000;
 
-export default function handleRequest(
+function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
@@ -47,7 +51,7 @@ export default function handleRequest(
 						}),
 					);
 
-					pipe(body);
+					pipe(getMetaTagTransformer(body));
 				},
 				onShellError(error: unknown) {
 					reject(error);
@@ -71,4 +75,5 @@ export default function handleRequest(
 	});
 }
 
+export default wrapSentryHandleRequest(handleRequest);
 /* v8 ignore end */

src/app/root.tsx

@@ -1,3 +1,5 @@
+import * as Sentry from '@sentry/react-router';
+import { preload } from 'react-dom';
 import {
 	Links,
 	Meta,
@@ -6,12 +8,11 @@ import {
 	ScrollRestoration,
 	isRouteErrorResponse,
 } from 'react-router';
+import { Slide } from 'react-toastify';
 import { ToastContainer } from 'react-toastify/unstyled';
-import type { Route } from './+types/root';
 
 import './app.css';
-import { preload } from 'react-dom';
-import { Slide } from 'react-toastify';
+import type { Route } from './+types/root';
 import StompProvider from './provider/StompProvider';
 import UserIdProvider from './provider/UserInfoProvider';
 
@@ -121,9 +122,12 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 			error.status === 404
 				? 'The requested page could not be found.'
 				: error.statusText || details;
-	} else if (import.meta.env.DEV && error && error instanceof Error) {
-		details = error.message;
-		stack = error.stack;
+	} else if (error && error instanceof Error) {
+		Sentry.captureException(error);
+		if (import.meta.env.DEV) {
+			details = error.message;
+			stack = error.stack;
+		}
 	}
 
 	return (

vite.config.ts

@@ -1,24 +1,38 @@
 import { reactRouter } from '@react-router/dev/vite';
+import {
+	type SentryReactRouterBuildOptions,
+	sentryReactRouter,
+} from '@sentry/react-router';
 import svgr from '@svgr/rollup';
 import tailwindcss from '@tailwindcss/vite';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { type PluginOption, defineConfig } from 'vite';
+import { type PluginOption, defineConfig, loadEnv } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-export default defineConfig({
-	plugins: [
-		svgr(),
-		tailwindcss(),
-		reactRouter(),
-		tsconfigPaths(),
-		visualizer() as PluginOption,
-	],
-	optimizeDeps: {
-		exclude: ['@amcharts/amcharts5'],
-	},
-	build: {
-		rollupOptions: {
-			external: ['d3-geo,d3-selection,d3-transition'],
+export default defineConfig((config) => {
+	const env = loadEnv(config.mode, process.cwd());
+	const sentryConfig: SentryReactRouterBuildOptions = {
+		org: env.VITE_SENTRY_ORG,
+		project: env.VITE_SENTRY_PROJECT,
+		authToken: env.VITE_SENTRY_AUTH_TOKEN,
+	};
+
+	return {
+		plugins: [
+			svgr(),
+			tailwindcss(),
+			reactRouter(),
+			tsconfigPaths(),
+			visualizer() as PluginOption,
+			sentryReactRouter(sentryConfig, config),
+		],
+		optimizeDeps: {
+			exclude: ['@amcharts/amcharts5'],
+		},
+		build: {
+			rollupOptions: {
+				external: ['d3-geo,d3-selection,d3-transition'],
+			},
 		},
-	},
+	};
 });