Skip to main content

Instrumenting Next Applications for RUM Using Apache

Overview​

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

In this setup:

  • The Next application captures real 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 ObserveOps (formerly known as AIOps) has a valid RUM license.
  • 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 Next.js project directory is available.
  • Permission is granted to modify the Apache SSL configuration file (VirtualHost configuration).

Configuration Steps​

Step 1: Create a RUM Application in Motadata ObserveOps (formerly known as AIOps)

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

From the snippet, note the following values:

  • applicationId
  • clientToken
  • RUM endpoint path (/api/v2/rum)

Step 2: Configure Apache Reverse Proxy for RUM

Step 2.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 2.2: Add Reverse Proxy Rules for RUM

Add the following configuration under the SSL VirtualHost block:

SSLProxyEngine On
 
# Allow backend self-signed SSL certs
SSLProxyVerify none
SSLProxyCheckPeerCN Off
SSLProxyCheckPeerName Off
SSLProxyCheckPeerExpire Off
 
# --- REVERSE PROXY ---
ProxyPass        "/api/v2/rum" "https://172.16.14.71:9477/api/v2/rum"
ProxyPassReverse "/api/v2/rum" "https://172.16.14.71:9477/api/v2/rum"

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

Step 3: Reload Apache

Validate and reload the Apache configuration:

sudo apachectl configtest
sudo systemctl reload apache2

Step 4: Install the RUM SDK in Next

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 5: Create the RUM Initialization Component

Create motadata.tsx file inside src/components folder of your Next.js project and add below code. This component will initialize the RUM SDK and handle the user experience tracking.

Example configuration (replace with your generated values):

File: src/components/motadata.tsx

'use client'
 
import { motadataRum } from '@motadata365/browser-rum';
 
motadataRum.init({
  applicationId: '3',
  clientToken: 'pub9e98c963ec9ad8510a10ea80e26fcfa6',
  site: 'https://test.com',
  service: 'next_apache@8.2.3:Prod',
  env: 'Prod',
  version: '8.2.3',
  sessionSampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'allow',
  trackBfcacheViews: true
});
 
export default function MotadataInit() {
  return null;
}

Step 6: Integrate the RUM Initialization Component in the Root Layout

To apply RUM tracking across your entire Next.js application, integrate the RUM initialization component into the root layout.

File: app/layout.tsx

Import motadata file in app/layout.tsx file.

import MotadataInit from '@/components/motadata';

Then, Add <MotadataInit /> at the root of your app (inside <body>) to initialize tracking across your entire application.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US" dir="ltr">
      <body suppressHydrationWarning={true}>
        <MotadataInit />
        ...
      </body>
    </html>
  )
}

Step 7: Build and Deploy the Next.js Application

Once you have configured the RUM SDK, proceed to build and deploy the Next.js application.

Build the application with the following command:

npm run build

After the build completes, start the application with:

npm start

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.