Browser RUM

Introduction

Browser Real User Monitoring (RUM) in vuSmartMaps captures frontend performance data from real user interactions. This helps in understanding actual user experience, debugging performance issues, and optimizing web application performance.

Getting Started

Compatibility

Browser RUM is supported for the following browsers/runtime:

• Google Chrome (Version 131.0.6778.85 and above)

Data Collection Method

The Real User Monitoring data is collected by Vunet's JavaScript RUM Agent.

Prerequisites

Inputs for Configuring Data Source

• app_name: Enter the name of the application you want to monitor.
• service name: Enter the name of the service you want to monitor.

Firewall Requirement

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

Source IP	Destination IP	Destination Port	Protocol	Direction
Application Server	vuSmartMaps DataCollector	4319*	TCP	Inbound

*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 can be downloaded as the package from the Browser RUM O11ySource.

Configuration Steps

Prerequisites

1. A public access to Vunet RUM telemetry receiver.This is needed as the RUM scriptruns in the end user’s browser and it sends data to vuSmartMaps directly.You can also use a reverse proxy.
2. The VuNet RUM telemetry receiver allow the cross-origin request from the application host.

Host

Following are steps to instrument the Java Script applications.

1. Copy the rum.vunet.js to the application codebase. It is preferable to keep it in the js folder.
2. Add the RUM script to your page header.

       <script> 
       

       (function (w, s, d, r, e, n) {
        

        (w[s] = w[s] || {
        

        readyListeners: [],
        

        onReady: function (e) {
        

        w[s].readyListeners.push(e);
        

        },
        

        }),
        

        ((e = d.createElement('script')).async = 1),
        

        (e.src = r),(n = d.getElementsByTagName('script')[0]).parentNode.insertBefore(e, n);
        

        })(
        

        window,
        

        'sumoLogicOpenTelemetryRum',
        

        document,
        

        'rum.vunet.js', // add the instrumentation package in the project and mention thepath here.
        

        );
        

        window.sumoLogicOpenTelemetryRum.onReady(function () {
        

        window.sumoLogicOpenTelemetryRum.initialize({
        

        collectionSourceUrl: "<VUNET_TELEMETRY_RECEIVER_URL>", //mention the urlwhere the otel collector is running
        

        serviceName: '<SERVICE_NAME>',// mention the service name of the application
        

        applicationName: '<APPLICATION_NAME>', // mention the name of the application
        

        samplingProbability: 1,
        

        collectErrors: true,
        

        });
        

        });
        

       </script>

• Replace the VUNET_TELEMETRY_RECEIVER_URL with the URL of the VuNet telemetry receiver.
• Replace the SERVICE_NAME with the service name that matches your environment.c. Replace the APPLICATION_NAME with the application name that matches your environment.

3. Restart the web server

Container

Adding the RUM script to your page header is a code change.Please follow the steps mentioned in the above section and rebuild the docker container.

Kubernetes

Adding the RUM script to your page header is a code change. Please follow the steps mentioned in the above section and rebuild the docker container to use it with Kubernetes

Metrics Collected

Name	Description	Data Type
timestamp	Event time	DateTime64
traceId	Trace ID	String
spanId	Identifier for the span within the trace	String
span_parentSpanId	ID of the parent span. Empty if the span is the root span in the trace	String
span_name	Logical name of the operation that the span represents. documentLoad / resourceFetch / Navigation	String
span_kind	Server or Client or Internal or Producer or Consumer	String
span_start_time	Start time	DateTime64
span_end_time	End time	DateTime64
span_durationNano	Duration	UInt64
status_code	Status code for the span. 0 - Not set, 1 - OK, 2 - Error	UInt8
is_root_span	Is root span	Bool
resource_attributes_application	Application name	LowCardinality(String)
resource_attributes_service_name	Service name	LowCardinality(String)
span_attributes_browser_name	Client’s Browser	LowCardinality(String)
span_attributes_os_name	Client’s OS	LowCardinality(String)
span_attributes_http_url	URL	String
span_attributes_instrumentation_library_name	Library used for instrumentation. This is useful to identify the application component	String
span_attributes_location_href	The caller URL	String
span_attributes_rum_session_id	Session ID	String
span_attributes_dns_lookup_time	The time taken to resolve the hostname for a target URL	UInt64
span_attributes_tcp_connect_time	The time taken to establish a TCP connection to the server (including SSL)	UInt64
span_attributes_secure_connect_time	The time taken to secure the connection established to the server. This includes the SSL handshake and SOCKS	UInt64
span_attributes_request_time	The time taken to request the page from the server until the first byte is received.	UInt64
span_attributes_response_time	The time taken to receive the response	UInt64