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

Agent Installation

If you want to include Atatus script with your source, you can take it from package managers such as CDN, YARN and NPM.

With NPM

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    npm install --save atatus-js
    

    Import and initialize atatus to monitor your application:

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

    For more advanced options on installing your monitoring code, view customizing agent.

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

    copy
    icon/buttons/copy
    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();
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With YARN

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    yarn add atatus-js
    

    Import and initialize atatus to monitor your application

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

    For more advanced options on installing your monitoring code, view customizing agent.

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

    copy
    icon/buttons/copy
    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();
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With CDN

Installation

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

    copy
    icon/buttons/copy
    <script src="//dmc1acwvwny3.cloudfront.net/atatus.js"></script>
    <script type="text/javascript">atatus.config('YOUR_API_KEY').install();</script>
    

    For more advanced options on installing your monitoring code, view customizing agent.

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

    copy
    icon/buttons/copy
    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();
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

Track exceptions in Vue apps

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

copy
icon/buttons/copy
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();