Real User Monitoring (RUM)

Introduction

vuSmartMaps platform supports Real User Monitoring (RUM) to provide end-to-end visibility into the real-time activity and experience of individual users. This comprehensive solution offers real-time insights into your application’s frontend performance and user journeys. Leveraging RUM O11ySource, you can visualize and analyze the real-time performance of your application’s users, monitoring various aspects of your browser applications.

Prerequisites

Before getting started, ensure your application meets the following requirements:

• Language Compatibility: JavaScript
• Version: JavaScript 6 or above

Ensure vuSmartMaps is installed and running to enable comprehensive real-time performance monitoring and analysis for your application.

Key Features

• AI-powered Distributed Tracing: Gain insights into the entire user journey with AI-powered distributed tracing.
• Business Context Enhancement: Enhance RUM data with business context, such as revenue and voice-of-customer data.
• Complete Visibility: Capture full customer experience visibility across every digital transaction.
• Session Replay Capabilities: Understand the full context of user actions with session replay capabilities.
• O11ySource Integration: Visualize and analyze your application’s real users’ real-time performance and user journeys.

Benefits of Real User Monitoring

• Insights into User Experiences: Understand how users interact with your application in real-time.
• Early Issue Identification: Identify and resolve performance issues before they impact too many users.
• Verification of SLAs: ITOps can use RUM data to verify service level agreements (SLAs).
• Improved UX Design: UX designers can streamline the user interface based on RUM data.
• 100% Observability: Gain total observability into actual real user experiences.
• Accelerate Performance Improvement: Resolve performance issues faster with real-time insights.
• Align IT and Business: Connect user experience with business outcomes for better decision-making.
• Optimize Across Development, Operations, and User Journey: Streamline processes and enhance the overall user journey.

RUM Implementation

Real User Monitoring (RUM) serves as a vital tool for customers seeking to closely observe and analyze user interactions within their applications in real-time. By incorporating JavaScript code into the browser, RUM enables the collection of valuable user OTEL logs, offering comprehensive insights into the behavior and experiences of users engaging with the application.

This monitoring mechanism facilitates a multifaceted understanding of application usage patterns. For instance, RUM empowers application owners by furnishing them with granular insights into user navigation paths within the application. Additionally, it sheds light on crucial performance metrics such as application loading times, providing a comprehensive view of the user experience. By gauging the influx of new users and their interactions with the application, RUM equips stakeholders with essential data to make informed decisions and optimize user engagement strategies.

VuNet’s RUM solution, with O11ySource integration, provides a comprehensive view of user sessions, click paths, and error analysis.

• Monitor User Journeys: Understand user behavior across web and custom apps.
• Error Analysis: Identify and understand why errors occur for proactive issue resolution.
• User Session Comparison: Compare bounced sessions, converted sessions, and user types for insights.

Enable RUM O11ySource and Configure Datasources

1. Navigate to O11ySources:
   • vuSmartMaps O11ySources can be accessed by navigating from the left navigation menu (Data Ingestion > O11ySources).
     
     
     
     
2. Locate Real User Monitoring O11ySource on the landing page.
   
   
   
3. Enable RUM O11ySources:
   • Click the Enable button to activate RUM O11ySource.
     
     
     
4. Configure Datasource:
   • Navigate to the Sources tab and click the + button to add new services to be monitored.
     
     
     
5. Fill up the Following Details in the Wizard:
   • Specify Applications Group: Define the group to which your applications belong.
   • Specify Head Sampling Probability: Set the probability for head sampling.
6. Configure Sampling Policies:
   • Choose from various sampling policies based on your monitoring needs.
     1. Allow All: Samples every incoming piece of data without any condition.
     2. Allow based on Latency: Set a threshold in terms of processing time or latency to sample data.
     3. Allow based on Numeric Attributes: Sample data based on numeric attribute values within specified ranges.
     4. Allow a Percentage: Sample data based on a defined probability or percentage.
     5. Allow based on Status: Sample data based on specific HTTP status codes.
     6. Allow based on String Attributes: Sample data based on specific string attribute values.
     7. Limit on Rate: Limit the rate at which data is sampled based on a defined frequency.
        
        
        
        
7. Click Save and Continue:
   • Save the configurations to proceed.
8. Download the Client Instrumentation Package:
   • Visit the Instrumentation Package tab and download the client instrumentation package.

Following these steps, you have successfully enabled RUM O11ySource and configured the data sources for real-time performance monitoring and analysis.

Browser RUM SDK Metrics

The Browser RUM SDK collects metrics for the following events:

1. User Session: Track a user browser session. The unique session ID tracks all events. A session ends when there is no activity in the browser for 15 minutes.
2. Page View: The user visits a page of the web application. The resource, long-task, error, and action events are linked to the page view.
3. Resource: A resource event is generated for images, XHR, Fetch, CSS, or JS libraries loaded on a webpage.
4. Long Task: A long task event is generated for any task in the browser that blocks the main thread for more than 50ms.
5. Error: The JavaScript errors.
6. User Actions: User actions like clicks are tracked. This will enable tracking of Rage Clicks (clicks on an element rapidly), Dead Clicks (clicks on a static element), and Error Clicks (clicks on an element right before a JavaScript error).

RUM Dashboards

Our Real User Monitoring (RUM) dashboards provide a comprehensive and intuitive way to analyze the performance and user interactions within your applications. With a focus on key metrics, these dashboards empower you to make informed decisions and enhance the overall user experience.

The Real User Monitoring Overview Dashboard is a centralized hub for monitoring various aspects of your application’s frontend performance. It includes panels such as Server Time, Network Time, Browser Time, DocumentLoad Time, XHR Time, Long Task Time, Events Sequence Timings, Web Vitals GeoMap, Requests by Browser, Requests by OS, Web Vital – Largest Contentful Paint, and more. Each panel is designed to offer specific insights into different dimensions of your application’s performance and user behavior.

These dashboards provide an in-depth view of web application performance as shown below.

Web Vitals and Geo dashboards give a view into different facets of user experience providing instant feedback on loading, interactivity, and layout shift metrics.

The most important web vitals are:

• Load Performance – Largest Contentful Paint (LCP) Time for the largest content element within the viewport of a web page to be fully rendered and visible to the user. Reflects the user’s perception of how quickly a web page loads and becomes usable. A slow LCP time can lead to user frustration and potentially impact search engine rankings.​
• Interactivity: First Input Delay (FID) Time for a web page to respond to a user’s first interaction like a click, tap, or keypress. Reflects how quickly a web page becomes interactive and responsive to user input. A fast FID ensures that users can interact with a website without experiencing frustrating delays or unresponsiveness.
• Visual Stability: Cumulative Layout Shift (CLS) The sum of all unexpected layout shifts in a web page as it loads – happens when an element on the page changes position without user interaction and prior notice. High CLS scores can lead to a poor user experience because unexpected layout shifts can cause users to click on the wrong elements, and lose their place on the page.

The Trace Details Dashboard delves deeper into specific performance metrics, providing detailed information on Server Time, Network Time, Browser Time, Events Sequence, and Trace Events Table. These panels offer a granular view of individual trace events, allowing you to pinpoint issues and optimize performance at a micro level.

By leveraging these dashboards, you gain a holistic understanding of your application’s real user experiences. Identify bottlenecks, track key performance indicators, and optimize your application for seamless user interactions. VuNet’s RUM dashboards are tailored to provide actionable insights, ensuring you have the necessary information to deliver an exceptional user experience and achieve optimal business outcomes.

Session Replay

The Session Replay facility in vuSmartMaps enhances user experience monitoring by capturing and visually recreating users’ web navigation. Along with Real User Monitoring (RUM) performance metrics, it aids in pinpointing, replicating, and solving errors, while offering insights into usage trends and design shortcomings of your web application.

vuSmartMaps RUM Browser SDK comes packaged with a user session recorder that tracks and collects the DOM (Document Object Model) and CSS (Cascading Style Sheets) portions used in the web application pages. In addition, the recorder will capture mouse actions, inputs from users, and changes in DOM structure.

Based on this telemetry collected and sent over an efficient open telemetry compliant transport channel, the vuSmartMaps platform stitches together the web application pages, user actions, and page responses.

The collected telemetry for session replay is stored in a compressed format in the internal vuSmartMaps data store. The session replay telemetry is retained in the system based on the data retention policies that are configurable.

RUM Alerts

vuSmartMaps alert system ensures proactive monitoring and notification of critical performance metrics within your applications. By configuring alerts based on specific criteria, you can stay informed about potential issues and take timely action to maintain optimal user experiences.

The alert configuration encompasses a range of metrics and thresholds tailored to highlight performance deviations and anomalies. Here’s a brief overview of the configured alerts:

1. Overall Load time High for Page: Monitors the duration of page loads, focusing on the 90th percentile (P90) of load times. Alerts are triggered based on specific threshold values, with a warning threshold set at 5 seconds.
2. Web Vitals – Largest Contentful Paint is high: Tracks the Largest Contentful Paint (LCP) metric, indicating the time taken to render the largest element on a page. Alerts are categorized as warning or critical based on threshold values exceeding 2.5 seconds and 3.5 seconds, respectively.
3. Web Vitals – First Input Delay is high: Monitors the First Input Delay (FID), which measures the time between a user’s interaction and the browser’s response. Thresholds are set to trigger warnings or critical alerts when FID exceeds 150ms and 250ms, respectively.
4. Web Vitals – Cumulative Layout Shift: Focuses on the Cumulative Layout Shift (CLS), indicating unexpected layout shifts during page load. Alerts are categorized based on warning and critical thresholds exceeding 0.1 and 0.25, respectively.
5. Load time high for Geolocation: Monitors page load times based on geographical locations, triggering warnings for load times exceeding 5 seconds.
6. High Network Time: Tracks network-related metrics, such as latency and response times, with a warning threshold set at 5 seconds.
7. High Browser rendering time: Monitors frontend rendering times, with alerts triggered when rendering times exceed 5 seconds.
8. High Server Time: Alerts on high server-side processing times, providing warnings when processing times exceed 5 seconds.
9. High XHR Response time: Focuses on XMLHttpRequest (XHR) response times, triggering warnings when response times exceed 5 seconds.

Each alert is designed to provide timely notifications and insights into potential performance bottlenecks, enabling you to address issues promptly and ensure optimal user experiences across your applications. With proactive alerting, you can maintain the reliability and responsiveness of your applications, ultimately enhancing user satisfaction and engagement.

Key Takeaways

• VuNet’s Browser RUM offers real-time insights into front-end performance and user journeys. Compatible with JavaScript (Version 6+), it provides AI-powered tracing, business context enhancement, complete visibility, session replay, and O11ySource integration.
• For end-users, VuNet’s Browser RUM delivers insightful real-time experiences, proactively resolves performance issues, ensures service level agreement compliance, facilitates UX enhancements, and guarantees optimal user interactions.
• Incorporate JavaScript code for collecting user OTel logs, offering granular insights into user behavior and experiences.
• RUM dashboards centralize frontend performance monitoring with panels like Server Time, Network Time, Browser Time, and more.
• vuSmartMaps alerts ensure timely notification on critical performance metrics, enabling quick issue resolution and optimal user experiences.