improve server timings and add them to the root loader

Author: kentcdodds

app/root.tsx

@@ -5,6 +5,7 @@ import {
 	type DataFunctionArgs,
 	type LinksFunction,
 	type V2_MetaFunction,
+	type HeadersFunction,
 } from '@remix-run/node'
 import {
 	Form,
@@ -30,6 +31,7 @@ import { getUserImgSrc } from './utils/misc.ts'
 import { useNonce } from './utils/nonce-provider.ts'
 import { getSession, getTheme } from './utils/session.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
+import { makeTimings, time } from './utils/timing.server.ts'
 
 export const links: LinksFunction = () => {
 	return [
@@ -67,13 +69,22 @@ export const meta: V2_MetaFunction = () => {
 
 export async function loader({ request }: DataFunctionArgs) {
 	const cookieSession = await getSession(request.headers.get('Cookie'))
-	const userId = await getUserId(request)
+	const timings = makeTimings('rootLoader')
+	const userId = await time(() => getUserId(request), {
+		timings,
+		type: 'getUserId',
+		desc: 'getUserId in root',
+	})
 
 	const user = userId
-		? await prisma.user.findUnique({
-				where: { id: userId },
-				select: { id: true, name: true, username: true, imageId: true },
-		  })
+		? await time(
+				() =>
+					prisma.user.findUnique({
+						where: { id: userId },
+						select: { id: true, name: true, username: true, imageId: true },
+					}),
+				{ timings, type: 'find user', desc: 'find user in root' },
+		  )
 		: null
 	if (userId && !user) {
 		console.info('something weird happened')
@@ -82,18 +93,32 @@ export async function loader({ request }: DataFunctionArgs) {
 		await authenticator.logout(request, { redirectTo: '/' })
 	}
 
-	return json({
-		user,
-		requestInfo: {
-			hints: getHints(request),
-			origin: getDomainUrl(request),
-			path: new URL(request.url).pathname,
-			session: {
-				theme: getTheme(cookieSession),
+	return json(
+		{
+			user,
+			requestInfo: {
+				hints: getHints(request),
+				origin: getDomainUrl(request),
+				path: new URL(request.url).pathname,
+				session: {
+					theme: getTheme(cookieSession),
+				},
 			},
+			ENV: getEnv(),
 		},
-		ENV: getEnv(),
-	})
+		{
+			headers: {
+				'Server-Timing': timings.toString(),
+			},
+		},
+	)
+}
+
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+	const headers = {
+		'Server-Timing': loaderHeaders.get('Server-Timing') ?? '',
+	}
+	return headers
 }
 
 export default function App() {

app/routes/_marketing+/index.tsx

@@ -1,8 +1,16 @@
-import type { V2_MetaFunction } from '@remix-run/node'
+import type { HeadersFunction, V2_MetaFunction } from '@remix-run/node'
 import { logos, kodyRocket, stars } from './logos/logos.ts'
+import { combineServerTimings } from '~/utils/timing.server.ts'
 
 export const meta: V2_MetaFunction = () => [{ title: 'Epic Notes' }]
 
+export const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {
+	const headers = {
+		'Server-Timing': combineServerTimings(parentHeaders, loaderHeaders),
+	}
+	return headers
+}
+
 export default function Index() {
 	return (
 		<main className="relative min-h-screen sm:flex sm:items-center sm:justify-center">

app/utils/timing.server.ts

@@ -2,9 +2,27 @@ import { type CreateReporter } from 'cachified'
 
 export type Timings = Record<
 	string,
-	Array<{ desc?: string; type: string; time: number }>
+	Array<
+		{ desc?: string } & (
+			| { time: number; start?: never }
+			| { time?: never; start: number }
+		)
+	>
 >
 
+export function makeTimings(type: string, desc?: string) {
+	const timings: Timings = {
+		[type]: [{ desc, start: performance.now() }],
+	}
+	Object.defineProperty(timings, 'toString', {
+		value: function () {
+			return getServerTimeHeader(timings)
+		},
+		enumerable: false,
+	})
+	return timings
+}
+
 function createTimer(type: string, desc?: string) {
 	const start = performance.now()
 	return {
@@ -15,7 +33,7 @@ function createTimer(type: string, desc?: string) {
 				// eslint-disable-next-line no-multi-assign
 				timingType = timings[type] = []
 			}
-			timingType.push({ desc, type, time: performance.now() - start })
+			timingType.push({ desc, time: performance.now() - start })
 		},
 	}
 }
@@ -42,18 +60,22 @@ export async function time<ReturnType>(
 	return result
 }
 
-export function getServerTimeHeader(timings: Timings) {
+export function getServerTimeHeader(timings?: Timings) {
+	if (!timings) return ''
 	return Object.entries(timings)
 		.map(([key, timingInfos]) => {
 			const dur = timingInfos
-				.reduce((acc, timingInfo) => acc + timingInfo.time, 0)
+				.reduce((acc, timingInfo) => {
+					const time = timingInfo.time ?? performance.now() - timingInfo.start
+					return acc + time
+				}, 0)
 				.toFixed(1)
 			const desc = timingInfos
 				.map(t => t.desc)
 				.filter(Boolean)
 				.join(' & ')
 			return [
-				key.replaceAll(/(:| |@|=|;|,)/g, '_'),
+				key.replaceAll(/(:| |@|=|;|,|\/|\\)/g, '_'),
 				desc ? `desc=${JSON.stringify(desc)}` : null,
 				`dur=${dur}`,
 			]
@@ -63,6 +85,12 @@ export function getServerTimeHeader(timings: Timings) {
 		.join(',')
 }
 
+export function combineServerTimings(headers1: Headers, headers2: Headers) {
+	const newHeaders = new Headers(headers1)
+	newHeaders.append('Server-Timing', headers2.get('Server-Timing') ?? '')
+	return newHeaders.get('Server-Timing') ?? ''
+}
+
 export function cachifiedTimingReporter<Value>(
 	timings?: Timings,
 ): undefined | CreateReporter<Value> {