Nuxt•2y ago

Redirect to parent on error

I'm quite new to Nuxt3 and building my first app. What i would like to achieve is the following: When a fetch request throws an Error i create and show the error using de default error.vue page. On this page i have a script that checks if there is a parent page, if so it navigates to the parent route, if it is not the case it continues ending up on the homepage of the app where it clears the error and shows the homepage.

const route = useRoute()
const routePath = computed(() => route.path)
const routePathArray = routePath.value.split('/')
const routeToPath = routePathArray.slice(0, -1).join('/')

onBeforeMount(() => {
  if (routePath.value !== '/' || routeToPath !== '') {
    navigateTo(routeToPath, { replace: true })
  } else {
    clearError()
  }
})

const route = useRoute()
const routePath = computed(() => route.path)
const routePathArray = routePath.value.split('/')
const routeToPath = routePathArray.slice(0, -1).join('/')

onBeforeMount(() => {
  if (routePath.value !== '/' || routeToPath !== '') {
    navigateTo(routeToPath, { replace: true })
  } else {
    clearError()
  }
})

This redirecting works but it's far from a smooth experience. I see a lot of flickering between layouts and pages and it looks like the homepage is rendered twice. Furthermore the error page html is rendered in the meanwhile. What i think would be better is to trigger errorhandling code before we start rendering a error page, but i have not found any solution for that idea. Could anybody give me some tips/hints how this feature could be implemented so it integrates with Nuxt3 flawlessly? - Is it better/possible to catch the error before rendering a vue page e.g. with routeMiddleware? - Could i overwrite the default errorHandling using a plugin or something? - Are there other ideas, how to implement this kind of error handling for 404 responses from my backend server?

1 Reply

ronaldkonjerOP•2y ago

For now i managed to improve this functionality by moving the redirect logic form the generic error.vue page to the ofetch factory where i use the onResponseError interceptor to get the status of the response. If that is 404 we apply the navigateTo logic. Otherwise we create an Nuxt3 error.

Gaming

Programming

Redirect to parent on error