CODEWITHSUNDEEP
vue.jsvue-component
Ludohen
Ludohen

Reputation: 8555

How can I catch a vue component mount error

I've a use case where I need to instantiate components myself and to mount them manually. I'd like to catch instantiation and mount error but I can't find how. I've tried just about everything I could think of, Vue.config.errorHandler, vm.errrorHandler, vm.errorCatcher (on the parent) ... but without any luke.

I'm wondering why this is not working ?

try {
  const vm = new MyCustomComponent(); // this is having an error (no template for instance)
  vm.$mount();
} catch (e) {
  console.log(e); // this is never called
}

// manualy attaching the mounted component to the DOM myself afterward.

doc link for reference: https://v2.vuejs.org/v2/api/#vm-mount

Edit: Added a fiddle: https://jsfiddle.net/2pzmn3ue/

Upvotes: 2

Views: 1842

Answers (2)

Hassan Faghihi
Hassan Faghihi

Reputation: 2041

Using Jest Framework, In Vue 2 I did it using the SpyOn and listening to the console.error, and it worked

let hasTypeError = false
jest.spyOn(console, 'error').mockImplementation((err)=> {
    let normalizedErr = err.toString().toLowerCase()
    // *replace with text in your own error*
    if(normalizedErr.indexOf('error')>-1 && normalizedErr.indexOf('only paymenttermtype of') > -1){
        hasTypeError = true
    }
})

// <mount component>

await flushPromises() // not sure if needed - // import flushPromises from "flush-promises";

expect(hasTypeError).toBeTruthy()

Upvotes: 0

IVO GELOV
IVO GELOV

Reputation: 14269

If you take a look at the Vue source code you will notice that this is a warning - not an error. So you should use Vue.config.warnHandler instead of errorHandler. Your handler will take 3 arguments - warning message, component instance and the component trace (which is not a stacktrace).

Upvotes: 2

Related Questions