No timeout for fetch being used by loadGLB, loadOBJ ... (Add the abortcontroller pattern to timeout after 30s) (#142)

Author: imrishabh18

lib/loaders/fetch-with-timeout.ts

@@ -0,0 +1,36 @@
+import type { AuthHeaders } from "../types"
+
+export const DEFAULT_FETCH_TIMEOUT_MS = 30_000
+
+export async function fetchWithTimeout(
+  url: string,
+  {
+    authHeaders,
+    timeoutMs = DEFAULT_FETCH_TIMEOUT_MS,
+  }: {
+    authHeaders?: AuthHeaders
+    timeoutMs?: number
+  } = {},
+): Promise<Response> {
+  const controller = new AbortController()
+  let timedOut = false
+
+  const timeoutId = setTimeout(() => {
+    timedOut = true
+    controller.abort()
+  }, timeoutMs)
+
+  try {
+    return await fetch(url, {
+      headers: authHeaders,
+      signal: controller.signal,
+    })
+  } catch (error) {
+    if (timedOut) {
+      throw new Error(`Request timed out after ${timeoutMs}ms: ${url}`)
+    }
+    throw error
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}

lib/loaders/glb.ts

@@ -7,15 +7,13 @@ import type {
   STLMesh,
   Triangle,
 } from "../types"
-import {
-  COORDINATE_TRANSFORMS,
-  transformTriangles,
-} from "../utils/coordinate-transform"
+import { transformTriangles } from "../utils/coordinate-transform"
 import {
   applyNodeTransform,
   applyQuaternion,
   buildMeshTransforms,
 } from "../utils/gltf-node-transforms"
+import { fetchWithTimeout } from "./fetch-with-timeout"
 import { resolveModelUrl } from "./resolve-model-url"
 
 const glbCache = new Map<string, STLMesh | OBJMesh>()
@@ -37,7 +35,7 @@ export async function loadGLB({
     return glbCache.get(cacheKey)!
   }
 
-  const response = await fetch(resolvedUrl, { headers: authHeaders })
+  const response = await fetchWithTimeout(resolvedUrl, { authHeaders })
   if (!response.ok) {
     throw new Error(
       `Failed to fetch GLB: ${response.status} ${response.statusText}`,

lib/loaders/gltf.ts

@@ -4,14 +4,15 @@ import type {
   OBJMesh,
   STLMesh,
 } from "../types"
+import { fetchWithTimeout } from "./fetch-with-timeout"
 import { parseGLB } from "./glb"
 import { resolveModelUrl } from "./resolve-model-url"
 
 async function fetchAsArrayBuffer(
   url: string,
   authHeaders?: AuthHeaders,
 ): Promise<ArrayBuffer> {
-  const response = await fetch(url, { headers: authHeaders })
+  const response = await fetchWithTimeout(url, { authHeaders })
   if (!response.ok) {
     throw new Error(`Failed to fetch ${url}: ${response.statusText}`)
   }
@@ -33,7 +34,7 @@ export async function fetchGltfAndConvertToGlb(
   url: string,
   authHeaders?: AuthHeaders,
 ): Promise<ArrayBuffer> {
-  const gltfResponse = await fetch(url, { headers: authHeaders })
+  const gltfResponse = await fetchWithTimeout(url, { authHeaders })
   if (!gltfResponse.ok) {
     throw new Error(`Failed to fetch glTF file: ${gltfResponse.statusText}`)
   }

lib/loaders/obj.ts

@@ -11,6 +11,7 @@ import {
   COORDINATE_TRANSFORMS,
   transformTriangles,
 } from "../utils/coordinate-transform"
+import { fetchWithTimeout } from "./fetch-with-timeout"
 import { resolveModelUrl } from "./resolve-model-url"
 
 const objCache = new Map<string, OBJMesh>()
@@ -31,7 +32,7 @@ export async function loadOBJ({
   if (objCache.has(cacheKey)) {
     return objCache.get(cacheKey)!
   }
-  const response = await fetch(resolvedUrl, { headers: authHeaders })
+  const response = await fetchWithTimeout(resolvedUrl, { authHeaders })
   const text = await response.text()
   const mesh = parseOBJ(text, transform)
   objCache.set(cacheKey, mesh)

lib/loaders/step.ts

@@ -11,6 +11,7 @@ import {
   COORDINATE_TRANSFORMS,
   transformTriangles,
 } from "../utils/coordinate-transform"
+import { fetchWithTimeout } from "./fetch-with-timeout"
 import { resolveModelUrl } from "./resolve-model-url"
 
 const stepCache = new Map<string, STLMesh | OBJMesh>()
@@ -61,7 +62,7 @@ export async function loadSTEP({
     return stepCache.get(cacheKey)!
   }
 
-  const response = await fetch(resolvedUrl, { headers: authHeaders })
+  const response = await fetchWithTimeout(resolvedUrl, { authHeaders })
   if (!response.ok) {
     throw new Error(
       `Failed to fetch STEP file: ${response.status} ${response.statusText}`,

lib/loaders/stl.ts

@@ -9,6 +9,7 @@ import {
   COORDINATE_TRANSFORMS,
   transformTriangles,
 } from "../utils/coordinate-transform"
+import { fetchWithTimeout } from "./fetch-with-timeout"
 import { resolveModelUrl } from "./resolve-model-url"
 
 const stlCache = new Map<string, STLMesh>()
@@ -30,7 +31,7 @@ export async function loadSTL({
     return stlCache.get(cacheKey)!
   }
 
-  const response = await fetch(resolvedUrl, { headers: authHeaders })
+  const response = await fetchWithTimeout(resolvedUrl, { authHeaders })
   const buffer = await response.arrayBuffer()
   const mesh = parseSTL(buffer, transform)
   stlCache.set(cacheKey, mesh)