Catch aborted requests

forge-42 · Nov 6, 2024 · 6367ec2 · 6367ec2
1 parent fe72b07
commit 6367ec2
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 45 deletions.
diff --git a/src/client/components/network-tracer/NetworkBar.tsx b/src/client/components/network-tracer/NetworkBar.tsx
@@ -41,7 +41,8 @@ export const NetworkBar: React.FC<NetworkBarProps> = ({
 	const y = index * (barHeight + barPadding) + 24
 	const state = request.endTime ? "finished" : "pending"
 
-	const color = state === "pending" ? COLORS.pending : COLORS[request.type as keyof typeof COLORS]
+	const color =
+		state === "pending" ? COLORS.pending : COLORS[request.aborted ? "error" : (request.type as keyof typeof COLORS)]
 
 	const barWidth = useMotionValue(2)
 

diff --git a/src/client/components/network-tracer/RequestDetails.tsx b/src/client/components/network-tracer/RequestDetails.tsx
@@ -19,9 +19,9 @@ const REQUEST_COLORS = {
 	"client-loader": "border-blue-500",
 	action: "border-yellow-500",
 	"client-action": "border-purple-500",
+	error: "border-red-500",
 }
 export const RequestDetails: React.FC<RequestDetailsProps> = ({ request, onClose, total, order, onChangeRequest }) => {
-	console.log(request)
 	return (
 		<div className=" w-full mt-4 bg-main rounded-lg shadow-xl p-4 z-50">
 			<div className="text-sm">
@@ -40,6 +40,13 @@ export const RequestDetails: React.FC<RequestDetailsProps> = ({ request, onClose
 									{request.type}
 								</div>
 							)}
+							{request?.aborted && (
+								<div
+									className={`w-max flex items-center rounded px-2.5 py-0.5 text-sm font-medium border ${REQUEST_COLORS.error}`}
+								>
+									Request aborted
+								</div>
+							)}
 						</div>
 						<div className="flex ml-auto items-center gap-4">
 							<div className="flex items-center gap-2">

diff --git a/src/client/components/network-tracer/types.ts b/src/client/components/network-tracer/types.ts
@@ -10,6 +10,7 @@ export interface NetworkRequest {
 	data?: Record<string, unknown>
 	headers?: Record<string, string>
 	state: "pending" | "complete" | "error"
+	aborted?: boolean
 }
 export interface Position {
 	x: number

diff --git a/src/client/hof.ts b/src/client/hof.ts
@@ -12,18 +12,33 @@ export const withClientLoaderWrapper = (loader: (args: ClientLoaderFunctionArgs)
 			id: routeId,
 			method: args.request.method,
 		})
-
-		const data = await loader(args)
-		import.meta.hot?.send("request-event", {
-			type: "client-loader",
-			url: args.request.url,
-			headers,
-			startTime,
-			endTime: Date.now(),
-			id: routeId,
-			data,
-			method: args.request.method,
+		let aborted = false
+		args.request.signal.addEventListener("abort", () => {
+			aborted = true
+			import.meta.hot?.send("request-event", {
+				type: "client-loader",
+				url: args.request.url,
+				headers,
+				startTime,
+				endTime: Date.now(),
+				id: routeId,
+				method: args.request.method,
+				aborted: true,
+			})
 		})
+		const data = await loader(args)
+		if (!aborted) {
+			import.meta.hot?.send("request-event", {
+				type: "client-loader",
+				url: args.request.url,
+				headers,
+				startTime,
+				endTime: Date.now(),
+				id: routeId,
+				data,
+				method: args.request.method,
+			})
+		}
 
 		return data
 	}
@@ -34,25 +49,40 @@ export const withClientActionWrapper = (action: (args: ClientActionFunctionArgs)
 		const startTime = Date.now()
 		const headers = Object.fromEntries(args.request.headers.entries())
 		import.meta.hot?.send("request-event", {
-			type: "client-loader",
+			type: "client-action",
 			url: args.request.url,
 			headers,
 			startTime,
 			id: routeId,
 			method: args.request.method,
 		})
 
-		const data = await action(args)
-		import.meta.hot?.send("request-event", {
-			type: "client-loader",
-			url: args.request.url,
-			headers,
-			startTime,
-			endTime: Date.now(),
-			id: routeId,
-			data,
-			method: args.request.method,
+		let aborted = false
+		args.request.signal.addEventListener("abort", () => {
+			aborted = true
+			import.meta.hot?.send("request-event", {
+				type: "client-action",
+				url: args.request.url,
+				headers,
+				startTime,
+				endTime: Date.now(),
+				id: routeId,
+				method: args.request.method,
+			})
 		})
+		const data = await action(args)
+		if (!aborted) {
+			import.meta.hot?.send("request-event", {
+				type: "client-action",
+				url: args.request.url,
+				headers,
+				startTime,
+				endTime: Date.now(),
+				id: routeId,
+				data,
+				method: args.request.method,
+			})
+		}
 
 		return data
 	}

diff --git a/src/server/utils.ts b/src/server/utils.ts
@@ -247,19 +247,13 @@ export type RequestEvent = {
 	startTime: number
 	endTime?: number | undefined
 	data?: any | undefined
-}
-
-const sendEvent = (event: {
-	type: "action" | "loader"
-	headers: Record<string, string>
-	id: string
-	startTime: number
-	endTime?: number | undefined
-	data?: any | undefined
 	method: string
 	status?: string
 	url: string
-}) => {
+	aborted?: boolean
+}
+
+const sendEvent = (event: RequestEvent) => {
 	const port = process.rdt_port
 
 	if (port) {
@@ -328,6 +322,20 @@ export const asyncAnalysis =
 			url: args.request.url,
 			id: routeId,
 		})
+		let aborted = false
+		args.request.signal.addEventListener("abort", () => {
+			aborted = true
+			sendEvent({
+				type,
+				url: args.request.url,
+				headers,
+				startTime,
+				endTime: Date.now(),
+				id: routeId,
+				method: args.request.method,
+				aborted: true,
+			})
+		})
 		const res = await response
 		unAwaited(() => {
 			const end = diffInMs(start)
@@ -336,17 +344,19 @@ export const asyncAnalysis =
 			logTrigger(routeId, type, end)
 			analyzeDeferred(routeId, start, response)
 			analyzeHeaders(routeId, response)
-			sendEvent({
-				type,
-				headers,
-				startTime,
-				endTime,
-				data: res,
-				id: routeId,
-				url: args.request.url,
-				method: args.request.method,
-				status: typeof response === "object" ? (response as any).status : undefined,
-			})
+			if (!aborted) {
+				sendEvent({
+					type,
+					headers,
+					startTime,
+					endTime,
+					data: res,
+					id: routeId,
+					url: args.request.url,
+					method: args.request.method,
+					status: typeof response === "object" ? (response as any).status : undefined,
+				})
+			}
 		})
 		return res
 	}