Nuxt•2w ago

"useAsyncData" does not show error page on "createError"

Hey there, i want to create a composable for my api. Which just is a wrapper for the useAsyncData component: Within that wrapper i want to throw an global error, in case the api response with a status code >= 500

export default (handler, options) {
   // $client is just an instance of $fetch.create()
   const {$client} = useApiClient()

    return useAsyncData<TRes>(async () => {
        try {
            return await handler($client)
        } catch (e) {
            // global error on api 5xx errors
            if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
                console.log('This line is executed. Condition is true')
                throw createError({
                  fatal: true,
                  status: 500,
                  message: 'Foo'
                })
            }

            throw e
        }
    }, options)
}

export default (handler, options) {
   // $client is just an instance of $fetch.create()
   const {$client} = useApiClient()

    return useAsyncData<TRes>(async () => {
        try {
            return await handler($client)
        } catch (e) {
            // global error on api 5xx errors
            if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
                console.log('This line is executed. Condition is true')
                throw createError({
                  fatal: true,
                  status: 500,
                  message: 'Foo'
                })
            }

            throw e
        }
    }, options)
}

And calling that in my page component:

<script setup lang="ts">
const {data} = await useApiData(($client) => $client('/page/will/be/5xx')))
</script>

<script setup lang="ts">
const {data} = await useApiData(($client) => $client('/page/will/be/5xx')))
</script>

This console.log line is shown in the cli (ssr and csr) but the error-page is never shown, not when refreshing the page or navigating using the vue-router.

2 Replies

kapa.ai•2w ago

Hi @Mähh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can explain why the error page is not shown when using useAsyncData with createError. The issue you're experiencing is related to how errors are handled in useAsyncData and how createError behaves on the client side. Here's what's happening: 1. On the server side, throwing an error with createError would typically trigger a full-screen error page. However, useAsyncData is designed to catch these errors and return them as part of its result, rather than allowing them to propagate and trigger the error page. 2. On the client side, createError does not automatically trigger a full-screen error page unless you explicitly set fatal: true. As mentioned in the Nuxt error handling documentation (https://nuxt.com/docs/getting-started/error-handling#createerror), "on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting fatal: true." To address this issue, you have a couple of options: 1. Use showError instead of createError:

if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
  console.log('This line is executed. Condition is true')
  showError({
    statusCode: 500,
    message: 'Foo'
  })
}

if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
  console.log('This line is executed. Condition is true')
  showError({
    statusCode: 500,
    message: 'Foo'
  })
}

The showError utility (https://nuxt.com/docs/api/utils/show-error) is designed to show a full-screen error page and works in both client and server contexts. 2. If you prefer to keep using createError, you can handle the error manually in your component:

<script setup lang="ts">
const { data, error } = await useApiData(($client) => $client('/page/will/be/5xx'))

// Handle the error
if (error.value) {
  throw createError(error.value)
}
</script>

<script setup lang="ts">
const { data, error } = await useApiData(($client) => $client('/page/will/be/5xx'))

// Handle the error
if (error.value) {
  throw createError(error.value)
}
</script>

This approach allows you to explicitly throw the error, which should trigger the error page. Remember that when using useAsyncData, errors are returned as part of the composable's result rather than being thrown. This is why you need to handle them explicitly if you want to show the error page. Source: Nuxt Error Handling (https://nuxt.com/docs/getting-started/error-handling#createerror) Source: useAsyncData Composable (https://nuxt.com/docs/api/composables/use-async-data) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@465177791592267796> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

"useAsyncData" does not show error page on "createError"