app/lib/timing.ts

Functions

Imports

It imports no other module of this repo. Imported by app/db/posts.ts, app/lib/editor/link-targets.server.ts, app/lib/health/checks.server.ts, app/lib/search/ask.server.ts, app/root.tsx, app/routes/admin._index.tsx, app/routes/admin.kb.tsx, app/routes/admin.media._index.tsx, app/routes/admin.mentions.tsx, app/routes/admin.posts.$slug.edit.tsx, app/routes/admin.posts.$slug.history.tsx, app/routes/admin.posts.$slug.revisions.tsx, app/routes/admin.posts._index.tsx, app/routes/admin.posts.new.tsx, app/routes/admin.tools.tsx, app/routes/admin.tsx, app/routes/blog._index.tsx, app/routes/home.tsx, workers/app.ts.

Source

1import { createContext, type RouterContextProvider } from "react-router";
2
3export type Timings = Array<{ name: string; ms: number }>;
4
5// Shared so the `admin.tsx` middleware and child loaders write into one Server-Timing header.
6export const timingsContext = createContext<{ timings?: Timings }>({});
7
8/**
9 * Whether this request collects Server-Timing marks: every admin request (a signed-in person's, never cached, so the
10 * numbers cost nothing to read and are there when a page is slow), and any other page that asks with `?timing=1`.
11 */
12export function wantsTiming(url: URL) {
13  return url.searchParams.get("timing") === "1" || url.pathname === "/admin" || url.pathname.startsWith("/admin/");
14}
15
16export async function timed<T>(
17  into: Timings | undefined,
18  name: string,
19  fn: () => Promise<T>,
20): Promise<T> {
21  if (!into) return fn();
22  const start = performance.now();
23  try {
24    return await fn();
25  } finally {
26    into.push({ name, ms: performance.now() - start });
27  }
28}
29
30/**
31 * Runs a loader body as one timed mark, `loader_total` unless named. Wrapping the body rather than
32 * pushing before the last return is what counts the early returns and the throws too.
33 */
34export function timedLoader<T>(
35  context: Readonly<RouterContextProvider>,
36  fn: (timings: Timings | undefined) => Promise<T>,
37  name = "loader_total",
38): Promise<T> {
39  const timings = context.get(timingsContext).timings;
40  return timed(timings, name, () => fn(timings));
41}
42
43// Names must be tokens: one malformed name makes the browser silently discard the whole header.
44export function serverTiming(timings: Timings) {
45  return timings
46    .map(({ name, ms }) => `${name.replace(/[^A-Za-z0-9_-]/g, "")};dur=${ms.toFixed(1)}`)
47    .join(", ");
48}