Add pattern parameter to loader/action args for o11y

Author: brophdawg11

packages/react-router/__tests__/router/fetchers-test.ts

@@ -373,6 +373,7 @@ describe("fetchers", () => {
         request: new Request("http://localhost/foo", {
           signal: A.loaders.root.stub.mock.calls[0][0].request.signal,
         }),
+        pattern: expect.any(String),
         context: {},
       });
     });
@@ -3373,6 +3374,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3402,6 +3404,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3429,6 +3432,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3456,6 +3460,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3484,6 +3489,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3514,6 +3520,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -3543,6 +3550,7 @@ describe("fetchers", () => {
       expect(F.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 

packages/react-router/__tests__/router/router-test.ts

@@ -1503,6 +1503,7 @@ describe("a router", () => {
         request: new Request("http://localhost/tasks", {
           signal: nav.loaders.tasks.stub.mock.calls[0][0].request.signal,
         }),
+        pattern: "/tasks",
         context: {},
       });
 
@@ -1512,6 +1513,7 @@ describe("a router", () => {
         request: new Request("http://localhost/tasks/1", {
           signal: nav2.loaders.tasksId.stub.mock.calls[0][0].request.signal,
         }),
+        pattern: "/tasks/:id",
         context: {},
       });
 
@@ -1521,6 +1523,7 @@ describe("a router", () => {
         request: new Request("http://localhost/tasks?foo=bar", {
           signal: nav3.loaders.tasks.stub.mock.calls[0][0].request.signal,
         }),
+        pattern: "/tasks",
         context: {},
       });
 
@@ -1532,6 +1535,7 @@ describe("a router", () => {
         request: new Request("http://localhost/tasks?foo=bar", {
           signal: nav4.loaders.tasks.stub.mock.calls[0][0].request.signal,
         }),
+        pattern: "/tasks",
         context: {},
       });
 
@@ -1930,6 +1934,7 @@ describe("a router", () => {
       expect(nav.actions.tasks.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: "/tasks",
         context: {},
       });
 
@@ -1974,6 +1979,7 @@ describe("a router", () => {
       expect(nav.actions.tasks.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
       // Assert request internals, cannot do a deep comparison above since some
@@ -2007,6 +2013,7 @@ describe("a router", () => {
       expect(nav.actions.tasks.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 

packages/react-router/__tests__/router/submission-test.ts

@@ -948,6 +948,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -982,6 +983,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -1014,6 +1016,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -1118,6 +1121,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -1156,6 +1160,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 
@@ -1191,6 +1196,7 @@ describe("submissions", () => {
       expect(nav.actions.root.stub).toHaveBeenCalledWith({
         params: {},
         request: expect.any(Request),
+        pattern: expect.any(String),
         context: {},
       });
 

packages/react-router/lib/dom/ssr/routes.tsx

@@ -340,7 +340,7 @@ export function createClientRoutes(
         (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
 
       dataRoute.loader = async (
-        { request, params, context }: LoaderFunctionArgs,
+        { request, params, context, pattern }: LoaderFunctionArgs,
         singleFetch?: unknown,
       ) => {
         try {
@@ -358,6 +358,7 @@ export function createClientRoutes(
               request,
               params,
               context,
+              pattern,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route);
 
@@ -393,7 +394,7 @@ export function createClientRoutes(
       );
 
       dataRoute.action = (
-        { request, params, context }: ActionFunctionArgs,
+        { request, params, context, pattern }: ActionFunctionArgs,
         singleFetch?: unknown,
       ) => {
         return prefetchStylesAndCallHandler(async () => {
@@ -412,6 +413,7 @@ export function createClientRoutes(
             request,
             params,
             context,
+            pattern,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route);
               return fetchServerAction(singleFetch);

packages/react-router/lib/router/router.ts

@@ -57,6 +57,7 @@ import {
   resolveTo,
   stripBasename,
   RouterContextProvider,
+  getRoutePattern,
 } from "./utils";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -3679,6 +3680,7 @@ export function createStaticHandler(
         let response = await runServerMiddlewarePipeline(
           {
             request,
+            pattern: getRoutePattern(matches.map((m) => m.route.path)),
             matches,
             params: matches[0].params,
             // If we're calling middleware then it must be enabled so we can cast
@@ -3910,6 +3912,7 @@ export function createStaticHandler(
       let response = await runServerMiddlewarePipeline(
         {
           request,
+          pattern: getRoutePattern(matches.map((m) => m.route.path)),
           matches,
           params: matches[0].params,
           // If we're calling middleware then it must be enabled so we can cast
@@ -4308,6 +4311,7 @@ export function createStaticHandler(
             mapRouteProperties,
             manifest,
             request,
+            getRoutePattern(matches.map((m) => m.route.path)),
             match,
             [],
             requestContext,
@@ -4319,6 +4323,7 @@ export function createStaticHandler(
           mapRouteProperties,
           manifest,
           request,
+          getRoutePattern(matches.map((m) => m.route.path)),
           match,
           [],
           requestContext,
@@ -4806,6 +4811,7 @@ function getMatchesToLoad(
         mapRouteProperties,
         manifest,
         request,
+        getRoutePattern(matches.map((m) => m.route.path)),
         match,
         lazyRoutePropertiesToSkip,
         scopedContext,
@@ -4835,6 +4841,7 @@ function getMatchesToLoad(
       mapRouteProperties,
       manifest,
       request,
+      getRoutePattern(matches.map((m) => m.route.path)),
       match,
       lazyRoutePropertiesToSkip,
       scopedContext,
@@ -5602,7 +5609,12 @@ async function runMiddlewarePipeline<Result>(
   ) as [string, MiddlewareFunction<Result>][];
 
   let result = await callRouteMiddleware(
-    { request, params, context },
+    {
+      request,
+      params,
+      context,
+      pattern: getRoutePattern(matches.map((m) => m.route.path)),
+    },
     tuples,
     handler,
     processResult,
@@ -5724,6 +5736,7 @@ function getDataStrategyMatch(
   mapRouteProperties: MapRoutePropertiesFunction,
   manifest: RouteManifest,
   request: Request,
+  pattern: string,
   match: DataRouteMatch,
   lazyRoutePropertiesToSkip: string[],
   scopedContext: unknown,
@@ -5772,6 +5785,7 @@ function getDataStrategyMatch(
       ) {
         return callLoaderOrAction({
           request,
+          pattern,
           match,
           lazyHandlerPromise: _lazyPromises?.handler,
           lazyRoutePromise: _lazyPromises?.route,
@@ -5818,6 +5832,7 @@ function getTargetedDataStrategyMatches(
       mapRouteProperties,
       manifest,
       request,
+      getRoutePattern(matches.map((m) => m.route.path)),
       match,
       lazyRoutePropertiesToSkip,
       scopedContext,
@@ -5845,6 +5860,7 @@ async function callDataStrategyImpl(
   // back out below.
   let dataStrategyArgs = {
     request,
+    pattern: getRoutePattern(matches.map((m) => m.route.path)),
     params: matches[0].params,
     context: scopedContext,
     matches,
@@ -5902,13 +5918,15 @@ async function callDataStrategyImpl(
 // Default logic for calling a loader/action is the user has no specified a dataStrategy
 async function callLoaderOrAction({
   request,
+  pattern,
   match,
   lazyHandlerPromise,
   lazyRoutePromise,
   handlerOverride,
   scopedContext,
 }: {
   request: Request;
+  pattern: string;
   match: AgnosticDataRouteMatch;
   lazyHandlerPromise: Promise<void> | undefined;
   lazyRoutePromise: Promise<void> | undefined;
@@ -5942,6 +5960,7 @@ async function callLoaderOrAction({
       return handler(
         {
           request,
+          pattern,
           params: match.params,
           context: scopedContext,
         },

packages/react-router/lib/router/utils.ts

@@ -269,6 +269,11 @@ type DefaultContext = MiddlewareEnabled extends true
 interface DataFunctionArgs<Context> {
   /** A {@link https://developer.mozilla.org/en-US/docs/Web/API/Request Fetch Request instance} which you can use to read headers (like cookies, and {@link https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams URLSearchParams} from the request. */
   request: Request;
+  /**
+   * Matched un-interpolated route pattern for the current path (i.e., /blog/:slug).
+   * Mostly useful as a identifier to aggregate on for logging/tracing/etc.
+   */
+  pattern: string;
   /**
    * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
    * @example
@@ -1995,3 +2000,7 @@ export function isRouteErrorResponse(error: any): error is ErrorResponse {
     "data" in error
   );
 }
+
+export function getRoutePattern(paths: (string | undefined)[]) {
+  return paths.filter(Boolean).join("/").replace(/\/\/*/g, "/");
+}

packages/react-router/lib/server-runtime/build.ts

@@ -58,12 +58,23 @@ export interface HandleDocumentRequestFunction {
 export interface HandleDataRequestFunction {
   (
     response: Response,
-    args: LoaderFunctionArgs | ActionFunctionArgs,
+    args: {
+      request: LoaderFunctionArgs["request"];
+      context: LoaderFunctionArgs["context"];
+      params: LoaderFunctionArgs["params"];
+    },
   ): Promise<Response> | Response;
 }
 
 export interface HandleErrorFunction {
-  (error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
+  (
+    error: unknown,
+    args: {
+      request: LoaderFunctionArgs["request"];
+      context: LoaderFunctionArgs["context"];
+      params: LoaderFunctionArgs["params"];
+    },
+  ): void;
 }
 
 /**

packages/react-router/lib/server-runtime/data.ts

@@ -26,6 +26,7 @@ export async function callRouteHandler(
     request: stripRoutesParam(stripIndexParam(args.request)),
     params: args.params,
     context: args.context,
+    pattern: args.pattern,
   });
 
   // If they returned a redirect via data(), re-throw it as a Response