@uniflowed/router 0.0.0-alpha.41 → 0.0.0-alpha.42

package/instrumentation.js

@@ -0,0 +1,92 @@
+// @flow
+
+export type NavigationTiming = {|
+  readonly kind: "document" | "router",
+  readonly pathname: string,
+  readonly duration: number,
+  readonly status: "complete" | "error",
+|};
+
+export type ClientInstrumentation = {|
+  readonly register?: () => void | Promise<void>,
+  readonly onError?: (
+    error: mixed,
+    context: {| readonly source: "error" | "unhandledrejection" | "navigation" | "startup" |},
+  ) => void | Promise<void>,
+  readonly onNavigation?: (timing: NavigationTiming) => void | Promise<void>,
+|};
+
+const observers: Set<ClientInstrumentation> = new Set();
+
+function notify(body: () => mixed): void {
+  Promise.resolve()
+    .then(body)
+    .catch((error) => console.error("uf client instrumentation failed", error));
+}
+
+/** Installed by the client entry before hydration, with disposal during HMR. */
+export async function installClientInstrumentation(
+  hooks: ClientInstrumentation,
+): Promise<() => void> {
+  const error = (event: ErrorEvent) =>
+    notify(() => hooks.onError?.(event.error ?? event.message, { source: "error" }));
+  const rejection = (event: PromiseRejectionEvent) =>
+    notify(() => hooks.onError?.(event.reason, { source: "unhandledrejection" }));
+  window.addEventListener("error", error);
+  window.addEventListener("unhandledrejection", rejection);
+  observers.add(hooks);
+  let performanceObserver = null;
+  if (
+    typeof PerformanceObserver === "function" &&
+    PerformanceObserver.supportedEntryTypes.includes("navigation")
+  ) {
+    performanceObserver = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const timing: NavigationTiming = {
+          kind: "document",
+          pathname: new URL(entry.name).pathname,
+          duration: entry.duration,
+          status: "complete",
+        };
+        notify(() => hooks.onNavigation?.(timing));
+      }
+    });
+    performanceObserver.observe({ type: "navigation", buffered: true });
+  }
+  const dispose = () => {
+    window.removeEventListener("error", error);
+    window.removeEventListener("unhandledrejection", rejection);
+    observers.delete(hooks);
+    performanceObserver?.disconnect();
+  };
+  try {
+    await hooks.register?.();
+  } catch (failure) {
+    notify(() => hooks.onError?.(failure, { source: "startup" }));
+    dispose();
+  }
+  return dispose;
+}
+
+/** The router's asynchronous navigation work; a hard navigation has browser timing entries. */
+export async function observeNavigation<T>(to: string, body: () => Promise<T>): Promise<T> {
+  if (observers.size === 0) return body();
+  const started = performance.now();
+  const pathname = new URL(to, window.location.href).pathname;
+  let status: NavigationTiming["status"] = "complete";
+  try {
+    return await body();
+  } catch (error) {
+    status = "error";
+    for (const hooks of observers) notify(() => hooks.onError?.(error, { source: "navigation" }));
+    throw error;
+  } finally {
+    const timing: NavigationTiming = {
+      kind: "router",
+      pathname,
+      duration: performance.now() - started,
+      status,
+    };
+    for (const hooks of observers) notify(() => hooks.onNavigation?.(timing));
+  }
+}

package/internal/action-endpoint.js

@@ -88,6 +88,8 @@
 // it. Written here because this is the file somebody reads before deciding
 // otherwise.
 
+import { traceRequestPhase, reportRequestError } from "@uniflowed/server/instrumentation";
+
 import { asResponder, nativeActionAllowed } from "@uniflowed/server/host";
 
 import {
@@ -232,7 +234,7 @@ export function createActionDispatcher(options: {|
         // `decodeActionArguments` produced, so what is unchecked here is the
         // shape of the function and not the shape of the payload.
         const call = action as $FlowFixMe;
-        result = await call(...args);
+        result = await traceRequestPhase("action", () => call(...args));
       } catch (error) {
         report(record, error);
         return refusal(500);
@@ -430,6 +432,7 @@ function refusal(status: number): Response {
  * here and nowhere the caller can read.
  */
 function report(record: ActionRecord, error: mixed): void {
+  reportRequestError(error, "action");
   // eslint-disable-next-line no-console
   console.error(`uf: server action \`${record.export}\` in \`${record.module}\` failed`, error);
 }

package/internal/resolve.js

@@ -722,6 +722,8 @@ export type ResolveOptions = {|
   readonly defer?: boolean,
   /** The route pattern, the moment the URL matches one; see [`resolveMatch`]. */
   readonly onMatch?: (pattern: string) => void,
+  /** The server supplies tracing without importing server code into the browser. */
+  readonly runLoader?: (body: () => mixed | Promise<mixed>) => Promise<mixed>,
 |};
 
 async function resolveRoute(
@@ -799,7 +801,9 @@ async function resolveRoute(
   let data: mixed = options?.data;
   let deferred: ?Promise<mixed> = null;
   if (options?.skipLoader !== true && typeof page.loader === "function") {
-    const running = page.loader({ params: matched.params, searchParams, pathname });
+    const loader = page.loader;
+    const loadData = () => loader({ params: matched.params, searchParams, pathname });
+    const running = options?.runLoader == null ? loadData() : options.runLoader(loadData);
     const canDefer =
       options?.defer === true &&
       (matched.route.loading ?? []).length > 0 &&

package/internal/runtime.js

@@ -20,6 +20,8 @@
 
 "use client";
 
+import { observeNavigation } from "../instrumentation.js";
+
 import type * as React from "react";
 import {
   Suspense,
@@ -665,7 +667,9 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
     setResolved(next);
   };
 
-  const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
+  const navigate = (to: string, options?: NavigateOptions): Promise<void> =>
+    observeNavigation(to, () => navigateTo(to, options));
+  const navigateTo = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
       return;
     }
@@ -985,7 +989,9 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
   // Read once per render, for the reason `ModuleRouter` reads it once.
   const navigation = navigationMode();
 
-  const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
+  const navigate = (to: string, options?: NavigateOptions): Promise<void> =>
+    observeNavigation(to, () => navigateTo(to, options));
+  const navigateTo = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
       return;
     }

package/internal/server-instrumentation.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { traceRequestPhase } from "@uniflowed/server/instrumentation";
+import { NotFoundError, RedirectError } from "./routing.js";
+
+export function traceLoader(body: () => mixed | Promise<mixed>): Promise<mixed> {
+  return traceRequestPhase(
+    "loader",
+    async () => body(),
+    (error) => error instanceof RedirectError || error instanceof NotFoundError,
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.0.0-alpha.41",
+  "version": "0.0.0-alpha.42",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "./handler": "./handler.js",
     "./middleware": "./middleware.js",
     "./native-navigation": "./native-navigation.js",
-    "./http-client": "./http-client.js"
+    "./http-client": "./http-client.js",
+    "./instrumentation": "./instrumentation.js"
   },
   "files": [
     "action.js",
@@ -45,6 +46,7 @@
     "server.js",
     "native-navigation.js",
     "http-client.js",
+    "instrumentation.js",
     "!*.test.js"
   ],
   "peerDependencies": {
@@ -69,7 +71,7 @@
     }
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.0.0-alpha.41",
-    "@uniflowed/server": "0.0.0-alpha.41"
+    "@uniflowed/hooks": "0.0.0-alpha.42",
+    "@uniflowed/server": "0.0.0-alpha.42"
   }
 }

package/rsc.js

@@ -44,6 +44,8 @@
 // in this graph, and a boundary module without the directive is refused here,
 // with its file named, rather than by React with a sentence about functions.
 
+import { traceLoader } from "./internal/server-instrumentation.js";
+
 import * as React from "react";
 import { use } from "react";
 // React's Flight server. Only this graph can load it: it refuses to evaluate
@@ -51,6 +53,7 @@ import { use } from "react";
 import { renderToReadableStream } from "react-server-dom-parcel/server";
 
 import { noteRoute } from "@uniflowed/server/host";
+import { reportRequestError } from "@uniflowed/server/instrumentation";
 
 import { BoundaryReporter } from "./internal/boundaries.js";
 import { routeBoundaries } from "./internal/boundary-data.js";
@@ -175,7 +178,7 @@ export function createFlightRenderer(options: {|
           intercepted ??
           // `onMatch` records the route pattern on the request before the
           // loader runs, so every line the loader logs names its route.
-          (await resolveMatch(table, url, { defer, onMatch: noteRoute }));
+          (await resolveMatch(table, url, { defer, onMatch: noteRoute, runLoader: traceLoader }));
       } else {
         resolved = await resolveFailure(table, url, failure.error);
       }
@@ -199,13 +202,20 @@ export function createFlightRenderer(options: {|
       </>
     );
     const root: FlightRoot = { route: state, tree };
-    const report = settings?.onError;
+    const failure = renderFailure(route);
+    if (failure != null) reportRequestError(failure, "render");
+    const report = (error) => {
+      reportRequestError(error, "render");
+      if (settings?.onError != null) return settings.onError(error);
+      console.error(error);
+      return undefined;
+    };
     // Inside the route's store, so a server component's `useRoute()` finds the
     // route however many `await`s into the render it asks.
     const stream = withServerRoute(state, () =>
       renderToReadableStream(root, {
         // Handed over as it is, so that the digest it returns reaches the row.
-        // Absent, React logs the exception to the console itself.
+        // Our callback preserves React's console fallback when none was given.
         onError: report,
         signal: settings?.signal,
       }),
@@ -225,7 +235,11 @@ async function resolveFlightInterception(
     return null;
   }
   try {
-    const base = await resolveMatch(table, baseUrl, { defer });
+    const base = await resolveMatch(table, baseUrl, {
+      defer,
+      onMatch: noteRoute,
+      runLoader: traceLoader,
+    });
     return await resolveInterception(table, base, url);
   } catch (error) {
     if (error instanceof RedirectError) {

package/server.js

@@ -24,6 +24,8 @@
 // which.
 
 import { currentNonce, noteRoute } from "@uniflowed/server/host";
+import { traceLoader } from "./internal/server-instrumentation.js";
+
 import * as React from "react";
 
 import {
@@ -335,7 +337,11 @@ export function createRenderer(options: {|
     try {
       return {
         kind: "route",
-        route: await resolveMatch(table, url, { defer, onMatch: noteRoute }),
+        route: await resolveMatch(table, url, {
+          defer,
+          onMatch: noteRoute,
+          runLoader: traceLoader,
+        }),
       };
     } catch (error) {
       if (error instanceof RedirectError) {
@@ -512,3 +518,9 @@ export function shellDocument(assets: RenderAssets): string {
   const shell = shellFor(assets);
   return `${shell.open}${shell.body}${shell.close}`;
 }
+
+export {
+  createInstrumentation,
+  instrumentRender,
+  traceRequestPhase,
+} from "@uniflowed/server/instrumentation";