Vue Integration - Real User Monitoring

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

For NPM and YARN

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

Install atatus-spa from the npm or yarn registry:

copy

npm install --save atatus-spa
Or
yarn add atatus-spa

Import and initialize atatus to monitor your application:

copy

import * as atatus from 'atatus-spa';
atatus.config('YOUR_API_KEY').install();

For CDN

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

<script src="//dmc1acwvwny3.cloudfront.net/atatus-spa.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. You're done.

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

Test Integration

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

copy

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

Within few seconds, performance metrics and errors will appear in your project dashboard.

Track exceptions in Vue 3 apps

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

copy


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

const app = Vue.createApp({});

// Vue 3.x Atatus Error Handler
function trackVueExceptions(app) {

    const prevHandler = app.config.errorHandler;

    app.config.errorHandler = function VueErrorHandler(error, vm, info) {

        atatus.notify(error, {
            info: info
        });

        if (typeof console !== 'undefined' && typeof console.error === 'function') {
            console.error(error);
        }

        if (typeof prevHandler === 'function') {
            prevHandler.call(this, error, vm, info);
        }
    };
}
trackVueExceptions(app)


app.mount('#app');

Track exceptions in Vue 2 apps

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

copy

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

function trackVueExceptions() {
    // 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 prevHandler = 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 console !== 'undefined' && typeof console.error === 'function') {
            console.error(error);
        }

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

trackVueExceptions();