vue-in-production.md

Using Vue in Production

Error Reporting Example.

This could also be wrapped in the conditional above with true being live environment and false being dev environment.

---

Inside your require block where you're instantiating Vue or using Vue at all this is a great thing to add.

It ensures you can see and catch those errors on local, but not blow up the console on live.

Vue.config.silent = /cms30.localhost/.test(document.location.href) ? false : true;
Vue.config.devtools = /cms30.localhost/.test(document.location.href) ? true : false;

Also Vue has a way to handle errors, if you wanted to do some bug reporting, or wanted to go a little further.

Vue.config.errorHandler = function (err, vm, info) {
	// do what you need
	// err is the reported error from vue. 
	// vm is the vue instance
	// info is additional info passed
};

---

// this can also be added to the Global Vue root instance. as a plugin
// so one could call Vue.liveEnv or vm.devEnv for usage accross the board.
var vmLive = /cms30.localhost/.test(document.location.href) ? false : true;

Vue.config.errorHandler = function (err, vm, info) {
	if (vmLive) {
		gtm.sendEvents({
			tBugLog : {
				eventCategory : 'Vue Errors', // nest all errors in this category that are vue related
				eventAction : document.domain, // quickly determine which client has the error
				eventLabel : document.location.href // quickly determine the page the error happened on 
				errorInfo : info, // vue specific error info such as which part in the lifecycle hook the error occurred. (useful for debugging)
				errorDetails : err // the actual error
			}
		});
	}
};