Add request correlation ID tracking for improved error monitoring

Co-authored-by: me <[email protected]>

Author: cursoragent

packages/workshop-app/app/components/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { captureException } from '@sentry/react-router'
+import { captureException, withScope } from '@sentry/react-router'
 import { useEffect } from 'react'
 import {
 	isRouteErrorResponse,
@@ -7,6 +7,7 @@ import {
 	type ErrorResponse,
 } from 'react-router'
 import { getErrorMessage } from '#app/utils/misc.tsx'
+import { getCorrelationId } from '#app/utils/request-correlation'
 
 type StatusHandler = (info: {
 	error: ErrorResponse
@@ -33,7 +34,21 @@ export function GeneralErrorBoundary({
 	useEffect(() => {
 		if (isResponse) return
 		if (ENV.EPICSHOP_IS_PUBLISHED) {
-			captureException(error)
+			const correlationId = getCorrelationId()
+			if (correlationId) {
+				withScope((scope) => {
+					scope.setTag('correlationId', correlationId)
+					scope.setExtra('correlationId', correlationId)
+					scope.setContext('correlation', {
+						id: correlationId,
+						timestamp: new Date().toISOString(),
+						component: 'ErrorBoundary',
+					})
+					captureException(error)
+				})
+			} else {
+				captureException(error)
+			}
 		}
 	}, [error, isResponse])
 

packages/workshop-app/app/entry.client.tsx

@@ -1,7 +1,8 @@
 import { hydrateRoot } from 'react-dom/client'
 import { HydratedRouter } from 'react-router/dom'
-import { init as initMonitoring } from './utils/monitoring.client'
+import { init as initMonitoring, setupRequestCorrelation } from './utils/monitoring.client'
 
 initMonitoring()
+setupRequestCorrelation()
 
 hydrateRoot(document, <HydratedRouter />)

packages/workshop-app/app/entry.server.tsx

@@ -19,7 +19,23 @@ export function handleError(
 ): void {
 	if (request.signal.aborted) return
 	if (ENV.EPICSHOP_IS_PUBLISHED) {
-		Sentry.captureException(error)
+		// Add correlation ID to error context
+		const correlationId = request.headers.get('x-correlation-id')
+		if (correlationId) {
+			Sentry.withScope((scope) => {
+				scope.setTag('correlationId', correlationId)
+				scope.setExtra('correlationId', correlationId)
+				scope.setContext('correlation', {
+					id: correlationId,
+					timestamp: new Date().toISOString(),
+					url: request.url,
+					method: request.method,
+				})
+				Sentry.captureException(error)
+			})
+		} else {
+			Sentry.captureException(error)
+		}
 	}
 }
 

packages/workshop-app/app/utils/monitoring.client.ts

@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/react-router'
+import { generateCorrelationId, setCorrelationId, getCorrelationId, CORRELATION_ID_HEADER } from './request-correlation'
 
 export function init() {
 	if (!ENV.EPICSHOP_IS_PUBLISHED) return
@@ -16,6 +17,20 @@ export function init() {
 					return null
 				}
 			}
+			
+			// Add correlation ID to event context
+			const correlationId = getCorrelationId()
+			if (correlationId) {
+				event.extra = {
+					...event.extra,
+					correlationId,
+				}
+				event.tags = {
+					...event.tags,
+					correlationId,
+				}
+			}
+			
 			return event
 		},
 		integrations: [
@@ -27,3 +42,25 @@ export function init() {
 		replaysOnErrorSampleRate: 1.0,
 	})
 }
+
+// Set up request correlation for React Router requests
+export function setupRequestCorrelation() {
+	if (!ENV.EPICSHOP_IS_PUBLISHED) return
+	
+	// Intercept React Router requests by patching fetch
+	const originalFetch = window.fetch
+	window.fetch = function(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+		const correlationId = generateCorrelationId()
+		setCorrelationId(correlationId)
+		
+		const headers = new Headers(init?.headers)
+		headers.set(CORRELATION_ID_HEADER, correlationId)
+		
+		const newInit = {
+			...init,
+			headers,
+		}
+		
+		return originalFetch(input, newInit)
+	}
+}

packages/workshop-app/app/utils/request-correlation.ts

@@ -0,0 +1,39 @@
+import { createId } from '@paralleldrive/cuid2'
+
+// Header name for request correlation
+export const CORRELATION_ID_HEADER = 'x-correlation-id'
+
+// Generate a unique correlation ID
+export function generateCorrelationId(): string {
+	return createId()
+}
+
+// Store correlation ID in context (client-side)
+let currentCorrelationId: string | null = null
+
+export function setCorrelationId(id: string): void {
+	currentCorrelationId = id
+}
+
+export function getCorrelationId(): string | null {
+	return currentCorrelationId
+}
+
+export function clearCorrelationId(): void {
+	currentCorrelationId = null
+}
+
+// Context for storing correlation ID during request processing (server-side)
+export const requestCorrelationContext = new Map<string, string>()
+
+export function setRequestCorrelationId(requestId: string, correlationId: string): void {
+	requestCorrelationContext.set(requestId, correlationId)
+}
+
+export function getRequestCorrelationId(requestId: string): string | null {
+	return requestCorrelationContext.get(requestId) || null
+}
+
+export function clearRequestCorrelationId(requestId: string): void {
+	requestCorrelationContext.delete(requestId)
+}

packages/workshop-app/instrument.js

@@ -13,7 +13,16 @@ Sentry.init({
 		/\/favicon.ico/,
 		/\/site\.webmanifest/,
 	],
-	integrations: [Sentry.httpIntegration(), nodeProfilingIntegration()],
+	integrations: [
+		Sentry.httpIntegration(),
+		nodeProfilingIntegration(),
+		{
+			name: 'CorrelationIdIntegration',
+			setupOnce() {
+				// This will be used to add correlation IDs to all events
+			},
+		},
+	],
 	tracesSampler(samplingContext) {
 		if (samplingContext.request?.url?.includes('/resources/healthcheck')) {
 			return 0
@@ -26,4 +35,19 @@ Sentry.init({
 		}
 		return event
 	},
+	beforeSend(event) {
+		// Add correlation ID to server-side events
+		const correlationId = Sentry.getActiveSpan()?.getAttribute('correlationId')
+		if (correlationId) {
+			event.extra = {
+				...event.extra,
+				correlationId,
+			}
+			event.tags = {
+				...event.tags,
+				correlationId,
+			}
+		}
+		return event
+	},
 })

packages/workshop-app/server/index.ts

@@ -195,6 +195,25 @@ if (!ENV.EPICSHOP_DEPLOYED) {
 	})
 }
 
+// Add correlation ID middleware before React Router handler
+app.use((req, res, next) => {
+	const correlationId = req.headers['x-correlation-id'] as string
+	if (correlationId && ENV.EPICSHOP_IS_PUBLISHED) {
+		// Add correlation ID to current Sentry scope
+		import('@sentry/react-router').then(({ withScope }) => {
+			withScope((scope) => {
+				scope.setTag('correlationId', correlationId)
+				scope.setExtra('correlationId', correlationId)
+				scope.setContext('correlation', {
+					id: correlationId,
+					timestamp: new Date().toISOString(),
+				})
+			})
+		})
+	}
+	next()
+})
+
 app.all(
 	'*splat',
 	createRequestHandler({