fix: handle 404 status of fetch

bubkoo · Sep 1, 2022 · ecfdbcc · ecfdbcc
1 parent b5eae9c
commit ecfdbcc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/dataurl.ts b/src/dataurl.ts
@@ -18,12 +18,21 @@ export async function fetchAsDataURL<T>(
   process: (data: { result: string; res: Response }) => T,
 ): Promise<T> {
   const res = await fetch(url, init)
+  if (res.status === 404) {
+    throw new Error(`Resource "${res.url}" not found`)
+  }
   const blob = await res.blob()
   return new Promise<T>((resolve, reject) => {
     const reader = new FileReader()
     reader.onerror = reject
-    reader.onloadend = () =>
-      resolve(process({ res, result: reader.result as string }))
+    reader.onloadend = () => {
+      try {
+        resolve(process({ res, result: reader.result as string }))
+      } catch (error) {
+        reject(error)
+      }
+    }
+
     reader.readAsDataURL(blob)
   })
 }
@@ -59,6 +68,7 @@ export async function resourceToDataURL(
     contentType,
     options.includeQueryParams,
   )
+
   if (cache[cacheKey] != null) {
     return cache[cacheKey]
   }
@@ -69,9 +79,9 @@ export async function resourceToDataURL(
     resourceUrl += (/\?/.test(resourceUrl) ? '&' : '?') + new Date().getTime()
   }
 
-  let content: string
+  let dataURL: string
   try {
-    content = await fetchAsDataURL(
+    const content = await fetchAsDataURL(
       resourceUrl,
       options.fetchRequestInit,
       ({ res, result }) => {
@@ -82,28 +92,20 @@ export async function resourceToDataURL(
         return getContentFromDataUrl(result)
       },
     )
+    dataURL = makeDataUrl(content, contentType!)
   } catch (error) {
-    let placeholder = ''
-    if (options.imagePlaceholder) {
-      const parts = options.imagePlaceholder.split(/,/)
-      if (parts && parts[1]) {
-        placeholder = parts[1]
-      }
-    }
+    dataURL = options.imagePlaceholder || ''
 
     let msg = `Failed to fetch resource: ${resourceUrl}`
     if (error) {
       msg = typeof error === 'string' ? error : error.message
     }
 
     if (msg) {
-      console.error(msg)
+      console.warn(msg)
     }
-
-    content = placeholder
   }
 
-  const dataurl = makeDataUrl(content, contentType || '')
-  cache[cacheKey] = dataurl
-  return dataurl
+  cache[cacheKey] = dataURL
+  return dataURL
 }
diff --git a/src/index.ts b/src/index.ts
@@ -29,13 +29,13 @@ export async function toCanvas<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<HTMLCanvasElement> {
+  const { width, height } = getImageSize(node, options)
   const svg = await toSvg(node, options)
   const img = await createImage(svg)
 
   const canvas = document.createElement('canvas')
   const context = canvas.getContext('2d')!
   const ratio = options.pixelRatio || getPixelRatio()
-  const { width, height } = getImageSize(node, options)
   const canvasWidth = options.canvasWidth || width
   const canvasHeight = options.canvasHeight || height