Setting up Vue monitoring is easy

This short and simple guide will get you familiar in integrating Atatus with Vue apps
and start tracking error and performance.

Vue

Install Setup Code

Copy & paste this code into the <head> tag of your html (every page) to start using Atatus on your Vue app. Please make sure that you add it before other script tags as well.

<script src="//dmc1acwvwny3.cloudfront.net/atatus.js"> </script>
<script type="text/javascript"> atatus.config('YOUR_API_KEY').install(); </script>
Replace the YOUR_API_KEY string with the API Key that is assigned for your project.

Add atatus to the vue.js error handler

function trackVueExceptions(atatus, Vue) {
  var Vue = Vue || window.Vue;
  var atatus = atatus || window.atatus;

  // quit if Vue isn't on the page
  if (!Vue || !Vue.config) return;

  // quit if atatus isn't on the page
  if (!atatus || !atatus.config) return;

  var _oldOnError = Vue.config.errorHandler;
  Vue.config.errorHandler = function VueErrorHandler(error, vm) {
      atatus.notify(error, {
        extra: {
          componentName: Vue.util.formatComponentName(vm),
          propsData: vm.$options.propsData
        }
      });

      if (typeof _oldOnError === 'function') {
          _oldOnError.call(this, error, vm);
      }
  };
}

trackVueExceptions();

Send an event

Just reload your page now. That's it! You've sent your first event.