Nuxt•14mo 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

useAsyncData

useAsyncData

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)
}

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>

<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

console.log

console.log

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.

kapa.ai•11/10/24, 1:26 PM

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:

kapa.ai•11/10/24, 1:27 PM

----------------------
Based on the information provided in the knowledge sources, I can explain why the error page is not shown when using

useAsyncData

useAsyncData

with createErrorcreateError.

The issue you're experiencing is related to how errors are handled in

useAsyncData

useAsyncData

and how createErrorcreateError behaves on the client side. Here's what's happening:

On the server side, throwing an error with createErrorcreateError would typically trigger a full-screen error page. However,
```
useAsyncData
```
```
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.
On the client side, createErrorcreateError does not automatically trigger a full-screen error page unless you explicitly set fatal: truefatal: 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: truefatal: true."

To address this issue, you have a couple of options:

Use showErrorshowError instead of createErrorcreateError:

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 showErrorshowError 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.

If you prefer to keep using createErrorcreateError, 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>

kapa.ai•11/10/24, 1:27 PM

This approach allows you to explicitly throw the error, which should trigger the error page.

Remember that when using

useAsyncData

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•11/10/24, 1:27 PM

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

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

Similar Threads

Similar Threads

Similar Threads