feat(react-router): Ensure http.server route handling is consistent

[mydea]

This updates react router http.server handling to ensure:

• That we always have a correct route/url source
• Streamlines how we get rid of the weird * transaction name by just using processEvent in the integration. This means we now always add the server integration, it just does less in non-matching node versions.
• Ensure we always have a good span origin
• Ensure the name of the spans is consistent with the target (e.g. containing the .data suffix) - we can revisit this later but for now this is consistent I'd say.

[chargome]

Don't we also need to update the tx name here?

[mydea]

this is done already in the respective place via updateSpanName, that forces a name over infernal. All we need to do here is remove the route attribute, as that can be misleading in product I think. (E2E tests should show this works xD)

[cursor]

Bug: Undefined Data Access Causes Fallback Failure

A TypeError can occur when accessing spanData.data[SEMATTRS_HTTP_TARGET] if spanData.data is undefined. This prevents the intended fallback (e.g., url.pathname) from being evaluated.

packages/react-router/src/server/wrapServerAction.ts#L47-L48

sentry-javascript/packages/react-router/src/server/wrapServerAction.ts

Lines 47 to 48 in ef814f8

	// eslint-disable-next-line deprecation/deprecation
	const target = spanData.data[SEMATTRS_HTTP_TARGET];

packages/react-router/src/server/wrapServerLoader.ts#L48-L49

sentry-javascript/packages/react-router/src/server/wrapServerLoader.ts

Lines 48 to 49 in ef814f8

	// eslint-disable-next-line deprecation/deprecation
	const target = spanData.data[SEMATTRS_HTTP_TARGET];

packages/react-router/src/server/instrumentation/reactRouter.ts#L91-L92

sentry-javascript/packages/react-router/src/server/instrumentation/reactRouter.ts

Lines 91 to 92 in ef814f8

	// eslint-disable-next-line deprecation/deprecation
	const target = spanData.data[SEMATTRS_HTTP_TARGET] || url.pathname;

Fix in Cursor • Fix in Web

---

Bug: Route Handling Bug in React Router Integration

The processEvent method in reactRouterServerIntegration incorrectly handles bogus * routes. It only removes the http.route attribute when the transaction name is not "GET *" or "POST *", failing to address cases where the transaction name remains "GET *" or "POST *". This leaves transactions with unhelpful * names and http.route attributes, contradicting the intended goal of removing them and missing a case previously handled by older logic that updated the transaction name.

packages/react-router/src/server/integration/reactRouterServer.ts#L32-L49

sentry-javascript/packages/react-router/src/server/integration/reactRouterServer.ts

Lines 32 to 49 in ef814f8

	},
	processEvent(event) {
	// Express generates bogus `*` routes for data loaders, which we want to remove here
	// we cannot do this earlier because some OTEL instrumentation adds this at some unexpected point
	if (
	event.type === 'transaction' &&
	event.contexts?.trace?.data &&
	event.contexts.trace.data[ATTR_HTTP_ROUTE] === '*' &&
	// This means the name has been adjusted before, but the http.route remains, so we need to remove it
	event.transaction !== 'GET *' &&
	event.transaction !== 'POST *'
	) {
	// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
	delete event.contexts.trace.data[ATTR_HTTP_ROUTE];
	}
	return event;
	},

Fix in Cursor • Fix in Web

---

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

[chargome]

🚀