Nuxt•2mo ago

NuxtErrorBoundary and broken link outside

Can anyone give me some good advice? I intentionally made a /pages/x.vue page with an error. I wrapped the error code via NuxtErrorBoundary and added a button for clearError => this all works fine. But when I'm in that state that NuxtErrorBoundary catches, the other links on the site (header, footer, asides navigation etc). don't work. The URL changes after clicking, but I still see my error. (I will never explain this to the client), how can this be solved? LIVE DEMO: https://portin.netlify.app/

Premium Retail Park Developer

Premier Retail Park Development | Premium Retail Park Developer

Skupina PORTIN ve spolupráci s KPDG a EXAFIN patří mezi nejaktivnější developery v segmentu retailu v České republice. Stavíme obchodní centra (retail parky). Kromě komerčních areálů skupina PORTIN cílí také na další segmenty developmentu - rezidenční výstavbu, výrobní a skladové objekty

12 Replies

kapa.ai•2mo ago

Hi @Kcko. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When you use <NuxtErrorBoundary>, it only catches and displays errors for its slot content, but it does not reset the error state automatically when you navigate to a new route using links elsewhere on the page. This is why, after an error is caught, clicking navigation links updates the URL but the error view remains visible—because the error state inside the boundary is not cleared. How to solve this: You need to ensure that the error state is cleared when navigating away from the error. There are a couple of approaches you can take: 1. Use the clearError function on navigation You can call the clearError() function when a navigation event occurs. For example, you can add a global navigation guard in a plugin to clear errors on every route change:

// plugins/clear-error-on-navigation.ts
export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter()
  router.beforeEach((to, from, next) => {
    clearError()
    next()
  })
})

// plugins/clear-error-on-navigation.ts
export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter()
  router.beforeEach((to, from, next) => {
    clearError()
    next()
  })
})

This ensures that any error state is reset whenever the user navigates to a new route, so the error boundary will not persist the error view after navigation. 2. Use the clearError button You already have a button that calls clearError—this is the intended way to clear the error state within the boundary. However, this requires the user to manually clear the error before navigating. 3. Automatic error clearing on route change According to the Nuxt documentation, navigating to another route should automatically clear the error for the global error page, but for <NuxtErrorBoundary>, you may need to handle this yourself if you want a local error boundary to reset on navigation. The documentation suggests that you can set error = null to re-render the default slot, but you must ensure the error is fully resolved first, or the error slot will just be rendered again Nuxt Error Handling. Summary:
To provide a seamless experience for your users, implement a navigation guard that calls clearError() on every route change. This will ensure that the error boundary resets and navigation links work as expected after an error is caught. If you need more advanced control, you can also programmatically reset the error state in your components or layouts when navigation occurs. References:
- Nuxt Error Handling: clearError - Nuxt Error Handling: NuxtErrorBoundary - Nuxt Error Handling: Render Error in Component ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

KckoOP•2mo ago

I used 2 approach but doesn work for me, url changed but error still stays ... @kapa.ai I used 2 approach but doesn work for me, url changed but error still stays ...

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct—using the clearError button inside the <NuxtErrorBoundary> only clears the error when the user clicks that button. It does not automatically clear the error when navigating via other links (like your header or sidebar navigation). This is expected behavior for <NuxtErrorBoundary>, as it is designed to handle errors locally and does not automatically reset on route changes unless you implement that logic yourself. The Nuxt documentation states that for the global error page, errors are cleared on navigation, but for <NuxtErrorBoundary>, you need to handle this manually if you want the error state to reset on route changes. The recommended way is to set error = null to re-render the default slot, but you must ensure the error is fully resolved first, or the error slot will just be rendered again Render Error in Component. There is no built-in automatic clearing of the error state in <NuxtErrorBoundary> on navigation.
If you want this behavior, you need to watch for route changes inside your component and call clearError() or set the error to null yourself. Here’s a pattern you can use inside your component:

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const error = ref(null)
const route = useRoute()

watch(() => route.fullPath, () => {
  error.value = null // or call clearError() if you have access to it
})
</script>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const error = ref(null)
const route = useRoute()

watch(() => route.fullPath, () => {
  error.value = null // or call clearError() if you have access to it
})
</script>

Or, if you use the #error slot of <NuxtErrorBoundary>, you can use the clearError function provided in the slot props and call it when the route changes. Summary:
- The error state in <NuxtErrorBoundary> is not cleared automatically on navigation. - You must manually clear the error (e.g., by watching the route and calling clearError() or setting error = null). - This is a known limitation and is mentioned in the Nuxt documentation NuxtErrorBoundary docs. If you need a code example for your specific use case, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

KckoOP•2mo ago

@kapa.ai ok how can i do that in my example?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To automatically clear the error in your <NuxtErrorBoundary> when the route changes, you should use the clearError function provided in the #error slot and watch for route changes. The Nuxt documentation shows that the #error slot receives both error and clearError as props, which you can use to clear the error state NuxtErrorBoundary docs. Here’s how you can do it in your example:

<template>
  <NuxtErrorBoundary>
    <!-- Your error-prone content here -->
    <template #error="{ error, clearError }">
      <p>An error occurred: {{ error }}</p>
      <button @click="clearError">Clear error</button>
    </template>
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
import { useRoute, watch } from 'vue-router'

const route = useRoute()

// You need to get access to the clearError function from the slot
let clearErrorFn
function setClearError(fn) {
  clearErrorFn = fn
}

// Watch for route changes and clear the error if needed
watch(
  () => route.fullPath,
  () => {
    if (clearErrorFn) clearErrorFn()
  }
)
</script>

<template>
  <NuxtErrorBoundary>
    <!-- Your error-prone content here -->
    <template #error="{ error, clearError }">
      <p>An error occurred: {{ error }}</p>
      <button @click="clearError">Clear error</button>
    </template>
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
import { useRoute, watch } from 'vue-router'

const route = useRoute()

// You need to get access to the clearError function from the slot
let clearErrorFn
function setClearError(fn) {
  clearErrorFn = fn
}

// Watch for route changes and clear the error if needed
watch(
  () => route.fullPath,
  () => {
    if (clearErrorFn) clearErrorFn()
  }
)
</script>

How this works: - The #error slot provides a clearError function. - You store this function (e.g., via a method like setClearError). - You watch the route, and whenever it changes, you call clearErrorFn() to reset the error state. Note:
You may need to adapt this pattern to your component structure, but the key is to call the clearError function from the slot props when the route changes. This approach is based on the official Nuxt documentation for <NuxtErrorBoundary> and error handling NuxtErrorBoundary docs, Render Error in Component. If you need a more concrete example tailored to your code, please share your component code and I can help you integrate this pattern directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

KckoOP•2mo ago

ok but my navigation is in layout - outside of nuxtErrorBoundary .. different place. .. @kapa.ai ok but my navigation is in layout - outside of nuxtErrorBoundary .. different place. ..

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that your navigation is in the layout, outside of the <NuxtErrorBoundary>. This is a common scenario, and it explains why navigation links do not automatically clear the error state inside the boundary: the error boundary only manages errors for its own slot content, and does not listen to global navigation events. What the documentation says: - <NuxtErrorBoundary> is designed to handle errors locally within its slot. It does not automatically reset its error state on route changes unless you implement that logic yourself NuxtErrorBoundary docs. - The Nuxt docs recommend that if you want to clear the error when navigating, you must do so manually, for example by calling the clearError function provided in the #error slot, or by setting the error to null Render Error in Component. Limitation: - There is no built-in way for <NuxtErrorBoundary> to automatically clear its error state when navigation occurs outside of its scope (such as in a layout or global navigation component). The error boundary does not have awareness of navigation events triggered elsewhere in the app. What you can do: - If you want navigation (outside the error boundary) to clear the error, you would need to implement a communication mechanism between your layout (navigation) and the error boundary. However, the knowledge sources do not provide a built-in or recommended pattern for this scenario. - The only built-in automatic error clearing on navigation is for the global error page (error.vue), not for local error boundaries. Summary:
I'm sorry, but the knowledge sources do not describe a built-in or officially recommended way to automatically clear a <NuxtErrorBoundary> error state when navigation occurs outside of its slot (such as in a layout or global navigation). Manual handling is required, and this is a known limitation of local error boundaries in Nuxt NuxtErrorBoundary docs. If you need global error handling that resets on navigation, consider using the global error page (error.vue) instead of a local error boundary. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

KckoOP•2mo ago

NOT SOLVED

Gaming

Programming

NuxtErrorBoundary and broken link outside

Did you find this page helpful?