fix(react-router): Avoid proxying the entire react-router module

Author: Lms24

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -6,4 +6,5 @@ Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   tracesSampleRate: 1.0,
   tunnel: `http://localhost:3031/`, // proxy server
+  // integrations: integs => integs.filter(i => i.name !== 'ReactRouterServer'),
 });

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

@@ -49,63 +49,60 @@ export class ReactRouterInstrumentation extends InstrumentationBase<Instrumentat
   }
 
   /**
-   * Creates a proxy around the React Router module exports that patches the createRequestHandler function.
-   * This allows us to wrap the request handler to add performance monitoring for data loaders and actions.
+   * Creates a proxy around the createRequestHandler function.
+   * This allows us to wrap the request handler to add tracing for data loaders and actions.
    */
   private _createPatchedModuleProxy(moduleExports: ReactRouterModuleExports): ReactRouterModuleExports {
-    return new Proxy(moduleExports, {
-      get(target, prop, receiver) {
-        if (prop === 'createRequestHandler') {
-          const original = target[prop];
-          return function sentryWrappedCreateRequestHandler(this: unknown, ...args: unknown[]) {
-            const originalRequestHandler = original.apply(this, args);
+    if (typeof moduleExports.createRequestHandler === 'function') {
+      moduleExports.createRequestHandler = new Proxy(moduleExports.createRequestHandler, {
+        apply(target, thisArg, originalArgs) {
+          const originalRequestHandler = target.apply(thisArg, originalArgs);
 
-            return async function sentryWrappedRequestHandler(request: Request, initialContext?: unknown) {
-              let url: URL;
-              try {
-                url = new URL(request.url);
-              } catch (error) {
-                return originalRequestHandler(request, initialContext);
-              }
+          return async function sentryWrappedRequestHandler(request: Request, initialContext?: unknown) {
+            let url: URL;
+            try {
+              url = new URL(request.url);
+            } catch (error) {
+              return originalRequestHandler(request, initialContext);
+            }
 
-              // We currently just want to trace loaders and actions
-              if (!isDataRequest(url.pathname)) {
-                return originalRequestHandler(request, initialContext);
-              }
+            // We currently just want to trace loaders and actions
+            if (!isDataRequest(url.pathname)) {
+              return originalRequestHandler(request, initialContext);
+            }
 
-              const activeSpan = getActiveSpan();
-              const rootSpan = activeSpan && getRootSpan(activeSpan);
+            const activeSpan = getActiveSpan();
+            const rootSpan = activeSpan && getRootSpan(activeSpan);
 
-              if (!rootSpan) {
-                DEBUG_BUILD && logger.debug('No active root span found, skipping tracing for data request');
-                return originalRequestHandler(request, initialContext);
-              }
+            if (!rootSpan) {
+              DEBUG_BUILD && logger.debug('No active root span found, skipping tracing for data request');
+              return originalRequestHandler(request, initialContext);
+            }
 
-              // Set the source and overwrite attributes on the root span to ensure the transaction name
-              // is derived from the raw URL pathname rather than any parameterized route that may be set later
-              // TODO: try to set derived parameterized route from build here (args[0])
-              rootSpan.setAttributes({
-                [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
-                [SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE]: `${request.method} ${url.pathname}`,
-              });
+            // Set the source and overwrite attributes on the root span to ensure the transaction name
+            // is derived from the raw URL pathname rather than any parameterized route that may be set later
+            // TODO: try to set derived parameterized route from build here (args[0])
+            rootSpan.setAttributes({
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+              [SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE]: `${request.method} ${url.pathname}`,
+            });
 
-              return startSpan(
-                {
-                  name: getSpanName(url.pathname, request.method),
-                  attributes: {
-                    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.react-router',
-                    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: getOpName(url.pathname, request.method),
-                  },
+            return startSpan(
+              {
+                name: getSpanName(url.pathname, request.method),
+                attributes: {
+                  [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.react-router',
+                  [SEMANTIC_ATTRIBUTE_SENTRY_OP]: getOpName(url.pathname, request.method),
                 },
-                () => {
-                  return originalRequestHandler(request, initialContext);
-                },
-              );
-            };
+              },
+              () => {
+                return originalRequestHandler(request, initialContext);
+              },
+            );
           };
-        }
-        return Reflect.get(target, prop, receiver);
-      },
-    });
+        },
+      });
+    }
+    return moduleExports;
   }
 }