Vue.js Performance Monitoring

1. Install atatus-js from the npm registry:

npm install --save atatus-spa

  Import and initialize atatus to monitor your application:

import * as atatus from  "atatus-spa";

atatus.config ("YOUR_API_KEY").install();

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

import Vue from  "vue";
import * as atatus from  "atatus-spa";

function trackVueExceptions() {
    if (!Vue || !Vue.config) return;

    if (!atatus || !atatus.config) return;
    var _oldOnError = Vue.config.errorHandler;
    Vue.config.errorHandler = function VueErrorHandler(error, vm) {
       atatus.notify(error, {
          extra: {
            propsData: vm.$options.propsData
          }
       });

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

trackVueExceptions();

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

atatus.notify(new Error("Test Atatus Setup"));