Nuxt•17mo ago

Client side error handling

I'm having trouble handling errors on the client side of an SSR app. They seem to handle fine on the server. In my setup of my "product" page I have the following:

if (!product) {
  throw createError({ statusCode: 404, statusMessage: 'Product not found' });
}

if (!product) {
  throw createError({ statusCode: 404, statusMessage: 'Product not found' });
}

So if I navigate to the URL /shop/some-product-that-doesnt-exist as the initial server rendered route and product above is false, the server handles the error and Nuxt correctly shows my ~/error.vue component. However if I click on a <NuxtLink> to the same location on the client side, nothing happens, error.vue is not rendered, and the console shows:

Uncaught (in promise) Error: Product not found

Uncaught (in promise) Error: Product not found

I've read the error handling docs several times but can't work out what I'm doing wrong, any ideas? Thanks!

1 Reply

rdOP•17mo ago

And of course it's right there in the docs... fatal: true Solved with:

if (!product) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Product not found',
    fatal: true,
  });
}

if (!product) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Product not found',
    fatal: true,
  });
}

Gaming

Programming

Client side error handling