Update Sentry

app/components/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { captureException } from '@sentry/react'
+import { captureException } from '@sentry/react-router'
 import { useEffect, type ReactElement } from 'react'
 import {
 	type ErrorResponse,

app/entry.server.tsx

@@ -3,7 +3,7 @@ import { PassThrough } from 'node:stream'
 import { styleText } from 'node:util'
 import { contentSecurity } from '@nichtsam/helmet/content'
 import { createReadableStreamFromReadable } from '@react-router/node'
-import * as Sentry from '@sentry/node'
+import * as Sentry from '@sentry/react-router'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
 import {
@@ -131,11 +131,12 @@ export function handleError(
 	if (request.signal.aborted) {
 		return
 	}
+
 	if (error instanceof Error) {
 		console.error(styleText('red', String(error.stack)))
-		void Sentry.captureException(error)
 	} else {
 		console.error(error)
-		Sentry.captureException(error)
 	}
+
+	Sentry.captureException(error)
 }

app/utils/monitoring.client.tsx

@@ -1,11 +1,4 @@
-import * as Sentry from '@sentry/react'
-import React from 'react'
-import {
-	createRoutesFromChildren,
-	matchRoutes,
-	useLocation,
-	useNavigationType,
-} from 'react-router'
+import * as Sentry from '@sentry/react-router'
 
 export function init() {
 	Sentry.init({
@@ -27,13 +20,6 @@ export function init() {
 		integrations: [
 			Sentry.replayIntegration(),
 			Sentry.browserProfilingIntegration(),
-			Sentry.reactRouterV7BrowserTracingIntegration({
-				useEffect: React.useEffect,
-				useLocation,
-				useNavigationType,
-				createRoutesFromChildren,
-				matchRoutes,
-			}),
 		],
 
 		// Set tracesSampleRate to 1.0 to capture 100%

package.json

@@ -67,9 +67,8 @@
     "@react-router/node": "^7.2.0",
     "@react-router/remix-routes-option-adapter": "^7.2.0",
     "@remix-run/server-runtime": "^2.15.3",
-    "@sentry/node": "^9.2.0",
-    "@sentry/profiling-node": "^9.2.0",
-    "@sentry/react": "^9.2.0",
+    "@sentry/profiling-node": "9.5.0",
+    "@sentry/react-router": "9.5.0",
     "@simplewebauthn/browser": "^13.1.0",
     "@simplewebauthn/server": "^13.1.1",
     "@tusbar/cache-control": "1.0.2",
@@ -122,7 +121,6 @@
     "@faker-js/faker": "^9.5.0",
     "@playwright/test": "^1.50.1",
     "@react-router/dev": "^7.2.0",
-    "@sentry/vite-plugin": "^3.2.1",
     "@sly-cli/sly": "^1.14.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",

react-router.config.ts

@@ -1,9 +1,23 @@
 import { type Config } from '@react-router/dev/config'
+import { sentryOnBuildEnd } from '@sentry/react-router'
+
+const MODE = process.env.NODE_ENV
+
 export default {
 	// Defaults to true. Set to false to enable SPA for all routes.
 	ssr: true,
 
 	future: {
 		unstable_optimizeDeps: true,
 	},
+
+	buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
+		if (MODE === 'production' && process.env.SENTRY_AUTH_TOKEN) {
+			await sentryOnBuildEnd({
+				viteConfig,
+				reactRouterConfig,
+				buildManifest,
+			})
+		}
+	},
 } satisfies Config

server/index.ts

@@ -1,7 +1,7 @@
 import { styleText } from 'node:util'
 import { helmet } from '@nichtsam/helmet/node-http'
 import { createRequestHandler } from '@react-router/express'
-import * as Sentry from '@sentry/node'
+import * as Sentry from '@sentry/react-router'
 import { ip as ipAddress } from 'address'
 import closeWithGrace from 'close-with-grace'
 import compression from 'compression'

server/utils/monitoring.ts

@@ -1,6 +1,6 @@
 import prismaInstrumentation from '@prisma/instrumentation'
-import * as Sentry from '@sentry/node'
 import { nodeProfilingIntegration } from '@sentry/profiling-node'
+import * as Sentry from '@sentry/react-router'
 
 // prisma's exports are wrong...
 // https://github.com/prisma/prisma/issues/23410

vite.config.ts

@@ -1,12 +1,14 @@
 import { reactRouter } from '@react-router/dev/vite'
-import { sentryVitePlugin } from '@sentry/vite-plugin'
-
+import {
+	sentryReactRouter,
+	type SentryReactRouterBuildOptions,
+} from '@sentry/react-router'
+import { defineConfig } from 'vite'
 import { envOnlyMacros } from 'vite-env-only'
-import { type ViteUserConfig } from 'vitest/config'
 
 const MODE = process.env.NODE_ENV
 
-export default {
+export default defineConfig((config) => ({
 	build: {
 		target: 'es2022',
 		cssMinify: MODE === 'production',
@@ -32,30 +34,14 @@ export default {
 			ignored: ['**/playwright-report/**'],
 		},
 	},
+	sentryConfig,
 	plugins: [
 		envOnlyMacros(),
 		// it would be really nice to have this enabled in tests, but we'll have to
 		// wait until https://github.com/remix-run/remix/issues/9871 is fixed
-		process.env.NODE_ENV === 'test' ? null : reactRouter(),
-		process.env.SENTRY_AUTH_TOKEN
-			? sentryVitePlugin({
-					disable: MODE !== 'production',
-					authToken: process.env.SENTRY_AUTH_TOKEN,
-					org: process.env.SENTRY_ORG,
-					project: process.env.SENTRY_PROJECT,
-					release: {
-						name: process.env.COMMIT_SHA,
-						setCommits: {
-							auto: true,
-						},
-					},
-					sourcemaps: {
-						filesToDeleteAfterUpload: [
-							'./build/**/*.map',
-							'.server-build/**/*.map',
-						],
-					},
-				})
+		MODE === 'test' ? null : reactRouter(),
+		MODE === 'production' && process.env.SENTRY_AUTH_TOKEN
+			? sentryReactRouter(sentryConfig, config)
 			: null,
 	],
 	test: {
@@ -68,4 +54,22 @@ export default {
 			all: true,
 		},
 	},
-} satisfies ViteUserConfig
+}))
+
+const sentryConfig: SentryReactRouterBuildOptions = {
+	authToken: process.env.SENTRY_AUTH_TOKEN,
+	org: process.env.SENTRY_ORG,
+	project: process.env.SENTRY_PROJECT,
+
+	unstable_sentryVitePluginOptions: {
+		release: {
+			name: process.env.COMMIT_SHA,
+			setCommits: {
+				auto: true,
+			},
+		},
+		sourcemaps: {
+			filesToDeleteAfterUpload: ['./build/**/*.map', '.server-build/**/*.map'],
+		},
+	},
+}