Instrumenting Vue.js Applications for RUM Using Other Deployment

Overview

This guide explains how to instrument a Vue.js application for Real User Monitoring (RUM) when deployed without a reverse proxy such as Apache or Nginx.

In this setup:

The Vue.js application captures user experience data using the Motadata RUM SDK.
The application forwards RUM payloads directly to the Motadata backend over tcp port 9477.

Prerequisites

Ensure the following requirements are met before proceeding:

Motadata AIOps has a valid license and access for RUM.
Ensure that the application server can communicate with the Motadata backend over TCP port 9477, with connectivity enabled in both directions.
Access to the Vue.js project directory is available.

Step 1: Create a RUM Application in Motadata AIOps

Navigate to Settings > Real User Monitoring > Applications and click the Add Application button.
Provide the required details and select Other as the deployment type and click the Register Application button. This will display the RUM initialization snippet on the screen.
Copy the generated RUM initialization snippet snippet.

From the snippet, note the following values:

applicationId
clientToken

Step 2: Install the RUM SDK in Vue.js

An active internet connection is required during the initial installation of the SDK package. Open terminal and navigate to your Vue project directory and run the following command:

npm install @motadata365/browser-rum

info

Internet access will also be required whenever an SDK is updated and needs to be applied.

Step 3: Initialize RUM in main.js

Open your Vue application’s main.js file and add the RUM initialization code snippet after completion of import library commands.

note

While pasting the command snippet, ensure that all brackets remain intact and are not modified or removed.

Example configuration (replace with your generated values):

import { motadataRum } from '@motadata365/browser-rum';

motadataRum.init({
  applicationId: '5',
  clientToken: 'pubb0c7189c00bb204336ab99954f616e33',
  site: 'https://172.16.15.197:9477',
  service: 'rum_vue_other@8.0:dev',
  env: 'dev',
  version: '8.0',
  sessionSampleRate: 50,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask',
  trackBfcacheViews: true
});

After configuration, the Angular application captures the real user experience data and sends the data to the Motadata backend for monitoring.

Step 4: Build and Deploy the Vue Application

Build the Vue application:

npm run build

Once the above configuration is completed, the onboarded application may take a few minutes to reflect in the Rum Explorer, displaying live user insights and performance diagnostics.

Overview​

Prerequisites​

Overview

Prerequisites