react-router 0.0.0-experimental-c19b79d → 0.0.0-experimental-e0b6ce9

package/dist/development/dom-export.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { R as RouterProviderProps$1, a as RouterInit, u as unstable_ClientOnErrorFunction } from './context-BqL5Eckq.mjs';
+import { R as RouterProviderProps$1, a as RouterInit, u as unstable_ClientInstrumentation, b as unstable_ClientOnErrorFunction } from './router-DWv6Clt-.mjs';
 import './browser-z32v5KVN.mjs';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
@@ -12,12 +12,67 @@ declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">):
  */
 interface HydratedRouterProps {
     /**
-     * Context object to be passed through to {@link createBrowserRouter} and made
-     * available to
+     * Context factory function to be passed through to {@link createBrowserRouter}.
+     * This function will be called to create a fresh `context` instance on each
+     * navigation/fetch and made available to
      * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-     * functions
+     * functions.
      */
     getContext?: RouterInit["getContext"];
+    /**
+     * Array of instrumentation objects allowing you to instrument the router and
+     * individual routes prior to router initialization (and on any subsequently
+     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+     * mostly useful for observability such as wrapping navigations, fetches,
+     * as well as route loaders/actions/middlewares with logging and/or performance
+     * tracing.
+     *
+     * ```tsx
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
+     *
+     * const logging = {
+     *   router({ instrument }) {
+     *     instrument({
+     *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
+     *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
+     *     });
+     *   },
+     *   route({ instrument, id }) {
+     *     instrument({
+     *       middleware: (impl, { request }) => logExecution(
+     *         `middleware ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       loader: (impl, { request }) => logExecution(
+     *         `loader ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       action: (impl, { request }) => logExecution(
+     *         `action ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *     })
+     *   }
+     * };
+     *
+     * async function logExecution(label: string, impl: () => Promise<void>) {
+     *   let start = performance.now();
+     *   console.log(`start ${label}`);
+     *   try {
+     *     await impl();
+     *   } finally {
+     *     let end = performance.now();
+     *     console.log(`end ${label} (${Math.round(end - start)}ms)`);
+     *   }
+     * }
+     * ```
+     */
+    unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
      * An error handler function that will be called for any loader/action/render
      * errors that are encountered in your application.  This is useful for

package/dist/development/dom-export.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RouterProviderProps as RouterProviderProps$1, RouterInit, unstable_ClientOnErrorFunction } from 'react-router';
+import { u as unstable_ClientInstrumentation } from './instrumentation-BGrNA7uj.js';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
@@ -11,12 +12,67 @@ declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">):
  */
 interface HydratedRouterProps {
     /**
-     * Context object to be passed through to {@link createBrowserRouter} and made
-     * available to
+     * Context factory function to be passed through to {@link createBrowserRouter}.
+     * This function will be called to create a fresh `context` instance on each
+     * navigation/fetch and made available to
      * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
-     * functions
+     * functions.
      */
     getContext?: RouterInit["getContext"];
+    /**
+     * Array of instrumentation objects allowing you to instrument the router and
+     * individual routes prior to router initialization (and on any subsequently
+     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+     * mostly useful for observability such as wrapping navigations, fetches,
+     * as well as route loaders/actions/middlewares with logging and/or performance
+     * tracing.
+     *
+     * ```tsx
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
+     *
+     * const logging = {
+     *   router({ instrument }) {
+     *     instrument({
+     *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
+     *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
+     *     });
+     *   },
+     *   route({ instrument, id }) {
+     *     instrument({
+     *       middleware: (impl, { request }) => logExecution(
+     *         `middleware ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       loader: (impl, { request }) => logExecution(
+     *         `loader ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       action: (impl, { request }) => logExecution(
+     *         `action ${request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *     })
+     *   }
+     * };
+     *
+     * async function logExecution(label: string, impl: () => Promise<void>) {
+     *   let start = performance.now();
+     *   console.log(`start ${label}`);
+     *   try {
+     *     await impl();
+     *   } finally {
+     *     let end = performance.now();
+     *     console.log(`end ${label} (${Math.round(end - start)}ms)`);
+     *   }
+     * }
+     * ```
+     */
+    unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
      * An error handler function that will be called for any loader/action/render
      * errors that are encountered in your application.  This is useful for

package/dist/development/dom-export.js

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }/**
- * react-router v0.0.0-experimental-c19b79d
+ * react-router v0.0.0-experimental-e0b6ce9
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -11,7 +11,7 @@
 "use client";
 
 
-var _chunkLUB73E44js = require('./chunk-LUB73E44.js');
+var _chunkINO4IHBFjs = require('./chunk-INO4IHBF.js');
 
 // lib/dom-export/dom-router-provider.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
@@ -67,7 +67,8 @@ function initSsrInfo() {
   }
 }
 function createHydratedRouter({
-  getContext
+  getContext,
+  unstable_instrumentations
 }) {
   initSsrInfo();
   if (!ssrInfo) {
@@ -134,6 +135,7 @@ function createHydratedRouter({
     getContext,
     hydrationData,
     hydrationRouteProperties: _reactrouter.UNSAFE_hydrationRouteProperties,
+    unstable_instrumentations,
     mapRouteProperties: _reactrouter.UNSAFE_mapRouteProperties,
     future: {
       middleware: ssrInfo.context.future.v8_middleware
@@ -167,7 +169,8 @@ function createHydratedRouter({
 function HydratedRouter(props) {
   if (!router) {
     router = createHydratedRouter({
-      getContext: props.getContext
+      getContext: props.getContext,
+      unstable_instrumentations: props.unstable_instrumentations
     });
   }
   let [criticalCss, setCriticalCss] = React2.useState(
@@ -180,7 +183,7 @@ function HydratedRouter(props) {
   }, []);
   React2.useEffect(() => {
     if (process.env.NODE_ENV === "development" && criticalCss === void 0) {
-      document.querySelectorAll(`[${_chunkLUB73E44js.CRITICAL_CSS_DATA_ATTRIBUTE}]`).forEach((element) => element.remove());
+      document.querySelectorAll(`[${_chunkINO4IHBFjs.CRITICAL_CSS_DATA_ATTRIBUTE}]`).forEach((element) => element.remove());
     }
   }, [criticalCss]);
   let [location, setLocation] = React2.useState(router.state.location);

package/dist/development/dom-export.mjs

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-c19b79d
+ * react-router v0.0.0-experimental-e0b6ce9
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -12,7 +12,7 @@
 import {
   deserializeErrors,
   getHydrationData
-} from "./chunk-AGOH44BE.mjs";
+} from "./chunk-4FI4BC6Y.mjs";
 import {
   CRITICAL_CSS_DATA_ATTRIBUTE,
   FrameworkContext,
@@ -29,7 +29,7 @@ import {
   invariant,
   mapRouteProperties,
   useFogOFWarDiscovery
-} from "./chunk-IMKEG5CI.mjs";
+} from "./chunk-F6CT5MEB.mjs";
 
 // lib/dom-export/dom-router-provider.tsx
 import * as React from "react";
@@ -67,7 +67,8 @@ function initSsrInfo() {
   }
 }
 function createHydratedRouter({
-  getContext
+  getContext,
+  unstable_instrumentations
 }) {
   initSsrInfo();
   if (!ssrInfo) {
@@ -134,6 +135,7 @@ function createHydratedRouter({
     getContext,
     hydrationData,
     hydrationRouteProperties,
+    unstable_instrumentations,
     mapRouteProperties,
     future: {
       middleware: ssrInfo.context.future.v8_middleware
@@ -167,7 +169,8 @@ function createHydratedRouter({
 function HydratedRouter(props) {
   if (!router) {
     router = createHydratedRouter({
-      getContext: props.getContext
+      getContext: props.getContext,
+      unstable_instrumentations: props.unstable_instrumentations
     });
   }
   let [criticalCss, setCriticalCss] = React2.useState(

package/dist/development/{index-react-server-client-DKvU8YRr.d.ts → index-react-server-client-CYIi6gi0.d.mts}

@@ -1,5 +1,148 @@
-import { ai as HTMLFormMethod, ag as FormEncType, k as RelativeRoutingType, by as RouteManifest, bz as ServerRouteModule, O as MiddlewareEnabled, K as RouterContextProvider, J as AppLoadContext, ak as LoaderFunctionArgs, ab as ActionFunctionArgs, f as RouteModules, H as HydrationState, a0 as DataRouteObject, W as ClientLoaderFunction, a4 as StaticHandlerContext, bb as PageLinkDescriptor, T as To, bA as History, a3 as GetScrollRestorationKeyFunction, Z as RouterInit, bB as FutureConfig$1, g as DataStrategyFunction, $ as PatchRoutesOnNavigationFunction, h as NavigateOptions, a5 as Fetcher, r as RouteObject, e as Router, j as SerializeFrom, B as BlockerFunction, a as Location, bC as CreateStaticHandlerOptions$1, a1 as StaticHandler } from './routeModules-BmVo7q9e.js';
+import { bc as RouteManifest, H as HydrationState, G as DataRouteObject, Q as StaticHandlerContext, e as MiddlewareEnabled, c as RouterContextProvider, f as LoaderFunctionArgs, A as ActionFunctionArgs, ad as unstable_ServerInstrumentation, a4 as HTMLFormMethod, a2 as FormEncType, n as RelativeRoutingType, T as To, bd as History, O as GetScrollRestorationKeyFunction, a as RouterInit, be as FutureConfig$1, u as unstable_ClientInstrumentation, l as DataStrategyFunction, F as PatchRoutesOnNavigationFunction, N as NavigateOptions, V as Fetcher, v as RouteObject, k as Router, B as BlockerFunction, L as Location, bf as CreateStaticHandlerOptions$1, J as StaticHandler } from './router-DWv6Clt-.mjs';
 import * as React from 'react';
+import { c as RouteModules, h as ClientLoaderFunction, o as ServerRouteModule, A as AppLoadContext, m as PageLinkDescriptor, d as SerializeFrom } from './routeModules-Cy4Xsfoi.mjs';
+
+interface Route {
+    index?: boolean;
+    caseSensitive?: boolean;
+    id: string;
+    parentId?: string;
+    path?: string;
+}
+interface EntryRoute extends Route {
+    hasAction: boolean;
+    hasLoader: boolean;
+    hasClientAction: boolean;
+    hasClientLoader: boolean;
+    hasClientMiddleware: boolean;
+    hasErrorBoundary: boolean;
+    imports?: string[];
+    css?: string[];
+    module: string;
+    clientActionModule: string | undefined;
+    clientLoaderModule: string | undefined;
+    clientMiddlewareModule: string | undefined;
+    hydrateFallbackModule: string | undefined;
+    parentId?: string;
+}
+declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
+declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
+declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
+
+type SerializedError = {
+    message: string;
+    stack?: string;
+};
+interface FrameworkContextObject {
+    manifest: AssetsManifest;
+    routeModules: RouteModules;
+    criticalCss?: CriticalCss;
+    serverHandoffString?: string;
+    future: FutureConfig;
+    ssr: boolean;
+    isSpaMode: boolean;
+    routeDiscovery: ServerBuild["routeDiscovery"];
+    serializeError?(error: Error): SerializedError;
+    renderMeta?: {
+        didRenderScripts?: boolean;
+        streamCache?: Record<number, Promise<void> & {
+            result?: {
+                done: boolean;
+                value: string;
+            };
+            error?: unknown;
+        }>;
+    };
+}
+interface EntryContext extends FrameworkContextObject {
+    staticHandlerContext: StaticHandlerContext;
+    serverHandoffStream?: ReadableStream<Uint8Array>;
+}
+interface FutureConfig {
+    unstable_subResourceIntegrity: boolean;
+    v8_middleware: boolean;
+}
+type CriticalCss = string | {
+    rel: "stylesheet";
+    href: string;
+};
+interface AssetsManifest {
+    entry: {
+        imports: string[];
+        module: string;
+    };
+    routes: RouteManifest<EntryRoute>;
+    url: string;
+    version: string;
+    hmr?: {
+        timestamp?: number;
+        runtime: string;
+    };
+    sri?: Record<string, string> | true;
+}
+
+type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
+interface ServerRoute extends Route {
+    children: ServerRoute[];
+    module: ServerRouteModule;
+}
+
+type OptionalCriticalCss = CriticalCss | undefined;
+/**
+ * The output of the compiler for the server build.
+ */
+interface ServerBuild {
+    entry: {
+        module: ServerEntryModule;
+    };
+    routes: ServerRouteManifest;
+    assets: AssetsManifest;
+    basename?: string;
+    publicPath: string;
+    assetsBuildDirectory: string;
+    future: FutureConfig;
+    ssr: boolean;
+    unstable_getCriticalCss?: (args: {
+        pathname: string;
+    }) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
+    /**
+     * @deprecated This is now done via a custom header during prerendering
+     */
+    isSpaMode: boolean;
+    prerender: string[];
+    routeDiscovery: {
+        mode: "lazy" | "initial";
+        manifestPath: string;
+    };
+}
+interface HandleDocumentRequestFunction {
+    (request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? RouterContextProvider : AppLoadContext): Promise<Response> | Response;
+}
+interface HandleDataRequestFunction {
+    (response: Response, args: {
+        request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
+        context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
+        params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
+    }): Promise<Response> | Response;
+}
+interface HandleErrorFunction {
+    (error: unknown, args: {
+        request: LoaderFunctionArgs["request"] | ActionFunctionArgs["request"];
+        context: LoaderFunctionArgs["context"] | ActionFunctionArgs["context"];
+        params: LoaderFunctionArgs["params"] | ActionFunctionArgs["params"];
+    }): void;
+}
+/**
+ * A module that serves as the entry point for a Remix app during server
+ * rendering.
+ */
+interface ServerEntryModule {
+    default: HandleDocumentRequestFunction;
+    handleDataRequest?: HandleDataRequestFunction;
+    handleError?: HandleErrorFunction;
+    unstable_instrumentations?: unstable_ServerInstrumentation[];
+    streamTimeout?: number;
+}
 
 type ParamKeyValuePair = [string, string];
 type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
@@ -107,139 +250,6 @@ interface SubmitOptions extends FetcherSubmitOptions {
     viewTransition?: boolean;
 }
 
-type ServerRouteManifest = RouteManifest<Omit<ServerRoute, "children">>;
-interface ServerRoute extends Route {
-    children: ServerRoute[];
-    module: ServerRouteModule;
-}
-
-type OptionalCriticalCss = CriticalCss | undefined;
-/**
- * The output of the compiler for the server build.
- */
-interface ServerBuild {
-    entry: {
-        module: ServerEntryModule;
-    };
-    routes: ServerRouteManifest;
-    assets: AssetsManifest;
-    basename?: string;
-    publicPath: string;
-    assetsBuildDirectory: string;
-    future: FutureConfig;
-    ssr: boolean;
-    unstable_getCriticalCss?: (args: {
-        pathname: string;
-    }) => OptionalCriticalCss | Promise<OptionalCriticalCss>;
-    /**
-     * @deprecated This is now done via a custom header during prerendering
-     */
-    isSpaMode: boolean;
-    prerender: string[];
-    routeDiscovery: {
-        mode: "lazy" | "initial";
-        manifestPath: string;
-    };
-}
-interface HandleDocumentRequestFunction {
-    (request: Request, responseStatusCode: number, responseHeaders: Headers, context: EntryContext, loadContext: MiddlewareEnabled extends true ? RouterContextProvider : AppLoadContext): Promise<Response> | Response;
-}
-interface HandleDataRequestFunction {
-    (response: Response, args: LoaderFunctionArgs | ActionFunctionArgs): Promise<Response> | Response;
-}
-interface HandleErrorFunction {
-    (error: unknown, args: LoaderFunctionArgs | ActionFunctionArgs): void;
-}
-/**
- * A module that serves as the entry point for a Remix app during server
- * rendering.
- */
-interface ServerEntryModule {
-    default: HandleDocumentRequestFunction;
-    handleDataRequest?: HandleDataRequestFunction;
-    handleError?: HandleErrorFunction;
-    streamTimeout?: number;
-}
-
-interface Route {
-    index?: boolean;
-    caseSensitive?: boolean;
-    id: string;
-    parentId?: string;
-    path?: string;
-}
-interface EntryRoute extends Route {
-    hasAction: boolean;
-    hasLoader: boolean;
-    hasClientAction: boolean;
-    hasClientLoader: boolean;
-    hasClientMiddleware: boolean;
-    hasErrorBoundary: boolean;
-    imports?: string[];
-    css?: string[];
-    module: string;
-    clientActionModule: string | undefined;
-    clientLoaderModule: string | undefined;
-    clientMiddlewareModule: string | undefined;
-    hydrateFallbackModule: string | undefined;
-    parentId?: string;
-}
-declare function createClientRoutesWithHMRRevalidationOptOut(needsRevalidation: Set<string>, manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState, ssr: boolean, isSpaMode: boolean): DataRouteObject[];
-declare function createClientRoutes(manifest: RouteManifest<EntryRoute>, routeModulesCache: RouteModules, initialState: HydrationState | null, ssr: boolean, isSpaMode: boolean, parentId?: string, routesByParentId?: Record<string, Omit<EntryRoute, "children">[]>, needsRevalidation?: Set<string>): DataRouteObject[];
-declare function shouldHydrateRouteLoader(routeId: string, clientLoader: ClientLoaderFunction | undefined, hasLoader: boolean, isSpaMode: boolean): boolean;
-
-type SerializedError = {
-    message: string;
-    stack?: string;
-};
-interface FrameworkContextObject {
-    manifest: AssetsManifest;
-    routeModules: RouteModules;
-    criticalCss?: CriticalCss;
-    serverHandoffString?: string;
-    future: FutureConfig;
-    ssr: boolean;
-    isSpaMode: boolean;
-    routeDiscovery: ServerBuild["routeDiscovery"];
-    serializeError?(error: Error): SerializedError;
-    renderMeta?: {
-        didRenderScripts?: boolean;
-        streamCache?: Record<number, Promise<void> & {
-            result?: {
-                done: boolean;
-                value: string;
-            };
-            error?: unknown;
-        }>;
-    };
-}
-interface EntryContext extends FrameworkContextObject {
-    staticHandlerContext: StaticHandlerContext;
-    serverHandoffStream?: ReadableStream<Uint8Array>;
-}
-interface FutureConfig {
-    unstable_subResourceIntegrity: boolean;
-    v8_middleware: boolean;
-}
-type CriticalCss = string | {
-    rel: "stylesheet";
-    href: string;
-};
-interface AssetsManifest {
-    entry: {
-        imports: string[];
-        module: string;
-    };
-    routes: RouteManifest<EntryRoute>;
-    url: string;
-    version: string;
-    hmr?: {
-        timestamp?: number;
-        runtime: string;
-    };
-    sri?: Record<string, string> | true;
-}
-
 declare const FrameworkContext: React.Context<FrameworkContextObject | undefined>;
 /**
  * Defines the discovery behavior of the link:
@@ -521,6 +531,58 @@ interface DOMRouterOpts {
      * ```
      */
     hydrationData?: HydrationState;
+    /**
+     * Array of instrumentation objects allowing you to instrument the router and
+     * individual routes prior to router initialization (and on any subsequently
+     * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+     * mostly useful for observability such as wrapping navigations, fetches,
+     * as well as route loaders/actions/middlewares with logging and/or performance
+     * tracing.
+     *
+     * ```tsx
+     * let router = createBrowserRouter(routes, {
+     *   unstable_instrumentations: [logging]
+     * });
+     *
+     *
+     * let logging = {
+     *   router({ instrument }) {
+     *     instrument({
+     *       navigate: (impl, info) => logExecution(`navigate ${info.to}`, impl),
+     *       fetch: (impl, info) => logExecution(`fetch ${info.to}`, impl)
+     *     });
+     *   },
+     *   route({ instrument, id }) {
+     *     instrument({
+     *       middleware: (impl, info) => logExecution(
+     *         `middleware ${info.request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       loader: (impl, info) => logExecution(
+     *         `loader ${info.request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *       action: (impl, info) => logExecution(
+     *         `action ${info.request.url} (route ${id})`,
+     *         impl
+     *       ),
+     *     })
+     *   }
+     * };
+     *
+     * async function logExecution(label: string, impl: () => Promise<void>) {
+     *   let start = performance.now();
+     *   console.log(`start ${label}`);
+     *   try {
+     *     await impl();
+     *   } finally {
+     *     let end = performance.now();
+     *     console.log(`end ${label} (${Math.round(end - start)}ms)`);
+     *   }
+     * }
+     * ```
+     */
+    unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
      * Override the default data strategy of running loaders in parallel.
      * See {@link DataStrategyFunction}.
@@ -1026,6 +1088,7 @@ interface DOMRouterOpts {
  * @param {DOMRouterOpts.future} opts.future n/a
  * @param {DOMRouterOpts.getContext} opts.getContext n/a
  * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
+ * @param {DOMRouterOpts.unstable_instrumentations} opts.unstable_instrumentations n/a
  * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
  * @param {DOMRouterOpts.window} opts.window n/a
  * @returns An initialized {@link DataRouter| data router} to pass to {@link RouterProvider | `<RouterProvider>`}
@@ -1044,6 +1107,7 @@ declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts
  * @param {DOMRouterOpts.future} opts.future n/a
  * @param {DOMRouterOpts.getContext} opts.getContext n/a
  * @param {DOMRouterOpts.hydrationData} opts.hydrationData n/a
+ * @param {DOMRouterOpts.unstable_instrumentations} opts.unstable_instrumentations n/a
  * @param {DOMRouterOpts.dataStrategy} opts.dataStrategy n/a
  * @param {DOMRouterOpts.patchRoutesOnNavigation} opts.patchRoutesOnNavigation n/a
  * @param {DOMRouterOpts.window} opts.window n/a