#How to use NuxtErrorBoundary properly??

16 messages · Page 1 of 1 (latest)

alpine schooner
#

I have a component with the following code:

<template>
    <NuxtErrorBoundary>
      <template #error="{ error }"> Error here: {{ error }} </template>
      <form
        class="flex flex-col gap-4 rounded-lg border border-white px-2 py-4 lg:self-center"
        :state="credentials"
        @submit.prevent="handleLogin">
        <!-- Some code over here -->
      </form>
    </NuxtErrorBoundary>
</template>

<script setup lang="ts">
const handleLogin = async () => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Something is wrong.'
  })
}
</script>

But there are no UI changes here. it does not make sense.

tulip arrowBOT
#

Hi @alpine schooner. 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 you're not seeing the expected UI changes with your NuxtErrorBoundary usage and suggest how to use it properly.

The NuxtErrorBoundary component is designed to handle client-side errors occurring in its default slot. However, there are a few important points to consider:

  1. Error Handling: The NuxtErrorBoundary uses Vue's onErrorCaptured hook internally to catch errors Docs > Api > Components > <NuxtErrorBoundary>.

  2. Client-side vs. Server-side: The component is primarily for client-side error handling. If you're throwing an error on the server-side, it won't be caught by NuxtErrorBoundary Docs > Getting-started > Error Handling > Error Page.

  3. Fatal Errors: By default, createError doesn't create a fatal error on the client-side. To trigger a full-screen error page, you need to set fatal: true Docs > Getting-started > Error Handling > Error Page.

In your case, the issue might be that you're throwing the error in an async function (handleLogin), which is likely not being caught by the NuxtErrorBoundary.

Here's how you can modify your code to make it work as expected:

  1. For client-side error handling:
<template>
  <NuxtErrorBoundary @error="handleError">
    <template #error="{ error }">
      Error here: {{ error }}
    </template>
    <form
      class="flex flex-col gap-4 rounded-lg border border-white px-2 py-4 lg:self-center"
      :state="credentials"
      @submit.prevent="handleLogin">
      <!-- Some code over here -->
    </form>
  </NuxtErrorBoundary>
</template>
#

<script setup lang="ts">
const handleLogin = () => {
throw createError({
statusCode: 400,
statusMessage: 'Something is wrong.',
fatal: true
})
}

const handleError = (error) => {
// You can handle the error here if needed
console.error('Caught error:', error)
}
</script>


2. For server-side error handling, you should use the `error.vue` file in your project root to customize the error page [Docs > Guide > Directory-structure > error.vue](<https://nuxt.com/docs/guide/directory-structure/error>).

Remember that `NuxtErrorBoundary` is primarily for handling client-side errors. If you're dealing with server-side errors or want a full-screen error page, you should consider using `error.vue` or other error handling methods provided by Nuxt.

[Docs > Examples > Advanced > Error Handling](<https://nuxt.com/docs/examples/advanced/error-handling>) provides a comprehensive example of error handling in different contexts, which might be helpful for your use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

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

alpine schooner
#

I don't want a fatal error. I want the error component to show up

#

@tulip arrow

tulip arrowBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Sorry @alpine schooner, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

final vine
#

did you try w/ just a regular Error

#

new Error('...')

final vine
alpine schooner
#

NuxtErrorBoundary is kinda finicky, in all the times I've tried to use it. It seems you always have to render a component to work.

#

I did the following in app.vue and it worked:

<template>
  <NuxtLayout>
    <NuxtErrorBoundary>
      <NuxtPage />
      <template #error>
        ...
      </template>
    </NuxtErrorBoundary>
  </NuxtLayout>
</template>

But i realised it's not what I wanted. When the error is thrown, it replaces the entire page with the contents of the error-slot. My app requirements are to have a floating overlay with the error message.

final vine
#

i'd probably just use the error hook that nuxterrorboundary uses