update data request tx

Author: chargome

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -15,5 +15,6 @@ export default [
     route('ssr', 'routes/performance/ssr.tsx'),
     route('with/:param', 'routes/performance/dynamic-param.tsx'),
     route('static', 'routes/performance/static.tsx'),
+    route('server-loader', 'routes/performance/server-loader.tsx'),
   ]),
 ] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -1,5 +1,10 @@
 import type { Route } from './+types/dynamic-param';
 
+export async function loader() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return { data: 'burritos' };
+}
+
 export default function DynamicParamPage({ params }: Route.ComponentProps) {
   const { param } = params;
 

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -7,6 +7,7 @@ export default function PerformancePage() {
       <nav>
         <Link to="/performance/ssr">SSR Page</Link>
         <Link to="/performance/with/sentry">With Param Page</Link>
+        <Link to="/performance/server-loader">Server Loader</Link>
       </nav>
     </div>
   );

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export async function loader() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return { data: 'burritos' };
+}
+
+export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
+  const { data } = loaderData;
+  return (
+    <div>
+      <h1>Server Loader Page</h1>
+      <div>{data}</div>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/performance.server.test.ts

@@ -104,4 +104,32 @@ test.describe('servery - performance', () => {
       },
     });
   });
+
+  test('should automatically instrument server loader', async ({ page }) => {
+    const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === 'GET /performance/server-loader.data';
+    });
+
+    await page.goto(`/performance`); // initial ssr pageloads do not contain .data requests
+    await page.waitForTimeout(500); // quick breather before navigation
+    await page.getByRole('link', { name: 'Server Loader' }).click(); // this will actually trigger a .data request
+
+    const transaction = await txPromise;
+
+    expect(transaction?.spans?.[transaction.spans?.length - 1]).toMatchObject({
+      span_id: expect.any(String),
+      trace_id: expect.any(String),
+      data: {
+        'sentry.origin': 'auto.http.react-router',
+        'sentry.op': 'function.react-router.loader',
+      },
+      description: 'Executing Server Loader',
+      parent_span_id: expect.any(String),
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+      status: 'ok',
+      op: 'function.react-router.loader',
+      origin: 'auto.http.react-router',
+    });
+  });
 });

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

@@ -12,7 +12,7 @@ import {
 } from '@sentry/core';
 import type * as reactRouter from 'react-router';
 import { DEBUG_BUILD } from '../../common/debug-build';
-import { getOpName, getSpanName, isDataRequest } from './util';
+import { getOpName, getSpanName, isDataRequest, SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE } from './util';
 
 type ReactRouterModuleExports = typeof reactRouter;
 
@@ -81,15 +81,20 @@ export class ReactRouterInstrumentation extends InstrumentationBase<Instrumentat
                 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}`,
+              });
+
               return startSpan(
                 {
                   name: getSpanName(url.pathname, request.method),
                   attributes: {
-                    [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
                     [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.react-router',
                     [SEMANTIC_ATTRIBUTE_SENTRY_OP]: getOpName(url.pathname, request.method),
-                    url: url.pathname,
-                    method: request.method,
                   },
                 },
                 () => {

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

@@ -49,3 +49,5 @@ export function isActionRequest(pathname: string, requestMethod: string): boolea
 export function isDataRequest(pathname: string): boolean {
   return pathname.endsWith('.data');
 }
+
+export const SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE = 'sentry.overwrite-route';

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

@@ -1,8 +1,10 @@
-import type { Integration } from '@sentry/core';
-import { applySdkMetadata, logger, setTag } from '@sentry/core';
+import { ATTR_HTTP_ROUTE } from '@opentelemetry/semantic-conventions';
+import type { EventProcessor, Integration } from '@sentry/core';
+import { applySdkMetadata, getGlobalScope, logger, setTag } from '@sentry/core';
 import type { NodeClient, NodeOptions } from '@sentry/node';
 import { getDefaultIntegrations, init as initNodeSdk } from '@sentry/node';
 import { DEBUG_BUILD } from '../common/debug-build';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE } from './instrumentation/util';
 import { reactRouterServerIntegration } from './integration/reactRouterServer';
 
 /**
@@ -22,6 +24,30 @@ export function init(options: NodeOptions): NodeClient | undefined {
 
   setTag('runtime', 'node');
 
+  // Overwrite the transaction name for instrumented data loaders because the trace data gets overwritten at a later point.
+  // We only update the tx in case SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE got set in our instrumentation before.
+  getGlobalScope().addEventProcessor(
+    Object.assign(
+      (event => {
+        const overwrite = event.contexts?.trace?.data?.[SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE];
+        if (
+          event.type === 'transaction' &&
+          event.transaction === 'GET *' &&
+          event.contexts?.trace?.data?.[ATTR_HTTP_ROUTE] === '*' &&
+          overwrite
+        ) {
+          event.transaction = overwrite;
+          delete event.contexts?.trace?.data?.[SEMANTIC_ATTRIBUTE_SENTRY_OVERWRITE];
+          event.contexts.trace.data[ATTR_HTTP_ROUTE] = 'url';
+          return event;
+        } else {
+          return event;
+        }
+      }) satisfies EventProcessor,
+      { id: 'ReactRouterTransactionEnhancer' },
+    ),
+  );
+
   DEBUG_BUILD && logger.log('SDK successfully initialized');
   return client;
 }

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

@@ -1,7 +1,13 @@
 import { context } from '@opentelemetry/api';
 import { getRPCMetadata, RPCType } from '@opentelemetry/core';
 import { ATTR_HTTP_ROUTE } from '@opentelemetry/semantic-conventions';
-import { getActiveSpan, getRootSpan, getTraceMetaTags, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import {
+  getActiveSpan,
+  getRootSpan,
+  getTraceMetaTags,
+  SEMANTIC_ATTRIBUTE_SENTRY_CUSTOM_SPAN_NAME,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+} from '@sentry/core';
 import type { AppLoadContext, EntryContext } from 'react-router';
 import type { PassThrough } from 'stream';
 import { Transform } from 'stream';
@@ -30,6 +36,7 @@ export function wrapSentryHandleRequest(originalHandle: OriginalHandleRequest):
   ) {
     const parameterizedPath =
       routerContext?.staticHandlerContext?.matches?.[routerContext.staticHandlerContext.matches.length - 1]?.route.path;
+
     if (parameterizedPath) {
       const activeSpan = getActiveSpan();
       if (activeSpan) {
@@ -38,6 +45,7 @@ export function wrapSentryHandleRequest(originalHandle: OriginalHandleRequest):
 
         // The express instrumentation writes on the rpcMetadata and that ends up stomping on the `http.route` attribute.
         const rpcMetadata = getRPCMetadata(context.active());
+
         if (rpcMetadata?.type === RPCType.HTTP) {
           rpcMetadata.route = routeName;
         }
@@ -46,6 +54,7 @@ export function wrapSentryHandleRequest(originalHandle: OriginalHandleRequest):
         rootSpan.setAttributes({
           [ATTR_HTTP_ROUTE]: routeName,
           [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+          [SEMANTIC_ATTRIBUTE_SENTRY_CUSTOM_SPAN_NAME]: `${request.method} ${routeName}`,
         });
       }
     }