Add unstable_instrumentations API

[brophdawg11]

Initial implementation of the unstable_instrumentations API to provide a first-class way to instrument applications for logging, perf tracing, OTEL, etc.

Here's an example of a simple logging instrumentation on the server and the client:

Server

// entry.server.tsx

export const unstable_instrumentations = [loggingInstrumentations];

const serverLoggingInstrumentations = {
  handler({ instrument }) {
    instrument({
      async request(callHandler, info) {
        let path = new URL(info.request.url).pathname;
        await log(`request ${path}`, callHandler);
      },
    });
  },
  route({ instrument, id }) {
    instrument({
      middleware: (callMiddleware) => log(` middleware (${id})`, callMiddleware),
      loader: (callLoader) => log(`  loader (${id})`, callLoader),
      action: (callAction) => log(`  action (${id})`, callAction),
    });
  },
};

async function log(label: string, cb: () => Promise<void>) {
  let start = Date.now();
  console.log(`➡️ ${label}`);
  try {
    await cb();
  } finally {
    console.log(`⬅️ ${label} (${Date.now() - start}ms)`);
  }
}

Client

// entry.client.ts

<HydratedRouter unstable_instrumentations={[clientLoggingInstrumentations]} />

const clientLoggingInstrumentations = {
  router({ instrument }) {
    instrument({
      async navigate(callNavigate, info) { /*...*/ },
      async fetch(callNavigate, info) { /*...*/ },
    });
  },
  route({ instrument, id }) {
    instrument({
      middleware(callMiddleware, info) { /* ... */ },
      loader(callLoader, info) { /* ... */ },
      action(callAction, info) { /* ... */ },
    });
  },
};

TODO:

• Docs

Playground App
RFC: #13749
Closes: #14376

[changeset-bot]

🦋 Changeset detected

Latest commit: e0b6ce9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
react-router	Patch
@react-router/architect	Patch
@react-router/cloudflare	Patch
@react-router/dev	Patch
react-router-dom	Patch
@react-router/express	Patch
@react-router/node	Patch
@react-router/serve	Patch
@react-router/fs-routes	Patch
@react-router/remix-routes-option-adapter	Patch
create-react-router	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Alpha release created: 0.0.0-experimental-e0b6ce9

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline react-router@7.9.3..368e0cb

[rossipedia]

Really loving this API direction 🥳