Fix 404 hero action and match URL display

Author: cursoragent

app/components/errors.tsx

@@ -209,7 +209,7 @@ function PossibleMatchesSection({
 function asNotFoundMatchFromResourceSearch(value: unknown): NotFoundMatch | null {
 	if (!value || typeof value !== 'object') return null
 	const v = value as Record<string, unknown>
-	const url = typeof v.url === 'string' ? v.url.trim() : ''
+	const url = normalizeNotFoundUrl(typeof v.url === 'string' ? v.url : '')
 	if (!url) return null
 	const titleRaw = typeof v.title === 'string' ? v.title.trim() : ''
 	const segmentRaw = typeof v.segment === 'string' ? v.segment.trim() : ''
@@ -226,6 +226,19 @@ function asNotFoundMatchFromResourceSearch(value: unknown): NotFoundMatch | null
 	}
 }
 
+function normalizeNotFoundUrl(value: string) {
+	const trimmed = value.trim()
+	if (!trimmed) return ''
+	if (trimmed.startsWith('/')) return trimmed
+	if (!trimmed.startsWith('http')) return trimmed
+	try {
+		const parsed = new URL(trimmed)
+		return `${parsed.pathname}${parsed.search}${parsed.hash}`
+	} catch {
+		return trimmed
+	}
+}
+
 function FourOhFour({
 	articles,
 	possibleMatches: possibleMatchesProp,
@@ -266,6 +279,11 @@ function FourOhFour({
 	}, [fetcher.data])
 
 	const possibleMatches = possibleMatchesProp ?? fetchedMatches
+	const heroAction = possibleMatches?.length ? (
+		<ArrowLink to="#possible-matches">Possible matches</ArrowLink>
+	) : (
+		<ArrowLink href="/">Go home</ArrowLink>
+	)
 
 	return (
 		<ErrorPage
@@ -276,7 +294,7 @@ function FourOhFour({
 				title: "404 - Oh no, you found a page that's missing stuff.",
 				subtitle: `"${pathname}" is not a page on kentcdodds.com. So sorry.`,
 				image: <MissingSomething className="rounded-lg" aspectRatio="3:4" />,
-				action: <ArrowLink to="#possible-matches">Possible matches</ArrowLink>,
+				action: heroAction,
 			}}
 		/>
 	)