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	4322*	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.


Instrumenting JavaScript Applications
This section guides you through tracing JavaScript applications using Browser RUM. For detailed instructions, refer to the documentation
Before you begin, ensure the following:


Configure your web server as a reverse proxy to serve the RUM script and forward trace data, or use a dedicated proxy server for receiving RUM traces.


The RUM script should send data to the proxy at the following endpoint:

https://<proxy_address>/rum/v1/traces,

which forwards it to the OpenTelemetry Collector:

https://<RUM-collector-host>:4329/v1/traces


The instrumentation would require the JavaScript to be added to html pages by editing/updating the html pages and adding the <script> tag.


The method of editing/updating HTML files depends on the technology used for the web application:


JavaScript-based applications (JS, Angular, React):

For Single Page Applications (SPA): edit the main HTML file (typically index.html) to include the <script> tag.
For Multi Page Applications: update all main HTML pages to include the <script> tag.



Server-side rendered applications (PHP, JSP, ASP.NET): the HTML files are generated dynamically by the server. Insert the <script> tag via server-side code (e.g., in header.php, _Layout.cshtml, etc.).




Ensure that the application and environment allow externally loaded or inline scripts to be executed, since the RUM SDK is loaded as a script.


Host / Virtual Machine (VM)
Add the RUM Script to the Page Header by inserting the following code snippet in your HTML file's
<head> section:

<script

id="vunet-rum"

async

crossorigin="anonymous"

src="https://your-cdn/vunet-rum-loader.ie.js"

data-collection-source-url="https://collector.example.com/rum"

data-service-name="my-service"

data-service-namespace="my-app"

></script>

NOTE: Rebuild and deploy the updated application to your hosting environment to apply changes and ensure that the CSP is configured to allow loading files from our CDN
https://cdn.vunet.ai/rum/vunet-rum-core-v3.1.0.js

Container
For containerized environments, follow these steps:

Add the RUM script to your page header as shown above.
Rebuild the Docker container with the updated codebase.

Kubernetes
For Kubernetes environments, follow these steps:

Add the RUM script to your page header as shown above.
Rebuild and redeploy the Docker container in your Kubernetes environment.

Metrics Collected

The metrics are based on the input data collected.