Update sentry

Author: kasperpeulen

.env.example

@@ -6,6 +6,7 @@ SESSION_SECRET="super-duper-s3cret"
 HONEYPOT_SECRET="super-duper-s3cret"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
 SENTRY_DSN="your-dsn"
+SENTRY_ENVIRONMENT="development"
 
 # this is set to a random value in the Dockerfile
 INTERNAL_COMMAND_TOKEN="some-made-up-token"

.github/workflows/deploy.yml

@@ -215,6 +215,7 @@ jobs:
         if: ${{ github.ref == 'refs/heads/dev' }}
         run: |
           flyctl deploy \
+            --env SENTRY_ENVIRONMENT=staging \
             --image "registry.fly.io/${{ steps.app_name.outputs.value }}-staging:${{ github.sha }}" \
             --app ${{ steps.app_name.outputs.value }}-staging
         env:
@@ -224,6 +225,18 @@ jobs:
         if: ${{ github.ref == 'refs/heads/main' }}
         run: |
           flyctl deploy \
+            --env SENTRY_ENVIRONMENT=production \
             --image "registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.sha }}"
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: Create Sentry release
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          # SENTRY_ORG: 'your sentry org id or slug'
+          # SENTRY_PROJECT: 'your sentry project id or slug'
+        if: ${{ env.SENTRY_AUTH_TOKEN }}
+        uses: getsentry/action-release@v3
+        with:
+          environment:
+            ${{ github.ref == 'refs/heads/main' && 'production' || 'staging' }}

app/entry.client.tsx

@@ -1,10 +1,44 @@
+import * as Sentry from '@sentry/react-router'
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { HydratedRouter } from 'react-router/dom'
 
-if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	void import('./utils/monitoring.client.tsx').then(({ init }) => init())
-}
+Sentry.init({
+	// Sentry will only send requests if SENTRY_DSN is defined
+	dsn: ENV.MODE === 'production' ? ENV.SENTRY_DSN : undefined,
+	// See https://spotlightjs.com/ for how to install the Spotlight Desktop app for local development
+	spotlight: ENV.MODE === 'development',
+	environment: ENV.MODE,
+	beforeSend(event) {
+		if (event.request?.url) {
+			const url = new URL(event.request.url)
+			if (
+				url.protocol === 'chrome-extension:' ||
+				url.protocol === 'moz-extension:'
+			) {
+				// This error is from a browser extension, ignore it
+				return null
+			}
+		}
+		return event
+	},
+	integrations: [
+		Sentry.reactRouterTracingIntegration(),
+		Sentry.replayIntegration(),
+	],
+
+	// 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,
+
+	enableLogs: true,
+})
 
 startTransition(() => {
 	hydrateRoot(document, <HydratedRouter />)

app/entry.server.tsx

@@ -1,17 +1,11 @@
 import crypto from 'node:crypto'
 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/react-router'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
-import {
-	ServerRouter,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	type HandleDocumentRequestFunction,
-} from 'react-router'
+import { type HandleDocumentRequestFunction, ServerRouter } from 'react-router'
 import { getEnv, init } from './utils/env.server.ts'
 import { getInstanceInfo } from './utils/litefs.server.ts'
 import { NonceProvider } from './utils/nonce-provider.ts'
@@ -26,7 +20,7 @@ const MODE = process.env.NODE_ENV ?? 'development'
 
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
-export default async function handleRequest(...args: DocRequestArgs) {
+async function handleRequest(...args: DocRequestArgs) {
 	const [request, responseStatusCode, responseHeaders, reactRouterContext] =
 		args
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
@@ -96,7 +90,8 @@ export default async function handleRequest(...args: DocRequestArgs) {
 							status: didError ? 500 : responseStatusCode,
 						}),
 					)
-					pipe(body)
+					// this enables distributed tracing between client and server!
+					pipe(Sentry.getMetaTagTransformer(body))
 				},
 				onShellError: (err: unknown) => {
 					reject(err)
@@ -122,21 +117,6 @@ export async function handleDataRequest(response: Response) {
 	return response
 }
 
-export function handleError(
-	error: unknown,
-	{ request }: LoaderFunctionArgs | ActionFunctionArgs,
-): void {
-	// Skip capturing if the request is aborted as Remix docs suggest
-	// Ref: https://remix.run/docs/en/main/file-conventions/entry.server#handleerror
-	if (request.signal.aborted) {
-		return
-	}
-
-	if (error instanceof Error) {
-		console.error(styleText('red', String(error.stack)))
-	} else {
-		console.error(error)
-	}
+export const handleError = Sentry.createSentryHandleError({ logErrors: true })
 
-	Sentry.captureException(error)
-}
+export default Sentry.wrapSentryHandleRequest(handleRequest)

app/utils/monitoring.client.tsx

@@ -0,0 +1,44 @@
+import { nodeProfilingIntegration } from '@sentry/profiling-node'
+import * as Sentry from '@sentry/react-router'
+
+Sentry.init({
+	release: process.env.COMMIT_SHA,
+	// Sentry will only send requests if the dsn is defined
+	dsn:
+		process.env.NODE_ENV === 'production' ? process.env.SENTRY_DSN : undefined,
+	// See https://spotlightjs.com/ for how to install the Spotlight Desktop app for local development
+	spotlight: process.env.NODE_ENV === 'development',
+	environment: process.env.SENTRY_ENVIRONMENT,
+	denyUrls: [
+		/\/resources\/healthcheck/,
+		/\/favicons\//,
+		/\/img\//,
+		/\/fonts\//,
+		/\/favicon.ico/,
+		/\/site\.webmanifest/,
+	],
+	integrations: [
+		Sentry.prismaIntegration(),
+		Sentry.httpIntegration(),
+		nodeProfilingIntegration(),
+		Sentry.consoleLoggingIntegration(),
+	],
+	tracesSampler(samplingContext) {
+		// ignore healthcheck transactions by other services (consul, etc.)
+		if (samplingContext.request?.url?.includes('/resources/healthcheck')) {
+			return 0
+		}
+		return 1
+	},
+	beforeSendTransaction(event) {
+		// ignore all healthcheck related transactions
+		//  note that name of header here is case-sensitive
+		if (event.request?.headers?.['x-healthcheck'] === 'true') {
+			return null
+		}
+
+		return event
+	},
+	// Enable logs to be sent to Sentry
+	enableLogs: true,
+})