feat(remix): Add route ID to remix routes (#5568)

Author: AbhiPrasad

packages/remix/src/utils/instrumentServer.ts

@@ -203,7 +203,7 @@ function makeWrappedDocumentRequestFunction(
   };
 }
 
-function makeWrappedDataFunction(origFn: DataFunction, name: 'action' | 'loader'): DataFunction {
+function makeWrappedDataFunction(origFn: DataFunction, id: string, name: 'action' | 'loader'): DataFunction {
   return async function (this: unknown, args: DataFunctionArgs): Promise<Response | AppData> {
     let res: Response | AppData;
     const activeTransaction = getActiveTransaction();
@@ -216,8 +216,7 @@ function makeWrappedDataFunction(origFn: DataFunction, name: 'action' | 'loader'
     try {
       const span = activeTransaction.startChild({
         op: `remix.server.${name}`,
-        // TODO: Consider using the `id` of the route this function belongs to
-        description: activeTransaction.name,
+        description: id,
         tags: {
           name,
         },
@@ -241,13 +240,17 @@ function makeWrappedDataFunction(origFn: DataFunction, name: 'action' | 'loader'
   };
 }
 
-function makeWrappedAction(origAction: DataFunction): DataFunction {
-  return makeWrappedDataFunction(origAction, 'action');
-}
+const makeWrappedAction =
+  (id: string) =>
+  (origAction: DataFunction): DataFunction => {
+    return makeWrappedDataFunction(origAction, id, 'action');
+  };
 
-function makeWrappedLoader(origLoader: DataFunction): DataFunction {
-  return makeWrappedDataFunction(origLoader, 'loader');
-}
+const makeWrappedLoader =
+  (id: string) =>
+  (origLoader: DataFunction): DataFunction => {
+    return makeWrappedDataFunction(origLoader, id, 'loader');
+  };
 
 function getTraceAndBaggage(): { sentryTrace?: string; sentryBaggage?: string } {
   const transaction = getActiveTransaction();
@@ -427,11 +430,11 @@ function makeWrappedCreateRequestHandler(
       const wrappedRoute = { ...route, module: { ...route.module } };
 
       if (wrappedRoute.module.action) {
-        fill(wrappedRoute.module, 'action', makeWrappedAction);
+        fill(wrappedRoute.module, 'action', makeWrappedAction(id));
       }
 
       if (wrappedRoute.module.loader) {
-        fill(wrappedRoute.module, 'loader', makeWrappedLoader);
+        fill(wrappedRoute.module, 'loader', makeWrappedLoader(id));
       }
 
       // Entry module should have a loader function to provide `sentry-trace` and `baggage`

packages/remix/test/integration/test/server/action.test.ts

@@ -22,11 +22,8 @@ describe('Remix API Actions', () => {
           description: 'routes/action-json-response/$id',
           op: 'remix.server.action',
         },
-        // TODO: These two spans look exactly the same, but they are not.
-        // One is from the parent route, and the other is from the route we are reaching.
-        // We need to pass the names of the routes as their descriptions while wrapping loaders and actions.
         {
-          description: 'routes/action-json-response/$id',
+          description: 'root',
           op: 'remix.server.loader',
         },
         {

packages/remix/test/integration/test/server/loader.test.ts

@@ -58,11 +58,8 @@ describe('Remix API Loaders', () => {
         source: 'route',
       },
       spans: [
-        // TODO: These two spans look exactly the same, but they are not.
-        // One is from the parent route, and the other is from the route we are reaching.
-        // We need to pass the names of the routes as their descriptions while wrapping loaders and actions.
         {
-          description: 'routes/loader-json-response/$id',
+          description: 'root',
           op: 'remix.server.loader',
         },
         {