Link frontend requests to backend traces

[kentcdodds]

Implement request correlation to link frontend and backend errors in Sentry for improved tracing and diagnosis.

[cursor]

Bug: Sentry Scope Update Race Condition

The middleware attempts to set a correlation ID in the Sentry scope using an asynchronous dynamic import and withScope. However, next() is called synchronously without awaiting the completion of this operation. This creates a race condition where the Sentry scope changes are applied after the request has proceeded to downstream handlers, rendering them ineffective for the current request's Sentry scope. Consequently, the correlation ID is not properly associated with the request's Sentry events.

packages/workshop-app/server/index.ts#L198-L215

epicshop/packages/workshop-app/server/index.ts

Lines 198 to 215 in 8c82398

	// 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()
	})

Fix in Cursor • Fix in Web

---

Bug: Sentry Hook Fails to Retrieve Correlation ID

The beforeSend hook incorrectly attempts to retrieve the correlation ID from Sentry.getActiveSpan()?.getAttribute('correlationId'). Correlation IDs are set on the Sentry scope (as tags, extras, or context) elsewhere, not as span attributes, causing this retrieval to always return undefined and preventing the ID from being added to server-side events.

packages/workshop-app/instrument.js#L39-L40

epicshop/packages/workshop-app/instrument.js

Lines 39 to 40 in 8c82398

	// Add correlation ID to server-side events
	const correlationId = Sentry.getActiveSpan()?.getAttribute('correlationId')

Fix in Cursor • Fix in Web

---

Bug: Concurrent Correlation ID Overwrite Bug

Race condition in correlation ID management: The setupRequestCorrelation function generates a new correlation ID for each fetch request and stores it in a shared global variable. Concurrent requests overwrite this variable, causing incorrect correlation IDs to be associated with requests and Sentry events, thus breaking frontend-backend trace correlation.

packages/workshop-app/app/utils/monitoring.client.ts#L46-L66

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

Lines 46 to 66 in 8c82398

	// 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)
	}
	}

Fix in Cursor • Fix in Web

---

BugBot free trial expires on July 22, 2025
Learn more in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎