Instrument with Sentry changes

.env.example

@@ -7,3 +7,4 @@ ENCRYPTION_SECRET="some-made-up-secret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
 MAILGUN_DOMAIN="mg.example.com"
 MAILGUN_SENDING_KEY="some-api-token-with-dashes"
+SENTRY_DSN=""

app/entry.client.tsx

@@ -1,7 +1,35 @@
-import { RemixBrowser } from '@remix-run/react'
-import { startTransition } from 'react'
+import { RemixBrowser, useLocation, useMatches } from '@remix-run/react'
+import * as Sentry from '@sentry/remix'
+import { startTransition, useEffect } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
+Sentry.init({
+	dsn: ENV.SENTRY_DSN,
+	integrations: [
+		new Sentry.BrowserTracing({
+			// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+			tracePropagationTargets: ['localhost'],
+			routingInstrumentation: Sentry.remixRouterInstrumentation(
+				useEffect,
+				useLocation,
+				useMatches,
+			),
+		}),
+		// Replay is only available in the client
+		new Sentry.Replay(),
+	],
+
+	// Set tracesSampleRate to 1.0 to capture 100%
+	// of transactions for performance monitoring.
+	// We recommend adjusting this value in production
+	tracesSampleRate: 1.0,
+
+	// Capture Replay for 10% of all sessions,
+	// plus for 100% of sessions with an error
+	replaysSessionSampleRate: 0.1,
+	replaysOnErrorSampleRate: 1.0,
+})
+
 if (ENV.MODE === 'development') {
 	import('~/utils/devtools.tsx').then(({ init }) => init())
 }

app/entry.server.tsx

@@ -1,5 +1,6 @@
 import { Response, type HandleDocumentRequestFunction } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
+import * as Sentry from '@sentry/remix'
 import isbot from 'isbot'
 import { getInstanceInfo } from 'litefs-js'
 import { renderToPipeableStream } from 'react-dom/server'
@@ -12,6 +13,14 @@ const ABORT_DELAY = 5000
 init()
 global.ENV = getEnv()
 
+Sentry.init({
+	dsn: ENV.SENTRY_DSN,
+	// Set tracesSampleRate to 1.0 to capture 100%
+	// of transactions for performance monitoring.
+	// We recommend adjusting this value in production
+	tracesSampleRate: 1.0,
+})
+
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
 export default async function handleRequest(...args: DocRequestArgs) {

app/root.tsx

@@ -20,6 +20,7 @@ import {
 	useLoaderData,
 	useSubmit,
 } from '@remix-run/react'
+import { withSentry } from '@sentry/remix'
 import { clsx } from 'clsx'
 import { useState } from 'react'
 import tailwindStylesheetUrl from './styles/tailwind.css'
@@ -84,7 +85,7 @@ export async function loader({ request }: DataFunctionArgs) {
 	return json({ user, ENV: getEnv() })
 }
 
-export default function App() {
+function App() {
 	const data = useLoaderData<typeof loader>()
 	const nonce = useNonce()
 	const { user } = data
@@ -141,6 +142,8 @@ export default function App() {
 	)
 }
 
+export default withSentry(App)
+
 function ThemeSwitch() {
 	const fetcher = useFetcher()
 	const [mode, setMode] = useState<'system' | 'dark' | 'light'>('system')

app/utils/env.server.ts

@@ -37,9 +37,11 @@ export function init() {
  */
 export function getEnv() {
 	invariant(process.env.NODE_ENV, 'NODE_ENV should be defined')
+	invariant(process.env.SENTRY_DSN, 'SENTRY_DSN should be defined')
 
 	return {
 		MODE: process.env.NODE_ENV,
+		SENTRY_DSN: process.env.SENTRY_DSN,
 	}
 }