Add instrumentRoute APIs for server side

Author: brophdawg11

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

@@ -1,4 +1,4 @@
-import type { DataRouteMatch, RouteObject } from "../context";
+import type { DataRouteMatch, DataRouteObject, RouteObject } from "../context";
 import type { History, Location, Path, To } from "./history";
 import {
   Action as NavigationType,
@@ -3538,6 +3538,9 @@ export function createRouter(init: RouterInit): Router {
 export interface CreateStaticHandlerOptions {
   basename?: string;
   mapRouteProperties?: MapRoutePropertiesFunction;
+  unstable_instrumentRoute?: (
+    r: AgnosticDataRouteObject,
+  ) => AgnosticDataRouteObject;
   future?: {};
 }
 
@@ -3552,8 +3555,24 @@ export function createStaticHandler(
 
   let manifest: RouteManifest = {};
   let basename = (opts ? opts.basename : null) || "/";
-  let mapRouteProperties =
+  let _mapRouteProperties =
     opts?.mapRouteProperties || defaultMapRouteProperties;
+  let mapRouteProperties = _mapRouteProperties;
+
+  // Leverage the existing mapRouteProperties logic to execute instrumentRoute
+  // (if it exists) on all routes in the application
+  if (opts?.unstable_instrumentRoute) {
+    let instrument = opts?.unstable_instrumentRoute;
+    // TODO: Clean up these types
+    mapRouteProperties = (r: AgnosticRouteObject) => {
+      return instrument({
+        ...r,
+        ..._mapRouteProperties(r),
+      } as AgnosticDataRouteObject) as AgnosticDataRouteObject & {
+        hasErrorBoundary: boolean;
+      };
+    };
+  }
 
   let dataRoutes = convertRoutesToDataRoutes(
     routes,

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

@@ -1,5 +1,6 @@
 import type {
   ActionFunctionArgs,
+  AgnosticDataRouteObject,
   LoaderFunctionArgs,
   RouterContextProvider,
 } from "../router/utils";
@@ -12,6 +13,7 @@ import type {
 import type { ServerRouteManifest } from "./routes";
 import type { AppLoadContext } from "./data";
 import type { MiddlewareEnabled } from "../types/future";
+import type { RequestHandler } from "./server";
 
 type OptionalCriticalCss = CriticalCss | undefined;
 
@@ -59,9 +61,9 @@ export interface HandleDataRequestFunction {
   (
     response: Response,
     args: {
-      request: LoaderFunctionArgs["request"];
-      context: LoaderFunctionArgs["context"];
-      params: LoaderFunctionArgs["params"];
+      request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
+      context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
+      params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
     },
   ): Promise<Response> | Response;
 }
@@ -70,9 +72,9 @@ export interface HandleErrorFunction {
   (
     error: unknown,
     args: {
-      request: LoaderFunctionArgs["request"];
-      context: LoaderFunctionArgs["context"];
-      params: LoaderFunctionArgs["params"];
+      request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
+      context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
+      params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
     },
   ): void;
 }
@@ -85,5 +87,9 @@ export interface ServerEntryModule {
   default: HandleDocumentRequestFunction;
   handleDataRequest?: HandleDataRequestFunction;
   handleError?: HandleErrorFunction;
+  unstable_instrumentHandler?: (handler: RequestHandler) => RequestHandler;
+  unstable_instrumentRoute?: (
+    route: AgnosticDataRouteObject,
+  ) => AgnosticDataRouteObject;
   streamTimeout?: number;
 }

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

@@ -55,6 +55,7 @@ function derive(build: ServerBuild, mode?: string) {
   let serverMode = isServerMode(mode) ? mode : ServerMode.Production;
   let staticHandler = createStaticHandler(dataRoutes, {
     basename: build.basename,
+    unstable_instrumentRoute: build.entry.module.unstable_instrumentRoute,
   });
 
   let errorHandler =
@@ -67,42 +68,8 @@ function derive(build: ServerBuild, mode?: string) {
         );
       }
     });
-  return {
-    routes,
-    dataRoutes,
-    serverMode,
-    staticHandler,
-    errorHandler,
-  };
-}
-
-export const createRequestHandler: CreateRequestHandlerFunction = (
-  build,
-  mode,
-) => {
-  let _build: ServerBuild;
-  let routes: ServerRoute[];
-  let serverMode: ServerMode;
-  let staticHandler: StaticHandler;
-  let errorHandler: HandleErrorFunction;
-
-  return async function requestHandler(request, initialContext) {
-    _build = typeof build === "function" ? await build() : build;
-
-    if (typeof build === "function") {
-      let derived = derive(_build, mode);
-      routes = derived.routes;
-      serverMode = derived.serverMode;
-      staticHandler = derived.staticHandler;
-      errorHandler = derived.errorHandler;
-    } else if (!routes || !serverMode || !staticHandler || !errorHandler) {
-      let derived = derive(_build, mode);
-      routes = derived.routes;
-      serverMode = derived.serverMode;
-      staticHandler = derived.staticHandler;
-      errorHandler = derived.errorHandler;
-    }
 
+  let requestHandler: RequestHandler = async (request, initialContext) => {
     let params: RouteMatch<ServerRoute>["params"] = {};
     let loadContext: AppLoadContext | RouterContextProvider;
 
@@ -118,7 +85,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       });
     };
 
-    if (_build.future.v8_middleware) {
+    if (build.future.v8_middleware) {
       if (
         initialContext &&
         !(initialContext instanceof RouterContextProvider)
@@ -138,7 +105,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
     let url = new URL(request.url);
 
-    let normalizedBasename = _build.basename || "/";
+    let normalizedBasename = build.basename || "/";
     let normalizedPath = url.pathname;
     if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
       normalizedPath = normalizedBasename;
@@ -158,7 +125,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
     // When runtime SSR is disabled, make our dev server behave like the deployed
     // pre-rendered site would
-    if (!_build.ssr) {
+    if (!build.ssr) {
       // Decode the URL path before checking against the prerender config
       let decodedPath = decodeURI(normalizedPath);
 
@@ -188,12 +155,12 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
       // When SSR is disabled this, file can only ever run during dev because we
       // delete the server build at the end of the build
-      if (_build.prerender.length === 0) {
+      if (build.prerender.length === 0) {
         // ssr:false and no prerender config indicates "SPA Mode"
         isSpaMode = true;
       } else if (
-        !_build.prerender.includes(decodedPath) &&
-        !_build.prerender.includes(decodedPath + "/")
+        !build.prerender.includes(decodedPath) &&
+        !build.prerender.includes(decodedPath + "/")
       ) {
         if (url.pathname.endsWith(".data")) {
           // 404 on non-pre-rendered `.data` requests
@@ -222,20 +189,20 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
     // Manifest request for fog of war
     let manifestUrl = getManifestPath(
-      _build.routeDiscovery.manifestPath,
+      build.routeDiscovery.manifestPath,
       normalizedBasename,
     );
     if (url.pathname === manifestUrl) {
       try {
-        let res = await handleManifestRequest(_build, routes, url);
+        let res = await handleManifestRequest(build, routes, url);
         return res;
       } catch (e) {
         handleError(e);
         return new Response("Unknown Server Error", { status: 500 });
       }
     }
 
-    let matches = matchServerRoutes(routes, normalizedPath, _build.basename);
+    let matches = matchServerRoutes(routes, normalizedPath, build.basename);
     if (matches && matches.length > 0) {
       Object.assign(params, matches[0].params);
     }
@@ -248,12 +215,12 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,
-        _build.basename,
+        build.basename,
       );
 
       response = await handleSingleFetchRequest(
         serverMode,
-        _build,
+        build,
         staticHandler,
         request,
         handlerUrl,
@@ -265,13 +232,13 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
         response = generateSingleFetchRedirectResponse(
           response,
           request,
-          _build,
+          build,
           serverMode,
         );
       }
 
-      if (_build.entry.module.handleDataRequest) {
-        response = await _build.entry.module.handleDataRequest(response, {
+      if (build.entry.module.handleDataRequest) {
+        response = await build.entry.module.handleDataRequest(response, {
           context: loadContext,
           params: singleFetchMatches ? singleFetchMatches[0].params : {},
           request,
@@ -281,7 +248,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
           response = generateSingleFetchRedirectResponse(
             response,
             request,
-            _build,
+            build,
             serverMode,
           );
         }
@@ -294,7 +261,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
     ) {
       response = await handleResourceRequest(
         serverMode,
-        _build,
+        build,
         staticHandler,
         matches.slice(-1)[0].route.id,
         request,
@@ -305,8 +272,8 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
       let { pathname } = url;
 
       let criticalCss: CriticalCss | undefined = undefined;
-      if (_build.unstable_getCriticalCss) {
-        criticalCss = await _build.unstable_getCriticalCss({ pathname });
+      if (build.unstable_getCriticalCss) {
+        criticalCss = await build.unstable_getCriticalCss({ pathname });
       } else if (
         mode === ServerMode.Development &&
         getDevServerHooks()?.getCriticalCss
@@ -316,7 +283,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
       response = await handleDocumentRequest(
         serverMode,
-        _build,
+        build,
         staticHandler,
         request,
         loadContext,
@@ -336,6 +303,60 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
 
     return response;
   };
+
+  if (build.entry.module.unstable_instrumentHandler) {
+    requestHandler =
+      build.entry.module.unstable_instrumentHandler(requestHandler);
+  }
+
+  return {
+    routes,
+    dataRoutes,
+    serverMode,
+    staticHandler,
+    errorHandler,
+    requestHandler,
+  };
+}
+
+export const createRequestHandler: CreateRequestHandlerFunction = (
+  build,
+  mode,
+) => {
+  let _build: ServerBuild;
+  let routes: ServerRoute[];
+  let serverMode: ServerMode;
+  let staticHandler: StaticHandler;
+  let errorHandler: HandleErrorFunction;
+  let _requestHandler: RequestHandler;
+
+  return async function requestHandler(request, initialContext) {
+    _build = typeof build === "function" ? await build() : build;
+
+    if (typeof build === "function") {
+      let derived = derive(_build, mode);
+      routes = derived.routes;
+      serverMode = derived.serverMode;
+      staticHandler = derived.staticHandler;
+      errorHandler = derived.errorHandler;
+      _requestHandler = derived.requestHandler;
+    } else if (
+      !routes ||
+      !serverMode ||
+      !staticHandler ||
+      !errorHandler ||
+      !_requestHandler
+    ) {
+      let derived = derive(_build, mode);
+      routes = derived.routes;
+      serverMode = derived.serverMode;
+      staticHandler = derived.staticHandler;
+      errorHandler = derived.errorHandler;
+      _requestHandler = derived.requestHandler;
+    }
+
+    return _requestHandler(request, initialContext);
+  };
 };
 
 async function handleManifestRequest(