add sentryHandleRequest

Author: chargome

packages/react-router/package.json

@@ -39,6 +39,7 @@
     "@sentry/core": "9.8.0",
     "@sentry/node": "9.8.0",
     "@sentry/vite-plugin": "^3.2.0",
+    "@opentelemetry/semantic-conventions": "^1.30.0",
     "glob": "11.0.1"
   },
   "devDependencies": {

packages/react-router/src/server/attributes.ts

@@ -0,0 +1 @@
+export const SENTRY_PARAMETERIZED_ROUTE = 'sentry.parameterized_route';

packages/react-router/src/server/index.ts

@@ -1,3 +1,4 @@
 export * from '@sentry/node';
 
 export { init } from './sdk';
+export { sentryHandleRequest } from './sentryHandleRequest';

packages/react-router/src/server/sdk.ts

@@ -1,6 +1,9 @@
-import { applySdkMetadata, setTag } from '@sentry/core';
+import { applySdkMetadata, logger, SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD, setTag } from '@sentry/core';
 import type { NodeClient, NodeOptions } from '@sentry/node';
 import { init as initNodeSdk } from '@sentry/node';
+import { DEBUG_BUILD } from '../common/debug-build';
+import { SENTRY_PARAMETERIZED_ROUTE } from './attributes';
+import { ATTR_HTTP_ROUTE } from '@opentelemetry/semantic-conventions';
 
 /**
  * Initializes the server side of the React Router SDK
@@ -10,11 +13,34 @@ export function init(options: NodeOptions): NodeClient | undefined {
     ...options,
   };
 
+  DEBUG_BUILD && logger.log('Initializing SDK...');
+
   applySdkMetadata(opts, 'react-router', ['react-router', 'node']);
 
   const client = initNodeSdk(opts);
 
   setTag('runtime', 'node');
 
+  client?.on('preprocessEvent', event => {
+    if (event.type === 'transaction' && event.transaction) {
+      // Check if the transaction name matches an HTTP method with a wildcard route (e.g. "GET *")
+      if (event.transaction.match(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|TRACE|CONNECT) \*$/)) {
+        const traceData = event.contexts?.trace?.data;
+        if (traceData) {
+          // Get the parameterized route that was stored earlier by our wrapped handler (e.g. "/users/:id")
+          const paramRoute = traceData[SENTRY_PARAMETERIZED_ROUTE];
+          if (paramRoute) {
+            traceData[ATTR_HTTP_ROUTE] = paramRoute;
+            const method = traceData[SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD] || traceData['http.method'];
+            if (method) {
+              event.transaction = `${method} ${paramRoute}`;
+            }
+          }
+        }
+      }
+    }
+  });
+
+  DEBUG_BUILD && logger.log('SDK successfully initialized');
   return client;
 }

packages/react-router/src/server/sentryHandleRequest.ts

@@ -0,0 +1,38 @@
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { SENTRY_PARAMETERIZED_ROUTE } from './attributes';
+import { getRootSpan, getActiveSpan } from '@sentry/core';
+
+type OriginalHandleRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  loadContext: AppLoadContext,
+) => Promise<unknown>;
+
+/**
+ * Wraps the original handleRequest function to add Sentry instrumentation.
+ *
+ * @param originalHandle - The original handleRequest function to wrap
+ * @returns A wrapped version of the handle request function with Sentry instrumentation
+ */
+export function sentryHandleRequest(originalHandle: OriginalHandleRequest): OriginalHandleRequest {
+  return async function sentryInstrumentedHandleRequest(
+    request: Request,
+    responseStatusCode: number,
+    responseHeaders: Headers,
+    routerContext: EntryContext,
+    loadContext: AppLoadContext,
+  ) {
+    const parameterizedPath =
+      routerContext?.staticHandlerContext?.matches?.[routerContext.staticHandlerContext.matches.length - 1]?.route.path;
+    if (parameterizedPath) {
+      const activeSpan = getActiveSpan();
+      if (activeSpan) {
+        const rootSpan = getRootSpan(activeSpan);
+        rootSpan.setAttribute(SENTRY_PARAMETERIZED_ROUTE, parameterizedPath);
+      }
+    }
+    return originalHandle(request, responseStatusCode, responseHeaders, routerContext, loadContext);
+  };
+}