Inconsistent Error Handling in Nuxt3 with useQuery and useAsyncData

[Rock070]

I have encountered an issue while using Nuxt3, where different combinations of useQuery and useAsyncData with $fetch result in different error handling behaviors. I would like to understand the underlying reasons for this behavior.

Minimum Reproduction: https://stackblitz.com/edit/github-bgz1jd?file=app.vue

Scenario:

1. When using useQuery with $fetch, it leads to a full-screen error.
2. When using useAsyncData with $fetch, the error is caught properly and assigned to the error variable in useAsyncData.

This inconsistency is causing difficulties for me, as I intended to use tanstack-query as the primary asynchronous state management solution. However, unexpected errors during requests result in a full-screen error being displayed on the client-side, which makes the website appear broken instead of simply indicating a request error.

I would appreciate any insights into why this behavior occurs and guidance on how to achieve consistent error handling with useQuery in Nuxt3.

Please let me know if any further information is required.

[Mini-ghost]

@Rock070 I found it is work, check it out

onServerPrefetch(async () => {
  await suspense().catch(() => {})
})

[Mini-ghost]

@DamianOsipiuk Is this expected? I would greatly appreciate hearing your thoughts. Thank you.