Instrumenting Vue.js Applications for RUM Using Apache

Overview

This guide explains how to instrument a Vue.js application for Real User Monitoring (RUM) and route browser RUM data through Apache to the Motadata backend.

In this setup:

The Vue.js app captures user experience data using the Motadata RUM SDK.
Apache forwards the RUM payloads to Motadata using a reverse proxy route (/api/v2/rum).

Prerequisites

Ensure the following requirements are met before proceeding:

Motadata AIOps has a valid license and access for RUM.
The Apache server must be able to communicate with the Motadata backend over TCP port 9477, with connectivity available in both directions.
Access to the Vue.js project directory is available.
Permission is granted to modify the Apache SSL configuration file (VirtualHost configuration).

Step 1: Create a RUM Application in Motadata AIOps

Go to Settings > Real User Monitoring > Applications and click the Create Application button.
Provide all the required information, selecting Apache as the deployment type.
Click the Register Application button. This will display the RUM initialization snippet on the screen.
Copy the generated RUM initialization code snippet.

From the snippet, note these values:

applicationId
clientToken
RUM endpoint: for example, /api/v2/rum

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 (use your generated values):

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

motadataRum.init({
  applicationId: '4',
  clientToken: 'pubXXXXXXX',
  site: 'https://motadata.com',
  service: 'rum_vue_apache@1.2:PROD',
  env: 'PROD',
  version: '1.2',
  sessionSampleRate: 60,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
  trackBfcacheViews: true
});

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

Step 4: Configure Apache Reverse Proxy for RUM

Step 4.1: Open Apache SSL VirtualHost Config

Edit your Apache SSL site configuration file.

Example:

sudo vi </etc/apache2/sites-available/ui-ssl.conf>(apache.config file path) 

info

Use your actual Apache configuration file path if different.

Step 4.2: Add Reverse Proxy Rules for RUM

Add the following configuration under the SSL VirtualHost block:

SSLProxyEngine On
SSLProxyVerify none
SSLProxyCheckPeerCN Off
SSLProxyCheckPeerName Off
SSLProxyCheckPeerExpire Off

ProxyPreserveHost On

ProxyPass "/api/v2/rum" "https://<MOTADATA_BACKEND_IP>:9477/api/v2/rum"
ProxyPassReverse "/api/v2/rum" "https://<MOTADATA_BACKEND_IP>:9477/api/v2/rum"

After configuring this, Apache forwards the RUM payloads received from the browser to the Motadata backend.

Step 5: Reload Apache

Validate and reload Apache configuration:

sudo apachectl configtest
sudo systemctl reload apache2

Step 6: Build and Deploy the Vue Application

Build the Vue app:

npm run build

Restart Apache if required:

sudo systemctl restart apache2

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