I've custom throw at component created() method.
throw new Error(`Cookie ${cookieName} not exist.`);
And vue logs it into console:
[Vue warn]: Error in created hook: "Error: Cookie showLanguageInfo not exist."
How can I implement throwing this error without this vue log?
Please remove the below line from created hook. The below line is throwing error without any real exception.
throw console.error("error");
Related
I have an error with Vue-Router, when click to the route-link component wasn't loaded.
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read properties of >undefined (reading 'id')"
found in
at assets/organisms/manage/ManageWorkFlowOverview.vue
Do you have an idea of the origin of the problem ?
Thanks in advance.
Best regards,
Jérémy
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'get' of undefined"
found in
---> <Anonymous>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property 'get' of undefined
at VueComponent.mounted (/home/ubuntu/vue-testing-skel/src/components/ChatApp.vue:66:1)
The line that is causing the error:
this.current_nickname = this.$cookies.get('nickname')
this.$cookies is provided by a module called vue-cookies
I have it installed and saved in my devDependencies, but it seems jest is unable to find it or load it.
I'm not sure what I have to do to make sure Jest is loading these modules properly.
Testing with Jest is meant to be self-contained. This means that global objects like this.$cookies are not available since they are interfacing with the cookies in your browser. The way to solve this is to mock the global functions. More info on how to do that here:
https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n
To build off of #Imre_G 's answer, you need to specify a $cookies key inside your mount() or shallowMount() function, like so:
wrapper = shallowMount(ComponentName, {
localVue,
...
mocks: {
$cookies: {
get: jest.fn().mockReturnValue(null),
set: jest.fn(),
}
}
});
I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu component, the router-view and, which uses v-if to optionally display an ErrorDisplay component if the error data item is set. I set this from an err state variable in the Vuex store.
That is where I want to get to. However, I think the problem is more fundamental.
In a lower component, I have a submit function that gets called when I click the submit button. To test error handling I have put
throw new Error('Cannot Submit');
In my Main.js I have
handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler
All of these should just call the errHandler function, which just calls an action to update the err variable in the state. The hope being that this will then result in the ErrorDisplay component showing on my top level component.
However, I have console.log statements as the first statement in all the above handlers and in my errHandler function. None of these console.logs are getting executed.
In the Console in Chrome, I am just seeing
[vue warn]: Error in v-on handler: "Error: Cannot Submit"
So it is getting the text from my throw, but none of the error handlers seem to be capturing this?
Vue provides Global configuration config.errorHandler to capture error inside Vue components Globally.
As per Official Docs
Assign a handler for uncaught errors during component to render function and watchers. The handler gets called with the error and the Vue instance.
This is how it can be used:
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in. Only available in 2.2.0+
}
Official docs
Hope this helps!
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.
I have a problem in my Vue.js application
Indeed, my component is working properly, however I have errors in the console because it seems to me that the component is rendered several times during its life cycle, and the first time, when it is rendered, it does not find not my races variable at the time of the display because the method db.collection ('courses') has not yet run. How to do?
thank you
My code on JsFiddle:
firestore() { }
https://jsfiddle.net/gf9qhsjr/1/
The Error :
vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot
read property 'title' of undefined"
There's some error rasied on my page, and vue-router warning:
[vue-router] Uncaught error during transition:
I wonder how to catch it and remove this warning? From vue-router's doc, I cannot find a hook function handle errors. I also tried to catch error
router.beforeEach((transition) => {
try {
transition.next()
} catch (e) {
transition.abort()
console.log('route caught', e)
}
})
Although I can catch the error now, but the warning still raised, and I don't know if I did the right thing.
And there is another warning when error raised
[vue-router] transition.next() should be called only once.
How to get rid of this?
You cannot use a promise AND call next use either one or the other