Recientemente me encontré con vue-error-boundary, cuya idea me gusta mucho y me gustaría implementarla en mis propios proyectos.

Quiero usar las características de vue-error-boundary para cargar un componente con un error en lugar de bloquear mi aplicación. Sin embargo, por alguna razón, todo lo que puedo hacer es hacer que funcione el accesorio on-error , el componente se carga pero con una advertencia y la aplicación aún falla.

Para fines de reproducción: CodeSandbox

me sale el siguiente error:

 Vue warn]: Unhandled error during execution of render function at <ImUnstable> at <VErrorBoundary on-error=fn<bound TriggerMe> fall-back= {render: ƒ render(), __hmrId: "6505c1f8", __file: "src/components/ContactError.vue"} >

CÓDIGO:

Aplicación.vue:

 <template> <VErrorBoundary :on-error="TriggerMe" :fall-back="fallBack"> <ImUnstable /> </VErrorBoundary> </template> <script> import { markRaw } from "vue"; import VErrorBoundary from "vue-error-boundary"; import ImUnstable from "@/components/ImUnstable.vue"; import ContactError from "@/components/ContactError"; export default { components: { ImUnstable, VErrorBoundary, }, name: "App", data() { return { fallBack: markRaw(ContactError), }; }, methods: { TriggerMe() { console.log("It Triggered"); }, }, }; </script>

ImUnstable.vue:

 <template> <div v-for="user in users" :key="user.id"> <p> {{ user.name }} {{ makeLarge(user.surname) }} {{ user.age }} </p> </div> </template> <script> export default { errorCaptured() { console.log("let me see"); }, data() { return { users: [ { id: 1, name: "Luke", surname: "Skywalker", age: "22" }, { id: 2, name: "Han", surname: {}, age: "35" }, ], }; }, methods: { makeLarge(data) { return data.toUpperCase(); }, }, }; </script>

ContactError.vue:

 <template> <div> <p>There was an issue obtaining contact's information.</p> </div> </template>