nuxt: `throw createError` does not show error page on client-side (in development)

As a workaround I use both showError() and createError()

In <script setup> context:

const { data, error } = await useAsyncData(route.path, async () => {
  try {
    const result = await $fetch('/api/call')

    return { result }
  } catch (e) {
    // This will trigger an error page client side
    showError({ message: 'Page not found', statusCode: 404 })
  }
})

if (error.value) {
  // This will trigger an error page server side
  throw createError({ message: 'Page not found', statusCode: 404 })
}

Please update documentation, because this is very confusing

fatal:true is working fine now on version 3.7.1 of nuxt !

This solution works for the moment. But, since it is recommended instead to use throw createError(). I hope it’s fixed in coming updates.

Edit: the clearError function is not being called from the back to home button in case of showError

As a workaround I use both showError() and createError()

In <script setup> context:

const { data, error } = await useAsyncData(route.path, async () => {
  try {
    const result = await $fetch('/api/call')

    return { result }
  } catch (e) {
    // This will trigger an error page client side
    showError({ message: 'Page not found', statusCode: 404 })
  }
})

if (error.value) {
  // This will trigger an error page server side
  throw createError({ message: 'Page not found', statusCode: 404 })
}

If you want an error page displayed on client, you need to set fatal: true in createError. Otherwise we assume you may handle the error with an error boundary or custom error handler.

useAsyncData will never throw an error. You need to handle the contents of error.value.

@danielroe I see that it was closed but the behavior between development and not development is something that at least to me is unexpected and seems more like a bug or design issue based on the discussion above where it is not expected by others.

How do we handle ensuring that we render the same pages in development and production?

The flow as an example

• Authentication library that throws a 403 forbidden error
• Wrapping middleware throws the exception in a way that will should work in the new nuxt3 system

I’ve tried this with and without fatal: true

  throw createError({statusCode: e.statusCode, fatal: true})

Hello, kindly let us know about any planned update on this bug? It’s not possible to show error page on client side as the fatal: true parameter doesn’t work as mentioned in the docs. The only workaround is to make a custom error component and display it in case of error from useFetch() https://nuxt.com/docs/getting-started/error-handling#createerror