Version: NG-3.1

Browser RUM-V2

Introduction

Browser RUM (Real User Monitoring) delivers full visibility into the user experience across every digital transaction in web applications. It captures real user performance data directly from the browser, offering deep insights into page load times, user interactions, and frontend issues to optimize performance in real time.

Getting Started

Compatibility

Browser RUM is supported for the following browsers/runtime:

Google Chrome (Version 131.0.6778.85 and above)

Data Collection Method

GSH Overview

Browser RUM collects real user monitoring data using VuNet’s JavaScript RUM Agent.

The recommended approach is to deploy a proxy server in the DMZ to receive telemetry from users' browsers running the web application. This proxy serves as a secure intermediary between the end-user browsers (where the RUM JavaScript agent executes) and the RUM data collector of the observability platform hosted within the internal network.

Prerequisites

Inputs for Configuring Data Source

Application: Enter the name of the application you want to monitor
SSL Required: Enable TLS communication for Browser RUM ingestion. Once enabled, browser RUM data sent from the application to the vuSmartMaps ingestion endpoint will be securely encrypted. After enabling this feature, follow the additional instrumentation configuration steps provided in the 'TLS Configuration' section of the instrumentation guide.
Traces Sampling Percentage: Specify the sampling percentage for trace data collected by browser RUM agent. A percentage number between 0 and 100 is to be provided. If 0% is used, RUM agent will not collect any traces. If 100% is used, RUM agent will collect and send all traces. When a number between 0 and 100 is used, the RUM agent will send the specified percentage of traces using a random sampling policy.
Session Replay Sampling Percentage: Specify the sampling percentage for session replay data collected by the browser RUM agent. A value between 0 and 100 must be provided.
If set to 0% , the RUM agent will not collect any session replay data.
If set to 100% , session replay data will be captured and sent for all user sessions.
For values between 0 and 100, the RUM agent uses a normalized percentage function to decide whether a session is selected for replay. The decision is based on the following logic: percentage(base + replayPercentage * RandomJitter) < replayPercentage

base : A numeric value generated by hashing the session ID (originally a string). RandomJitter : A randomness factor that can vary by ±25% to ensure better distribution across sessions. percentage : A function that normalizes the result to always fall within the range of 0 to 100.

Values above 100 (e.g., 105) are capped at 100.
Values below 0 (e.g., -5) are raised to 0. If the normalized value is less than the configured replayPercentage , the session is selected for replay. This mechanism helps control the volume of session replay data while maintaining fair and balanced sampling across sessions.
Allowed Origins: Allowed Origins: Comma-separated list of origins permitted to access the OpentTelemetry Collector. Example: "http://example.com,https://app.example.com,http://localhost:3000" If not specified, defaults to "*" (allow all origins)
Allowed Headers: Allowed Headers: Comma-separated list of HTTP headers permitted in CORS requests Example: "Content-Type,Authorization,X-Requested-With" If not specified, defaults to "*" (allow all headers)

Firewall Requirement

To collect data from this O11ySource, ensure the following ports are opened:

Source IP	Destination IP	Destination Port	Protocol	Direction
Browser	Proxy Server	443	TCP	Inbound
Proxy Server	vuSmartMaps Web Services	443	TCP	Outbound
Proxy Server	vuSmartMaps OTEL Collector	4329*	TCP	Outbound

*Before providing the firewall requirements, please update the port based on the customer environment.

Configuring the Target

Modify the application's front end code to include Vunet's JavaScript RUM Agent using CDN or NPM based on your environment. The complete instructions for instrumentation can be downloaded as a package from the Browser RUM O11ySource.

Configuration Steps

GSH Overview

- *``
Enable
``**
the Browser RUM O11ySource.

Select the sources tab and press the
- *``
+
``**
button to add a new application that has to be monitored.

Provide the required configurations:

Application Name

SSL

Trace Sampling %

Session Replay %

Allowed Origins

Allowed Headers

Afterwards, select
- *``
Save and Continue
``**
to proceed with downloading the java script instrumentation package

Then click
- *``
Finish
``**
to close the data source window.

Integrating RUM SDK

Obtain the RUM SDK files.

With CDN access: Use the vunet-hosted CDN file directly:

https://cdn.vunet.ai/rum/vunet-rum-loader-v3.1.js

Offline / on-premises: Download the required SDK files using wget:

wget https://cdn.vunet.ai/rum/vunet-rum-core-v3.1.js wget https://cdn.vunet.ai/rum/vunet-rum-loader-v3.1.js wget https://cdn.vunet.ai/rum/vunet-rum-session-replay-v3.1.js

Add the RUM script to your HTML file's <head> section.

If CDN access is available:

If CDN access is not available: Replace the src attribute with the local path where the SDK file was copied:

Rebuild and deploy the updated application to apply changes.

Metrics Collected

The metrics are based on the input data collected.

Introduction​

Getting Started​

Compatibility​

Data Collection Method​

Prerequisites​

Inputs for Configuring Data Source​

Firewall Requirement​

Configuring the Target​

Configuration Steps​

Metrics Collected​