fix(devtools): show error status's

Author: harlan-zw

client/app.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import { registry } from '../src/registry'
-import { devtools, getScriptSize, humanFriendlyTimestamp, reactive, ref, urlToOrigin } from '#imports'
+import { devtools, fetchScript, humanFriendlyTimestamp, reactive, ref, urlToOrigin } from '#imports'
 import { msToHumanReadable } from '~/utils/formatting'
 
 const scriptRegistry = await registry()
 
 const scripts = ref({})
 const scriptSizes = reactive<Record<string, string>>({})
+const scriptErrors = reactive<Record<string, string>>({})
 
 function syncScripts(_scripts: any[]) {
   // augment the scripts with registry
@@ -26,13 +27,17 @@ function syncScripts(_scripts: any[]) {
         }
         const scriptSizeKey = script.src
         if (!scriptSizes[scriptSizeKey]) {
-          getScriptSize(script.src).then((size) => {
-            scriptSizes[scriptSizeKey] = size
-            script.size = size
-          }).catch(() => {
-            script.size = ''
-            scriptSizes[scriptSizeKey] = ''
-          })
+          fetchScript(script.src)
+            .then((res) => {
+              if (res.size) {
+                scriptSizes[scriptSizeKey] = res.size
+                script.size = res.size
+              }
+              if (res.error) {
+                scriptErrors[scriptSizeKey] = res.error
+                script.error = res.error
+              }
+            })
         }
         return [key, script]
       }),
@@ -192,7 +197,12 @@ function viewDocs(docs: string) {
                       Status
                     </div>
                     <div class="capitalize">
-                      {{ script.$script.status.value }}
+                      <div v-if="scriptErrors[script.src]">
+                        {{ scriptErrors[script.src] === 'TypeError: Failed to fetch' ? 'CORS Error' : scriptErrors[script.src] }}
+                      </div>
+                      <div v-else>
+                        {{ script.$script.status }}
+                      </div>
                     </div>
                   </div>
                   <div v-if="scriptSizes[script.src]">

client/utils/fetch.ts

@@ -1,24 +1,48 @@
-export async function getScriptSize(url: string) {
-  const compressedResponse = await fetch(url, { headers: { 'Accept-Encoding': 'gzip' } })
-  return bytesToSize(await getResponseSize(compressedResponse))
+export async function fetchScript(url: string) {
+  const compressedResponse = await fetch(url, { headers: { 'Accept-Encoding': 'gzip' } }).catch((err) => {
+    return {
+      size: null,
+      error: err,
+    }
+  })
+  if (compressedResponse?.error) {
+    return compressedResponse as { size: null, error: Error }
+  }
+  if (!compressedResponse.ok) {
+    return {
+      size: null,
+      error: new Error(`Failed to fetch ${compressedResponse.status} ${compressedResponse.statusText}`),
+    }
+  }
+  const size = await getResponseSize(compressedResponse)
+  if (!size) {
+    return {
+      size: null,
+    }
+  }
+  return {
+    size: bytesToSize(size),
+  }
 }
 
-async function getResponseSize(response) {
-  const reader = response.body.getReader()
-  const contentLength = +response.headers.get('Content-Length')
+async function getResponseSize(response: Response) {
+  const reader = response.body?.getReader()
+  const contentLength = response.headers.get('Content-Length')
 
   if (contentLength) {
-    return contentLength
+    return Number(contentLength)
   }
-  else {
-    let total = 0
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done)
-        return total
-      total += value.length
-    }
+  if (!reader) {
+    return null
+  }
+  let total = 0
+  let done = false
+  while (!done) {
+    const data = await reader.read()
+    done = data.done
+    total += data.value?.length || 0
   }
+  return total > 0 ? total : null
 }
 
 function bytesToSize(bytes: number) {