useAsyncData does not pass errors from server to client-side

Environment

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 3.0.0-27294839.7e5e50b
• Package Manager: yarn@1.22.15
• Bundler: Vite

Reproduction

https://stackblitz.com/edit/github-ygz9df?file=app.vue

Describe the bug

On server side the error content is rendered as expected while the client side says it’s null.

Additional context

No response

Logs

No response

[RiccardoCherchi]

After a bit of search trough the ohmyfetch (the library used by nuxtjs mentioned in the documentation) I obtained the status code easily, this is my solution:

<script setup lang="ts">

let errorStatus;
const { data: myData, error: error }: { data: any; error?: any } =
  await useFetch(
    "https://jsonplaceholder.typicode.com/404",
    {
      async onResponseError({ response }) { // onResponseError is a "ohmyfetch" method
        errorStatus = response.status; // assign the error to the declared variable "errorStatus"
      },
    }
  ); 

return { myData, error, errorStatus }; // returning all the variables

</script>

This is my first response to a GitHub issue, hope i wrote it at least understandable

[danielroe]

@nndnha I understand. One note: if you need to get the status code on client side and don’t mind an extra request, you can also rerun the fetch.

const { error, refresh } = await useFetch('https://jsonplaceholder.typicode.com/404');
if (process.client && error.value) {
  await refresh()
}