basic server timing

app/root.tsx

@@ -42,6 +42,7 @@ import { getToast } from "./utils/toast.server.ts";
 import { combineHeaders } from "./utils/request.server.ts";
 import { useToast } from "./utils/toast.ts";
 import { pipeHeaders } from "./utils/remix.server.ts";
+import { ServerTiming } from "./utils/timings.server.ts";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: appStylesheet },
@@ -56,7 +57,7 @@ export const meta: MetaFunction = ({ data }) => [
 
 export const headers: HeadersFunction = (args) => {
   // document has authed personalized content
-  args.loaderHeaders.append("Cache-Control", "private")
+  args.loaderHeaders.append("Cache-Control", "private");
   args.loaderHeaders.append("Vary", "Cookie");
 
   return pipeHeaders(args);
@@ -65,8 +66,13 @@ export const headers: HeadersFunction = (args) => {
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   forceEnvValidation();
 
+  const timing = new ServerTiming();
+
+  timing.time("get user id", "Get user id from cookie");
   const userId = await getUserId(request);
+  timing.timeEnd("get user id");
 
+  timing.time("find user", "Find user in database");
   const user = userId
     ? (await db.query.userTable.findFirst({
         where: (userTable, { eq }) => eq(userTable.id, userId),
@@ -77,6 +83,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
         },
       })) ?? null
     : null;
+  timing.timeEnd("find user");
 
   if (userId && !user) {
     console.info("something weird happened");
@@ -107,7 +114,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       csrfToken,
     },
     {
-      headers: combineHeaders(headers, toast?.discardHeaders),
+      headers: combineHeaders(headers, toast?.discardHeaders, {
+        "Server-Timing": timing.toString(),
+      }),
     },
   );
 };

app/routes/_site+/blog.tsx

@@ -5,6 +5,7 @@ import { Link, useLoaderData } from "@remix-run/react";
 import { AspectRatio } from "#app/components/ui/aspect-ratio";
 import { CloudinaryImage } from "#app/components/image";
 import { pipeHeaders } from "#app/utils/remix.server";
+import { ServerTiming } from "#app/utils/timings.server";
 
 export const meta: MetaFunction = () => {
   return [
@@ -16,13 +17,18 @@ export const meta: MetaFunction = () => {
 export const headers: HeadersFunction = pipeHeaders;
 
 export const loader = async () => {
+  const timing = new ServerTiming();
+
+  timing.time("get posts", "Get posts");
   const posts = await getPostInfos();
+  timing.timeEnd("get posts");
 
   return json(
     { posts },
     {
       headers: {
         "Cache-Control": "max-age=86400",
+        "Server-Timing": timing.toString(),
       },
     },
   );

app/routes/_site+/blog_.$slug.tsx

@@ -3,6 +3,7 @@ import { bundleMDX } from "#app/utils/mdx/compile-mdx.server";
 import { useMdxComponent } from "#app/utils/mdx/mdx";
 import { getMdxBundleSource, getMdxEntry } from "#app/utils/mdx/mdx.server";
 import { pipeHeaders } from "#app/utils/remix.server";
+import { ServerTiming } from "#app/utils/timings.server";
 import { json } from "@remix-run/node";
 import type {
   HeadersFunction,
@@ -32,12 +33,20 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   }
 
   const slug = params.slug;
+  const timing = new ServerTiming();
 
+  timing.time("get post mdx bundle", "Get post mdx bundle");
   const mdxEntry = getMdxEntry("blog", slug);
   const mdxBundle = await getMdxBundleSource(mdxEntry);
+  timing.timeEnd("get post mdx bundle");
 
-  const meta = getPostMeta(mdxBundle.source);
+  timing.time("bundle post mdx", "Bundle post mdx");
   const { code } = await bundleMDX({ slug, bundle: mdxBundle });
+  timing.timeEnd("bundle post mdx");
+
+  timing.time("get post meta", "Get post meta");
+  const meta = getPostMeta(mdxBundle.source);
+  timing.timeEnd("get post meta");
 
   return json(
     {
@@ -47,6 +56,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     {
       headers: {
         "Cache-Control": "max-age=86400",
+        "Server-Timing": timing.toString(),
       },
     },
   );

app/routes/resources+/user-images.$imageId.ts

@@ -1,5 +1,6 @@
 import { db } from "#app/utils/db.server.ts";
 import { unvariant } from "#app/utils/misc.ts";
+import { ServerTiming } from "#app/utils/timings.server";
 import { type LoaderFunctionArgs } from "@remix-run/node";
 
 export const getUserImgSrc = (imageId?: string | null) =>
@@ -10,12 +11,21 @@ export async function loader({ params: { imageId } }: LoaderFunctionArgs) {
     throw new Response("Image ID is required", { status: 400 });
   }
 
+  const timing = new ServerTiming();
+
+  timing.time("find user image", "Find user image in database");
   const image = await db.query.userImageTable.findFirst({
     where: (userImageTable, { eq }) => eq(userImageTable.id, imageId),
   });
+  timing.timeEnd("find user image");
 
   if (!image) {
-    throw new Response("Not found", { status: 404 });
+    throw new Response("Not found", {
+      status: 404,
+      headers: {
+        "Server-Timing": timing.toString(),
+      },
+    });
   }
 
   return new Response(image.blob, {
@@ -24,6 +34,7 @@ export async function loader({ params: { imageId } }: LoaderFunctionArgs) {
       "Content-Length": Buffer.byteLength(image.blob).toString(),
       "Content-Disposition": `inline; filename="${imageId}"`,
       "Cache-Control": "public, max-age=31536000, immutable",
+      "Server-Timing": timing.toString(),
     },
   });
 }