N
Nuxt•2w ago
NightFuries

How to use NuxtErrorBoundary properly??

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>
<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.
5 Replies
kapa.ai
kapa.ai•2w ago
Hi @NightFuries. 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>
<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. 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 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: ----------------------
kapa.ai
kapa.ai•2w ago
<@711113525023735809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
NightFuries
NightFuriesOP•2w ago
I don't want a fatal error. I want the error component to show up @kapa.ai
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: Sorry @NightFuries, 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?
NightFuries
NightFuriesOP•2w ago
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>
<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. Ohh that's a good idea, i didn't know about this. I'll check it out asap.

Did you find this page helpful?