Misleading error message in useFetch

[henrikaskj]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.18.1
• Nuxt Version: 3.8.1
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: npm@9.8.1
• Builder: -
• User Config: devtools
• Runtime Modules: -

• Build Modules: -

Reproduction

Minimal reproduction: https://stackblitz.com/edit/github-d87l76?file=components%2FPage.vue

Page.vue

<template>
   {{error && [error] || data}}
</template><template>
  <button @click="show=!show">toggle</button>
  <Page v-if="show"/>
</template>
<script setup>
const show = ref(false)
</script>
<script setup>
const {error, data} = await useFetch('https://ord.uib.no/bm/fil/article100new.json')
</script>

app.vue

<template>
  <button @click="show=!show">toggle</button>
  <Page v-if="show"/>
</template>
<script setup>
const show = ref(false)
</script>

After the page has finished loading in the browser, disconnect from the internet, or select 'offline' in the browser devtools. Then click the button to render the Page-component. The error message will be " Failed to fetch", with status code 500.

Describe the bug

When internet connection is lost, useFetch returns it as an internal server error when using an external API: { "cause": "TypeError: Failed to fetch", "message": "[GET] \"https://ord.uib.no/bm/fil/article100new.json\": Failed to fetch", "name": "Error", "statusCode": 500 }

In the browser devtools I see an error code in fetch.js that makes more sense: net::ERR_INTERNET_DISCONNECTED, but I'm unable to capture this with useFetch.

Additional context

The error code is 500 even if SSR is disabled.

Logs

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-d87l76 (Open reproduction)

[manniL]

Sounds like an issue that should be raised in the underlying https://github.com/unjs/ofetch library instead ☺️

As a workaround, you can check the state via navigator or useOnline, or use $fetch.native/$fetch.raw + useAsyncData to create the desired behavior