Nuxt•4mo ago

Error Boundary (for both csr & ssr)

Since the <NuxtClientFallback> does not work at all and the <NuxtErrorBoundary> is only for client-side, I ve created this custom component. Im currently using this component to handle both client and server side errors to avoid my whole page is being redirected to error.vue instead I want to handle the component that throwing error manually and be able to render the rest of the page. This component (below) is catching most of the errors but when it comes to TypeError, nuxt redirects to error.vue (which Im trying to avoid). I think the problem is nuxt redirects to error.vue just before I could set the error (ref). I've tried this approach with useState too. I've tried to use nuxt hook (app:error) . it is also didnt work. Nuxt version: 3.11.x

<script setup lang="ts">
const error = ref<Error>()

function clearError() {
    error.value = undefined
}

onErrorCaptured((err) => {
    error.value = err
    return false
})

const route = useRoute()
watch(
    () => route.fullPath,
    () => {
        error.value = undefined
    }
)
</script>

<template>
    <slot v-if="!error" />
    <slot v-else name="error" :error="error" :clear-error="clearError" />
</template>

<script setup lang="ts">
const error = ref<Error>()

function clearError() {
    error.value = undefined
}

onErrorCaptured((err) => {
    error.value = err
    return false
})

const route = useRoute()
watch(
    () => route.fullPath,
    () => {
        error.value = undefined
    }
)
</script>

<template>
    <slot v-if="!error" />
    <slot v-else name="error" :error="error" :clear-error="clearError" />
</template>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Error Boundary (for both csr & ssr)