Page load time regression (#694)

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

app/root.tsx

@@ -54,7 +54,7 @@ import { getSession } from './utils/session.server.ts'
 import { TeamProvider, useTeam } from './utils/team-provider.tsx'
 import { getTheme } from './utils/theme.server.ts'
 import { useTheme } from './utils/theme.tsx'
-import { getServerTimeHeader } from './utils/timing.server.ts'
+import { getServerTimeHeader, time, withTimeout } from './utils/timing.server.ts'
 import { getUserInfo } from './utils/user-info.server.ts'
 
 export const handle: KCDHandle & { id: string } = {
@@ -116,8 +116,15 @@ export const links: LinksFunction = () => {
 	]
 }
 
+const PODCAST_LINKS_FALLBACK = {
+	chats: { latestSeasonNumber: null, latestSeasonPath: '/chats' },
+	calls: { latestSeasonNumber: null, latestSeasonPath: '/calls' },
+} as const
+
 export async function loader({ request }: Route.LoaderArgs) {
 	const timings = {}
+	const loaderStart = performance.now()
+	const podcastLinksAbortController = new AbortController()
 	const session = await getSession(request)
 	const [
 		user,
@@ -130,10 +137,26 @@ export async function loader({ request }: Route.LoaderArgs) {
 		getClientSession(request, session.getUser({ timings })),
 		getLoginInfoSession(request),
 		getInstanceInfo().then((i) => i.primaryInstance),
-		getLatestPodcastSeasonLinks({ request, timings }).catch(() => ({
-			chats: { latestSeasonNumber: null, latestSeasonPath: '/chats' },
-			calls: { latestSeasonNumber: null, latestSeasonPath: '/calls' },
-		})),
+		time(
+			withTimeout(
+				getLatestPodcastSeasonLinks({
+					request,
+					timings,
+					signal: podcastLinksAbortController.signal,
+				}),
+				{
+				timeoutMs: 2000,
+				fallback: PODCAST_LINKS_FALLBACK,
+				label: 'root:podcast-season-links',
+				onTimeout: () => podcastLinksAbortController.abort(),
+			},
+			),
+			{
+				timings,
+				type: 'root:podcast-season-links',
+				desc: 'podcast nav links (Simplecast + Transistor)',
+			},
+		),
 	])
 
 	const randomFooterImageKeys = Object.keys(illustrationImages)
@@ -170,7 +193,15 @@ export async function loader({ request }: Route.LoaderArgs) {
 	await session.getHeaders(headers)
 	await clientSession.getHeaders(headers)
 	await loginInfoSession.getHeaders(headers)
-	headers.append('Server-Timing', getServerTimeHeader(timings))
+	// Add root loader total for production diagnostics (visible in Server-Timing)
+	const rootLoaderTotal = performance.now() - loaderStart
+	const rootTimings = {
+		...timings,
+		'root:loader': [
+			{ type: 'root:loader', desc: 'root loader total', time: rootLoaderTotal },
+		],
+	}
+	headers.append('Server-Timing', getServerTimeHeader(rootTimings))
 
 	return json(data, { headers })
 }

app/utils/__tests__/fetch-json-with-retry-after.server.test.ts

@@ -167,6 +167,28 @@ test('fetchJsonWithRetryAfter retries when fetch throws (network error / abort)'
 	expect(sleep).toHaveBeenCalledWith(456)
 })
 
+test('fetchJsonWithRetryAfter throws AbortError when signal is already aborted', async () => {
+	const controller = new AbortController()
+	controller.abort()
+	await expect(
+		fetchJsonWithRetryAfter('https://example.com/test', {
+			label: 'aborted-before-start',
+			signal: controller.signal,
+		}),
+	).rejects.toMatchObject({ name: 'AbortError' })
+})
+
+test('fetchJsonWithRetryAfter aborts while waiting to retry', async () => {
+	const controller = new AbortController()
+	const promise = fetchJsonWithRetryAfter('https://example.com/always-429', {
+		label: 'aborted-during-delay',
+		maxRetries: 2,
+		signal: controller.signal,
+	})
+	setTimeout(() => controller.abort(), 10)
+	await expect(promise).rejects.toMatchObject({ name: 'AbortError' })
+})
+
 test('fetchJsonWithRetryAfter throws a labeled error on malformed JSON', async () => {
 	const sleep = vi.fn(async () => {})
 	await expect(

app/utils/abort-utils.server.ts

@@ -0,0 +1,78 @@
+type Sleep = (ms: number) => Promise<void>
+
+const defaultSleep: Sleep = async (ms) => {
+	await new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+function createAbortError() {
+	const error = new Error('Operation aborted')
+	error.name = 'AbortError'
+	return error
+}
+
+function throwIfAborted(signal?: AbortSignal) {
+	if (!signal?.aborted) return
+	throw createAbortError()
+}
+
+function isAbortError(error: unknown) {
+	return typeof error === 'object' && error !== null && (error as any).name === 'AbortError'
+}
+
+async function waitForDelay({
+	sleep,
+	delayMs,
+	signal,
+}: {
+	sleep?: Sleep
+	delayMs: number
+	signal?: AbortSignal
+}) {
+	if (!signal) {
+		const activeSleep = sleep ?? defaultSleep
+		await activeSleep(delayMs)
+		return
+	}
+	throwIfAborted(signal)
+	if (!sleep) {
+		await new Promise<void>((resolve, reject) => {
+			const timeoutId = setTimeout(() => {
+				signal.removeEventListener('abort', onAbort)
+				resolve()
+			}, delayMs)
+			const onAbort = () => {
+				clearTimeout(timeoutId)
+				signal.removeEventListener('abort', onAbort)
+				reject(createAbortError())
+			}
+			signal.addEventListener('abort', onAbort, { once: true })
+		})
+		return
+	}
+	await new Promise<void>((resolve, reject) => {
+		let settled = false
+		const onAbort = () => {
+			if (settled) return
+			settled = true
+			signal.removeEventListener('abort', onAbort)
+			reject(createAbortError())
+		}
+		signal.addEventListener('abort', onAbort, { once: true })
+		sleep(delayMs).then(
+			() => {
+				if (settled) return
+				settled = true
+				signal.removeEventListener('abort', onAbort)
+				resolve()
+			},
+			(error) => {
+				if (settled) return
+				settled = true
+				signal.removeEventListener('abort', onAbort)
+				reject(error)
+			},
+		)
+	})
+}
+
+export { defaultSleep, isAbortError, throwIfAborted, waitForDelay, type Sleep }

app/utils/fetch-json-with-retry-after.server.ts

@@ -1,11 +1,11 @@
+import {
+	defaultSleep,
+	throwIfAborted,
+	waitForDelay,
+	type Sleep,
+} from './abort-utils.server.ts'
 import { fetchWithTimeout } from './fetch-with-timeout.server'
 
-type Sleep = (ms: number) => Promise<void>
-
-const defaultSleep: Sleep = async (ms) => {
-	await new Promise((resolve) => setTimeout(resolve, ms))
-}
-
 type RetryDelayReason = 'retry-after' | 'rate-limit-reset' | 'default'
 
 type RetryDelay = {
@@ -101,6 +101,7 @@ export async function fetchJsonWithRetryAfter<JsonResponse>(
 		label,
 		sleep = defaultSleep,
 		retryOn5xx = false,
+		signal,
 	}: {
 		headers?: Record<string, string>
 		maxRetries?: number
@@ -110,14 +111,17 @@ export async function fetchJsonWithRetryAfter<JsonResponse>(
 		label?: string
 		sleep?: Sleep
 		retryOn5xx?: boolean
+		signal?: AbortSignal
 	} = {},
 ): Promise<JsonResponse> {
 	for (let attempt = 0; attempt <= maxRetries; attempt++) {
+		throwIfAborted(signal)
 		let res: Response
 		try {
 			res = timeoutMs
-				? await fetchWithTimeout(url, { headers }, timeoutMs)
-				: await fetch(url, { headers })
+				? await fetchWithTimeout(url, { headers, signal }, timeoutMs)
+				: await fetch(url, { headers, signal })
+			throwIfAborted(signal)
 		} catch (cause) {
 			if (attempt < maxRetries) {
 				const delayMs = clampMs(defaultDelayMs * (attempt + 1), maxDelayMs)
@@ -126,7 +130,7 @@ export async function fetchJsonWithRetryAfter<JsonResponse>(
 						maxRetries + 1
 					}), waiting ${Math.round(delayMs)}ms`,
 				)
-				await sleep(delayMs)
+				await waitForDelay({ sleep, delayMs, signal })
 				continue
 			}
 			throw new Error(`${label ?? 'request'}: fetch failed`, { cause })
@@ -146,7 +150,7 @@ export async function fetchJsonWithRetryAfter<JsonResponse>(
 					delayMs,
 				)}ms (${reason})`,
 			)
-			await sleep(delayMs)
+			await waitForDelay({ sleep, delayMs, signal })
 			continue
 		}
 
@@ -159,7 +163,7 @@ export async function fetchJsonWithRetryAfter<JsonResponse>(
 						maxRetries + 1
 					}), waiting ${Math.round(delayMs)}ms`,
 				)
-				await sleep(delayMs)
+				await waitForDelay({ sleep, delayMs, signal })
 				continue
 			}
 

app/utils/podcast-latest-season.server.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { isAbortError, throwIfAborted } from './abort-utils.server.ts'
 import { cache, cachified } from './cache.server.ts'
 import { type Timings } from './timing.server.ts'
 
@@ -20,20 +21,24 @@ function formatSeasonParam(seasonNumber: number) {
 async function getLatestChatsSeasonNumber({
 	request,
 	timings,
+	signal,
 }: {
 	request: Request
 	timings?: Timings
+	signal?: AbortSignal
 }) {
 	try {
+		throwIfAborted(signal)
 		// Dynamic import so missing podcast env vars don't crash the whole app.
 		const { getSeasonListItems } = await import('./simplecast.server.ts')
-		const seasons = await getSeasonListItems({ request, timings })
+		const seasons = await getSeasonListItems({ request, timings, signal })
 		const latestSeasonNumber = seasons.reduce(
 			(max, s) => Math.max(max, s.seasonNumber ?? 0),
 			0,
 		)
 		return latestSeasonNumber || null
 	} catch (error: unknown) {
+		if (isAbortError(error)) return null
 		console.error('podcast-latest-season: failed to load chats seasons', error)
 		return null
 	}
@@ -42,20 +47,24 @@ async function getLatestChatsSeasonNumber({
 async function getLatestCallsSeasonNumber({
 	request,
 	timings,
+	signal,
 }: {
 	request: Request
 	timings?: Timings
+	signal?: AbortSignal
 }) {
 	try {
+		throwIfAborted(signal)
 		// Dynamic import so missing podcast env vars don't crash the whole app.
 		const { getEpisodes } = await import('./transistor.server.ts')
-		const episodes = await getEpisodes({ request, timings })
+		const episodes = await getEpisodes({ request, timings, signal })
 		const latestSeasonNumber = episodes.reduce(
 			(max, e) => Math.max(max, e.seasonNumber ?? 0),
 			0,
 		)
 		return latestSeasonNumber || null
 	} catch (error: unknown) {
+		if (isAbortError(error)) return null
 		console.error('podcast-latest-season: failed to load calls episodes', error)
 		return null
 	}
@@ -64,9 +73,11 @@ async function getLatestCallsSeasonNumber({
 export async function getLatestPodcastSeasonLinks({
 	request,
 	timings,
+	signal,
 }: {
 	request: Request
 	timings?: Timings
+	signal?: AbortSignal
 }) {
 	return cachified({
 		cache,
@@ -78,10 +89,11 @@ export async function getLatestPodcastSeasonLinks({
 		staleWhileRevalidate: 1000 * 60 * 60 * 24,
 		checkValue: latestPodcastSeasonLinksSchema,
 		getFreshValue: async () => {
+			throwIfAborted(signal)
 			const [latestChatsSeasonNumber, latestCallsSeasonNumber] =
 				await Promise.all([
-					getLatestChatsSeasonNumber({ request, timings }),
-					getLatestCallsSeasonNumber({ request, timings }),
+					getLatestChatsSeasonNumber({ request, timings, signal }),
+					getLatestCallsSeasonNumber({ request, timings, signal }),
 				])
 
 			return {