CODEWITHSUNDEEP
vue.jsvuejs2
Alexandr Vysotsky
Alexandr Vysotsky

Reputation: 1131

Vuejs, catch warnings in production mode

Our app use templates from magento and sometimes it trigger errors(e.g. wrong props or special chars). These errors will be muted in production mode.

But we should to track it by TrackJs. So, is it possible to catch warnings in production mode?

Warnings example:

[Vue warn]: Error compiling template:

Upvotes: 2

Views: 5907

Answers (1)

Ferrybig
Ferrybig

Reputation: 18834

When Vue is run in production mode,all errors are hidden bij design, this is not something that can be changed, expect by running the development version. The reason behind this is that inside production, you should ideally pre-compile all your templates using your build tool or custom backend.

In development, you can use an errorHandler and a warnHandler inside the Vue config:

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+
    console.log('Custom vue error handler: ', err, vm.name, info);
};
Vue.config.warnHandler = 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+
    console.log('Custom vue warn handler: ', err, vm.name, info);
};

// Prevent vue from spamming the console with "helpful" tips
Vue.config.productionTip = false;

var app = new Vue({
    el: '#app',
    name: 'main',
    template: '<div></div><div></div>',
    data: {
        message: 'Hello Vue!'
    },
});
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
</div>

For template problem, Vue uses the warn handler, but for errors thrown from methods, it uses the errorhandler

Upvotes: 6

Related Questions