Vue Integration

Vue.js is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible. Atatus integrates into Vue.js with just a few lines of code.

Track exceptions in Vue apps

To collect errors from Vue app, you need to set up the Vue.config.errorHandler handler for your app.

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();