migrate sentry to react router v7

app/components/error-boundary.tsx

@@ -1,4 +1,5 @@
-import { type ReactElement } from 'react'
+import * as Sentry from '@sentry/react'
+import { useEffect, type ReactElement } from 'react'
 import {
 	Link,
 	isRouteErrorResponse,
@@ -40,6 +41,10 @@ export const GeneralErrorBoundary = ({
 		console.error(error)
 	}
 
+	useEffect(() => {
+		Sentry.captureException(error)
+	}, [error])
+
 	return (
 		<div className="container flex items-center justify-center py-20">
 			{isRouteErrorResponse(error)

app/entry.server.tsx

@@ -1,7 +1,7 @@
 import { PassThrough } from 'node:stream'
 
 import { createReadableStreamFromReadable } from '@react-router/node'
-import { captureException, captureRemixServerException } from '@sentry/remix'
+import * as Sentry from '@sentry/node'
 import chalk from 'chalk'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
@@ -87,9 +87,9 @@ export function handleError(
 
 	if (error instanceof Error) {
 		console.error(chalk.red(error.stack))
-		void captureRemixServerException(error, 'remix.server', request)
+		Sentry.captureException(error)
 	} else {
 		console.error(chalk.red(error))
-		captureException(error)
+		Sentry.captureException(error)
 	}
 }

app/root.tsx

@@ -1,4 +1,3 @@
-import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix'
 import clsx from 'clsx'
 import {
 	data,
@@ -13,7 +12,6 @@ import {
 	Scripts,
 	ScrollRestoration,
 	useLoaderData,
-	useRouteError,
 	useRouteLoaderData,
 } from 'react-router'
 import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'
@@ -212,7 +210,7 @@ function AppWithProviders() {
 	)
 }
 
-export default withSentry(AppWithProviders)
+export default AppWithProviders
 
 export function Layout({ children }: { children: React.ReactNode }) {
 	const data = useRouteLoaderData<typeof loader>('root')
@@ -226,9 +224,4 @@ export function Layout({ children }: { children: React.ReactNode }) {
 	)
 }
 
-export function ErrorBoundary() {
-	const error = useRouteError()
-	captureRemixErrorBoundaryError(error)
-
-	return <GeneralErrorBoundary />
-}
+export const ErrorBoundary = GeneralErrorBoundary

app/utils/monitoring.client.ts

@@ -1,28 +1,30 @@
-import {
-	init as sentryInit,
-	browserTracingIntegration,
-	replayIntegration,
-	browserProfilingIntegration,
-} from '@sentry/remix'
+import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
-import { useLocation, useMatches } from 'react-router'
+import {
+	useLocation,
+	useNavigationType,
+	createRoutesFromChildren,
+	matchRoutes,
+} from 'react-router'
 
 export function init() {
-	sentryInit({
+	Sentry.init({
 		dsn: window.ENV.SENTRY_DSN,
 		tracesSampleRate: 1,
 		profilesSampleRate: 1,
 		replaysSessionSampleRate: 0.1,
 		replaysOnErrorSampleRate: 1,
 
 		integrations: [
-			browserTracingIntegration({
+			Sentry.replayIntegration(),
+			Sentry.browserProfilingIntegration(),
+			Sentry.reactRouterV7BrowserTracingIntegration({
 				useEffect,
 				useLocation,
-				useMatches,
+				useNavigationType,
+				createRoutesFromChildren,
+				matchRoutes,
 			}),
-			replayIntegration(),
-			browserProfilingIntegration(),
 		],
 	})
 }

package.json

@@ -46,7 +46,9 @@
     "@react-router/remix-config-routes-adapter": "0.0.0-nightly-bf7ecb711-20240911",
     "@react-router/remix-routes-option-adapter": "7.1.1",
     "@react-router/serve": "^7.0.0",
+    "@sentry/node": "8.50.0",
     "@sentry/profiling-node": "8.47.0",
+    "@sentry/react": "8.50.0",
     "@sentry/remix": "8.47.0",
     "@sentry/vite-plugin": "2.22.7",
     "@testing-library/dom": "10.4.0",