Nuxt•2y 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>

Nuxt•2y ago

TRex

Error Boundary (for both csr & ssr)

<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>

Error Boundary (for both csr & ssr)

Similar Threads

Error Boundary (for both csr & ssr)

Similar Threads

Similar Threads

Similar Threads