Sentry react-router integration

app/components/error-boundary.tsx

@@ -4,7 +4,8 @@ import {
 	useParams,
 	useRouteError,
 } from '@remix-run/react'
-import { captureRemixErrorBoundaryError } from '@sentry/remix'
+import * as Sentry from '@sentry/react'
+import { useEffect } from 'react'
 import { getErrorMessage } from '#app/utils/misc.tsx'
 
 type StatusHandler = (info: {
@@ -26,7 +27,19 @@ export function GeneralErrorBoundary({
 	unexpectedErrorHandler?: (error: unknown) => JSX.Element | null
 }) {
 	const error = useRouteError()
-	captureRemixErrorBoundaryError(error)
+	useEffect(() => {
+		if (
+			typeof document !== 'undefined' &&
+			!isRouteErrorResponse(error)
+		) {
+			Sentry.captureException(error, {
+				mechanism: {
+					type: 'react-router',
+					handled: false,
+				},
+			})
+		}
+	}, [error])
 	const params = useParams()
 
 	if (typeof document !== 'undefined') {

app/entry.server.tsx

@@ -6,7 +6,7 @@ import {
 	type HandleDocumentRequestFunction,
 } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
-import * as Sentry from '@sentry/remix'
+import * as Sentry from '@sentry/node'
 import chalk from 'chalk'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
@@ -137,16 +137,36 @@ export function handleError(
 	if (request.signal.aborted) {
 		return
 	}
+	const requestInfo = {
+		url: request.url,
+		method: request.method,
+		headers: Object.fromEntries(request.headers.entries()),
+	}
+	const captureException = (
+		exception: unknown,
+		context?: Parameters<typeof Sentry.captureException>[1],
+	) => {
+		Sentry.withScope((scope) => {
+			scope.addEventProcessor((event) => ({
+				...event,
+				request: {
+					...event.request,
+					...requestInfo,
+				},
+			}))
+			Sentry.captureException(exception, context)
+		})
+	}
 	if (error instanceof Error) {
 		console.error(chalk.red(error.stack))
-		void Sentry.captureRemixServerException(
-			error,
-			'remix.server',
-			request,
-			true,
-		)
+		captureException(error, {
+			mechanism: {
+				type: 'react-router',
+				handled: false,
+			},
+		})
 	} else {
 		console.error(chalk.red(error))
-		Sentry.captureException(error)
+		captureException(error)
 	}
 }

app/root.tsx

@@ -13,7 +13,6 @@ import {
 	ScrollRestoration,
 	useLoaderData,
 } from '@remix-run/react'
-import { withSentry } from '@sentry/remix'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'
@@ -205,7 +204,7 @@ function AppWithProviders() {
 	)
 }
 
-export default withSentry(AppWithProviders)
+export default AppWithProviders
 
 export function ErrorBoundary() {
 	// the nonce doesn't rely on the loader so we can access that

app/utils/monitoring.client.tsx

@@ -1,10 +1,15 @@
-import { useLocation, useMatches } from '@remix-run/react'
 import {
+	createRoutesFromChildren,
+	matchRoutes,
+	useLocation,
+	useNavigationType,
+} from '@remix-run/react'
+import {
+	browserProfilingIntegration,
 	init as sentryInit,
-	browserTracingIntegration,
+	reactRouterV7BrowserTracingIntegration,
 	replayIntegration,
-	browserProfilingIntegration,
-} from '@sentry/remix'
+} from '@sentry/react'
 import { useEffect } from 'react'
 
 export function init() {
@@ -25,10 +30,12 @@ export function init() {
 			return event
 		},
 		integrations: [
-			browserTracingIntegration({
+			reactRouterV7BrowserTracingIntegration({
 				useEffect,
 				useLocation,
-				useMatches,
+				useNavigationType,
+				createRoutesFromChildren,
+				matchRoutes,
 			}),
 			replayIntegration(),
 			browserProfilingIntegration(),