Skip to main content
Version: NG-2.15

Browser RUM Deployment & Configuration

vuSmartMaps Configuration: Enabling Browser RUM​

  1. Navigate to O11ySources:
    • vuSmartMaps O11ySources can be accessed by navigating from the left navigation menu (Data Ingestion > O11ySources).
  2. Locate Browser RUM O11ySource on the landing page.

  1. Enable Browser RUM O11ySources:
    • Click the Enable button to activate Browser RUM O11ySource.

Data Collection and Processing​

Browser RUM collects real user monitoring data using VuNet’s JavaScript RUM Agent, capturing key performance metrics, user interactions, and errors to provide a complete view of the user experience.

Prerequisites​

To configure the data source, you need the following parameters:

  • Application Name – Specifies the name of the application being monitored.
  • Service Name – Defines the specific service within the application that is being tracked.

Firewall Requirements

To ensure seamless data collection, the following firewall configurations must be in place:

  • The Application Server should be able to communicate with the vuSmartMaps Data Collector over a specific port.
  • The Destination Port used for this connection is 4319 (TCP protocol), but this may need to be adjusted based on the customer’s environment.
  • Data transmission should be enabled inbound from the Application Server to the vuSmartMaps Data Collector.

Configuring Data Sources​

  1. Navigate to the Sources tab and click the + button to add new services to be monitored.
  2. Fill up the Following Details in the Wizard:
    • Application Name: Enter the name of the application you want to monitor for performance and user experience insights.
    • Service Name: Enter the name of the specific service you want to track within the application.

  1. Download the client instrumentation package from the agent configuration wizard.

  1. Follow the instructions provided in the Client Side Browser RUM Instrumentation.

Client Side Browser RUM Instrumentation​

Instrumenting JavaScript Applications​

This section guides you through tracing JavaScript applications using Browser RUM.

Prerequisite​

Before you begin, ensure the following:

  • Configure your web server to act as a reverse proxy for the RUM script.
  • The RUM script should send data to the same web server (e.g., /rum/v1/traces), which forwards it to the OpenTelemetry Collector (e.g., http://<RUM-collector-host>:4319/v1/traces).

Host / Virtual Machine (VM)​

  • Copy the RUM Script: Add /public/js/vunet-rum.js (absolute path) to your application’s codebase, preferably in the js folder.
  • Add the RUM Script to the Page Header: Insert the following code snippet in your HTML file's <head> section:
<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, "vunetRum", document, "/public/js/vunet-rum.js");
window.vunetRum.onReady(function () {
  window.vunetRum.initialize({
    collectionSourceUrl: "VUNET_TELEMETRY_RECEIVER_URL", // Update URL with the URL of the collection source
    serviceName: 'SERVICE_NAME', // mention the service name of the application
    applicationName: 'APPLICATION_NAME', // mention the name of the application
    samplingProbability: 1,
    collectErrors: true,
  });
});
</script>
  • Update the Variables: Replace placeholders in the script:
    • VUNET_TELEMETRY_RECEIVER_URL: URL of the reverse proxy
    • SERVICE_NAME: Service name for the application.
      • Example: 'vubank-frontend'
    • APPLICATION_NAME: Name of the application.
      • Example: 'IBMB'
  • Restart the Web Server: Apply the changes by restarting the server.

Cloud Machine Setup (Using CDN)​

For cloud environments, it is possible to load the JavaScript file from our Content Delivery Network (CDN). Use the following script:

<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, "vunetRum", document, "http://cdn.vunet.io/rum/vunet-rum.js");

window.vunetRum.onReady(function () {
  window.vunetRum.initialize({
   collectionSourceUrl: "VUNET_TELEMETRY_RECEIVER_URL", // Update URL with the URL of the collection source
   serviceName: 'SERVICE_NAME', // mention the service name of the application
    applicationName: 'APPLICATION_NAME', // mention the name of the application
    samplingProbability: 1,
    collectErrors: true,
  });
});
</script>
  • Update the Variables: Replace placeholders in the script:
    • VUNET_TELEMETRY_RECEIVER_URL: URL of the reverse proxy
    • SERVICE_NAME: Service name for the application.
      • Example: 'vubank-frontend'
    • APPLICATION_NAME: Name of the application.
      • Example: 'IBMB'
note
  • Ensure that the CSP is configured to allow loading files from our CDN http://cdn.vunet.io.
  • If the JS file is loaded correctly, then it should function as expected. If there are difficulties in receiving data, verify that the JS file is properly loaded and that the collectionSourceUrl is correct and accessible.

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 to ensure the script is included.

Kubernetes​

For Kubernetes environments, follow these steps:

  • Add the RUM script to your page header as shown above.
  • Rebuild the Docker container and deploy it in your Kubernetes environment to include the updated script.