Nuxt•2y ago

404 error handling acting strangely

I'm developing my first Nuxt 3 site and I'm experiencing an issue I'm not used to from v2.

I'm trying to throw an error on a slug page after

useAsyncData

useAsyncData

, either if

throwAsyncData

throwAsyncData

returns an error, or if the data it returns has no value.

It works great on a slug page - if I navigate to it directly or if I refresh it - but if I try to navigate to the slug-with-no-data using a

<nuxt-link>

<nuxt-link>

from elsewhere in the app, rather than navigating to the slug page and showing the error, the address bar updates to show the slug-with-no-data url, nothing happens on the front-end and I get

Uncaught (in promise) Error: Page Not Found

Uncaught (in promise) Error: Page Not Found

in the console.

What can I do to easily handle the error so that it just shows the same 404 as if I visited the slug page directly?

Here's my

createError

createError

const {
    data: service,
    error
} = await useAsyncData(
…

if (error.value ||
    !service.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found'
    });
}

const {
    data: service,
    error
} = await useAsyncData(
…

if (error.value ||
    !service.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found'
    });
}

Edit: I've found the magic

fatal: true

fatal: true

option that seems to do what I want, I'm still interested to know if that's the best way though!

Nuxt•2y ago

tombu

404 error handling acting strangely

I'm developing my first Nuxt 3 site and I'm experiencing an issue I'm not used to from v2.

I'm trying to throw an error on a slug page after

useAsyncData

useAsyncData

, either if

throwAsyncData

throwAsyncData

returns an error, or if the data it returns has no value.

It works great on a slug page - if I navigate to it directly or if I refresh it - but if I try to navigate to the slug-with-no-data using a

<nuxt-link>

<nuxt-link>

from elsewhere in the app, rather than navigating to the slug page and showing the error, the address bar updates to show the slug-with-no-data url, nothing happens on the front-end and I get

Uncaught (in promise) Error: Page Not Found

Uncaught (in promise) Error: Page Not Found

in the console.

What can I do to easily handle the error so that it just shows the same 404 as if I visited the slug page directly?

Here's my

createError

createError

const {
    data: service,
    error
} = await useAsyncData(
…

if (error.value ||
    !service.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found'
    });
}

const {
    data: service,
    error
} = await useAsyncData(
…

if (error.value ||
    !service.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found'
    });
}

Edit: I've found the magic

fatal: true

fatal: true

option that seems to do what I want, I'm still interested to know if that's the best way though!

404 error handling acting strangely

Similar Threads

404 error handling acting strangely

Similar Threads

Similar Threads

Similar Threads