Skip to main content
Version: NG-2.15

Browser RUM

Introduction​

In today’s digital landscape, delivering a seamless and responsive web experience is essential for user satisfaction and business success. Browser RUM (Real User Monitoring) empowers organizations with deep insights into how real users interact with web applications. By capturing performance metrics, user interactions, and errors in real time, Browser RUM enables proactive monitoring and optimization of web applications.

With vuSmartMaps Browser RUM, teams can gain end-to-end visibility into page performance, API responsiveness, and user experience, helping to identify bottlenecks, improve load times, and enhance usability. Whether it's monitoring web vitals like Largest Contentful Paint (LCP), First Input Delay (FID), or tracking user journeys, Browser RUM provides actionable data to optimize digital experiences and ensure peak application performance.

Getting Started with Browser RUM​

Understanding Browser RUM Terminologies​

What is RUM?

  • RUM (Real User Monitoring) provides full visibility into how users experience every digital transaction across web, mobile, and custom applications. It helps quickly assess user satisfaction, measure the real-time business impact, and gain a comprehensive view of the user journey.

How Does Browser Real User Monitoring (RUM) Work?

  • RUM functions by embedding code into an application to capture real-time metrics during actual usage. Here's how it works for different types of applications:
    • Browser-Based Applications: JavaScript code is injected to track:
      • Page Loads: Monitors how long it takes for pages to load.
      • XHR Requests: Tracks asynchronous requests that modify the UI without triggering a full page reload.
  • This setup allows continuous monitoring of user interactions and application performance.

What is a User Session?

  • A user session—also referred to as a "visit," "journey," or "clickpath"—represents a series of actions performed by the same user within your application over a defined period.
  • A single session typically includes:
    • Multiple Page or View Loads
    • Third-Party Content Requests
    • Service Requests
    • User Actions (such as clicks or taps)
  • Each session includes at least one user action, providing valuable insights into the user's interactions within the application.

What is a User Action?

  • A user action is an interaction with the end-user interface that triggers a call to a web server, which may involve multiple nested calls. It typically represents a transition from one view to another, initiated by user input.
  • Example User Actions:
    • Page Load
    • Click
    • Touch

What is a Load Action?

  • A load action refers to the process of an actual page loading in the browser. For instance, when you type a URL and press Enter, a load action occurs. During this action, various resources are loaded, including images, HTML, and CSS files, to display the page.

What is XHR Action?

  • "XHR Action" measures the time taken to complete an XMLHttpRequest (XHR), which is a browser API used to send and receive data asynchronously without refreshing the page. This is particularly important for modern web applications that rely on API calls to fetch dynamic content or update the user interface without disrupting the user’s experience. Efficient XHR performance is critical for responsive and seamless applications.

What is Largest Contentful Paint (LCP)?

  • LCP measures the time it takes for the largest visible content element (such as a prominent image, video, or block of text) on a webpage to render fully in the user’s viewport. It is one of the Core Web Vitals defined by Google to evaluate page load performance. LCP is significant because it reflects the moment when the main content of the page becomes visible to users, which is crucial for user satisfaction.

What is First Input Delay (FID)?

  • FID measures the time between a user's first interaction with the webpage (e.g., clicking a link, tapping a button) and the time when the browser begins processing that interaction. It is a Core Web Vital that reflects the responsiveness of the webpage. A low FID ensures a smooth user experience, especially during the critical page loading phase when JavaScript execution might delay responsiveness.

What is Cumulative Layout Shift (CLS)?

  • CLS measures the sum of all unexpected layout shifts that occur on a webpage during its lifecycle. A layout shift happens when visible elements, such as images, buttons, or text, move unexpectedly while the page is still loading or being interacted with. A low CLS score ensures visual stability, preventing issues like accidentally clicking the wrong button due to sudden changes in the layout. CLS is also a Core Web Vital and an important factor for user experience.

Deployment and Configuration​

Achieve seamless real user monitoring by integrating the Browser RUM instrumentation library into the target application. Once integrated, the system begins capturing and forwarding user experience data to vuSmartMaps in real-time, providing deep insights into web application performance. The configuration process for comprehensive monitoring involves two key steps:

  • Configuring vuSmartMaps for Browser RUM: To enable Browser RUM in vuSmartMaps, start by activating the Browser RUM O11ySource and setting up data sources. This step ensures real-time observability into user interactions, page performance, and API behavior, enabling teams to proactively detect and resolve performance bottlenecks.

  • Client-Side Instrumentation: For client-side instrumentation, the next step involves adding the VuNet RUM script to the target application. The process varies based on the deployment environment:

    • Host/VM: Add the script to the application’s codebase and configure the telemetry receiver.
    • Cloud/CDN: The script can be loaded from a Content Delivery Network (CDN) to simplify deployment and updates.
    • Docker: Integrate the script within the container and rebuild the image to ensure data collection.
    • Kubernetes: Deploy the updated container to the cluster, enabling monitoring across distributed environments.

Following these steps, Browser RUM is successfully integrated, allowing continuous tracking of user experience, performance trends, and potential issues for enhanced web application observability.

Browser RUM Dashboards​

The Browser RUM Dashboards, included with Browser RUM, can be accessed by clicking on Dashboards in the left menu. On the Dashboards page, you can find the BRUM BRUM App Catalog using the Search bar. Navigate to the BRUM App Catalog dashboard which is located in the Browser RUM folder.

Once you access the Browser RUM Dashboards, the first page you’ll see is the BRUM App Catalog page, Browser RUM provides a range of dashboards designed to give you meaningful insights into your application's performance.Here are the available dashboards:

  1. Application Overview Dashboard: Offers a high-level summary of browser performance metrics and key indicators.

    • BRUM App Catalog: Offers insights into the various applications within your system, allowing for comprehensive management and analysis.

  2. Detailed Application Metrics Dashboards:Provides a detailed overview of individual services within Browser RUM, including performance metrics, user interactions, and usage statistics.

    • BRUM Overview: summarizes KPIs like total sessions, average page load time, and error rates for a quick assessment of the application's health.
    • BRUM Pages: Tracks metrics like page load times, web vitals, errors, and slow-loading pages to provide insights for performance improvement.
    • BRUM API’s: Shows metrics like API requests, error rates, and response times to identify backend issues impacting user experience.
    • BRUM Long Tasks: Highlights browser tasks that take longer than expected, helping identify bottlenecks and optimize frontend performance.
    • BRUM User Sessions: Provides insights into session details, errors, trends, and correlations with performance data for better troubleshooting.

  3. Trace Listing Dashboards: Provides a list of recent traces, capturing performance details for better analysis and troubleshooting.

  4. Trace Visualization Dashboard:

    • BRUM Trace Map: Offers visually tracks a transaction's journey across services, helping identify delays, errors, and dependencies for detailed performance analysis.

  5. User Session Insights:

    • BRUM User Session Details: Offers session-level analysis, capturing user journeys, performance metrics, and error occurrences.

  6. Geographical Insights:

    • Geo Map: Displays user activity across different geographic locations, helping analyze performance trends and regional impact.

Browser RUM Features​

Key Benefits of Browser RUM​

Browser Real User Monitoring (RUM) offers significant benefits for businesses, providing valuable insights into users' actual experiences when interacting with applications. It helps identify performance issues before they affect many users and supports better decision-making. Here are the key benefits:

  • Improved User Experience: Browser RUM gives real-time insights into how users interact with your website or application, helping identify pain points and optimize workflows. This leads to better user satisfaction and a more seamless experience.

  • Faster Issue Resolution: Unlike traditional performance monitoring tools, Browser RUM captures user issues in real-world scenarios. It enables quick detection and resolution of performance bottlenecks, errors, and usability issues, minimizing downtime and improving system reliability.

  • Enhanced Conversion Rates: By identifying and fixing performance issues that hinder the user journey, such as slow page loads or checkout delays, Browser RUM helps improve conversion rates, which can directly boost revenue.

  • Data-Driven Decision Making: Browser RUM generates valuable data on user behavior and platform performance. This data empowers decision-makers with actionable insights for improving features, making infrastructure investments, and shaping the overall digital strategy.

  • Proactive Performance Optimization: Browser RUM allows businesses to move from reactive problem-solving to proactive optimization. By analyzing user interactions and performance metrics, businesses can spot trends and potential issues early, leading to more strategic improvements and better resource allocation.

  • Tailored Content and Features: With insights into how users navigate your platform, Browser RUM helps identify which content and features resonate most with users. This enables businesses to personalize user experiences, delivering content and features that align with user preferences.

  • Cost Optimization: Browser RUM helps organizations identify performance inefficiencies, enabling them to optimize resources. Whether it's optimizing server usage, improving code, or addressing third-party delays, Browser RUM contributes to cost savings and more efficient resource management.

Use Cases of Browser RUM​

  • Performance Tracking: Browser RUM helps track the performance of web pages, user actions, network requests, and frontend code. It allows you to monitor how well your application is performing and identify areas that may need optimization.

  • Error Management: With Browser RUM, you can monitor ongoing bugs and issues, tracking them over time and across different versions. This makes it easier to identify patterns and address problems before they impact a larger portion of users.

  • Analytics and Usage: Browser RUM provides insights into who is using your application, including details like the user's country, device, and operating system. It also helps track individual user journeys and interactions, allowing you to understand how users engage with different features of the application.

  • Support: Browser RUM allows you to retrieve all the relevant information from a user's session, such as the duration, pages visited, interactions, resources loaded, and any errors encountered. This detailed data helps support teams troubleshoot and resolve issues quickly.

Browser RUM Real-world Applications​

Proactive Performance Monitoring for Retailers

A retailer utilizing RUM monitors their online catalog to detect any increases in page load times. RUM alerts trigger when load times exceed the acceptable threshold, allowing the retailer to quickly identify and address performance issues. This ensures a smooth shopping experience, reducing cart abandonment rates and improving customer satisfaction.

Optimizing Medical Record Systems for Clinicians

A healthcare provider using RUM analyzes a clinician’s clickstream in an electronic medical record (EMR) system to enhance data entry efficiency. By monitoring user interactions, the system identifies bottlenecks in the interface, allowing for targeted improvements that streamline the workflow and improve clinician productivity, ultimately leading to better patient care.

Improving Mobile Device Performance for Apps

An application development team leverages RUM to detect performance discrepancies when their app is accessed from different mobile devices. By monitoring real-time user interactions, the team can pinpoint device-specific issues such as slow load times or crashes, allowing for optimized performance across a wide range of devices and improving the user experience for all customers.

Enhancing Conversion Funnels in E-Commerce

An e-commerce platform employs RUM to track users' paths through the conversion funnel, providing valuable data on where users drop off and how they navigate the site. By analyzing these user journeys, the platform can attribute revenue more effectively and make data-driven decisions to improve conversion rates, ultimately boosting sales.

Identifying Service Latency to Optimize Code

A software development team uses RUM to gain insights into service latency and identify poorly performing code. By tracking user interactions in real-time, developers can quickly detect areas where latency affects the user experience and take immediate action to optimize code, improving the overall application performance and user satisfaction.