Skip to content

Monitoring RUM Network Call Performance

Overview

Network Performance Monitoring for Real User Monitoring (RUM) tracks and analyzes the performance of network calls made by your front-end application. It provides insights into the frequency of different call types, the volume of data transferred, and their impact on user experience. This is crucial for ensuring that the network infrastructure is efficient, reliable, and responsive.

Use the RUM Network Performance Monitoring to track actual user interactions with your application, providing real-time data about network call performance as experienced by users. It can significantly enhance front-end developers' ability to diagnose and address network-related performance issues.

  • Get an overview of network performance, highlighting key metrics such as average response time and success rate.
  • Use interactive graphs to explore trends, pinpointing periods of high error rates or spikes in network activity.
  • Explore individual network calls in detail through the network calls grid, analyzing metrics such as response time, data transfer, and user impact.
  • Differentiate between a front-end bug and a back-end API issue caused by the front-end.
  • Use the drill-down screen to get a more detailed view of the network call you select.

For detailed descriptions of how users interact with a network call performance to achieve specific goals, see the [Typical use case] section below.

Monitoring network call performance metrics

View your RUM network call performance metrics on the Network Performance page (RUM > Network Performance).

  • Enter free text or use queries in the search bar to find errors.
  • Select the timeframe for which you want to view your network calls.
  • Select a Network Calls or Resources view.
  • Filter the network calls.
  • View the network performance KPIs.
  • Use the graph to analyze error data for each KPI.
  • Get the overview of all network calls made by the application via the network call table.

Network Call and Resources view

  1. Use the Network Calls and Resources buttons to switch between the view modes:
    • Network calls only.
    • Network calls in relation to the website resources (graphics, JavaScript, CSS, etc).

KPIs

This overview of network performance provides a comprehensive snapshot of key performance indicators (KPIs).

  • User Count: Total number of users.
  • Network Count: Number of repetitive calls.
  • Error Rate: Percentage of error calls among repetitive requests.
  • Duration: The time taken for the call to receive a response.
  • Data Transferred: The size of the response.
  • Apdex: Performance measurement according to the duration of network request.

Main graph

The Graph section presents detailed visualizations that break down error data per each KPI, as illustrated below. In the Graph section:

  • Use the drop-down to select the desired KPI: Requests, Errors, Users, Data Transferred, Duration or Apdex.
  • Hover over a segment to view the data distribution for that specific time point. Alternatively, click and drag across the graph to zoom in on a specific time range for a more detailed view.
  • Display errors as both their total count and percentage of total network calls.
  • Group errors by various criteria such as network fragment, method, type, etc (see Grouping below).
  • In the graph legend, click the ellipsis (…) in a data series, and select one of the following actions:
    • Filter In - Include only the selected network call into the query.
    • Go to Trace - Display the network call trace on the Explore page.
    • Copy Value - Copy data series name.
    • Copy Query - Copy a query underlying the network call.

Grouping

  1. Use the Group by bar to add or remove attributes from the error group. Any changes will be reflected in both the graph and the network call table. You can select multiple grouping attributes, depending on the view mode (Network Calls or Resources):
    • Network Calls:
      • Network Fragment: The portion of the URL representing the resource being accessed.
      • Method: The HTTP request method (e.g., GET, POST).
      • Type: The type of resource being requested (e.g., API, image).
      • Status Code: The HTTP response code indicating the result of the request.
      • Status Text: A descriptive text corresponding to the HTTP status code.
      • Scheme: The protocol used for the request (e.g., HTTP, HTTPS).
      • Device: The type of device making the request (e.g., desktop, mobile).
      • Browser: The web browser making the request (e.g., Chrome, Firefox).
      • Operating System: The OS on the device making the request (e.g., Windows, iOS).
      • App Version: The version of the app making the request.
    • Resources:
      • Network Fragment: The part of the URL identifying the resource being loaded.
      • Type: The category of the resource (e.g., script, style, image).
      • Status Code: The HTTP response code for the resource request.
      • Device: The type of device accessing the resource.
      • Browser: The browser used to load the resource.
      • Operating System: The OS of the device accessing the resource.
      • App Version: The application version initiating the resource load.
  2. Reorder the attributes to adjust the order of the graph legend and table columns.

Network call table

The network call table offers a comprehensive overview of all network calls made by the application, presenting key metrics that reflect performance and user impact.

Each row of the grid represents an individual network call, providing a detailed snapshot of its performance. This view is particularly valuable for in-depth analysis and troubleshooting of specific requests, allowing developers to closely examine various aspects of each call, such as response time, data size, success rate, etc.

Actions

  1. Hover over a network call, then click the ellipsis that appears and choose one of the following actions from the drop-down menu:
    • Filter: Filter the view by the chosen value.
    • Trace: Display trace where the error occurred.
    • Copy query: Copy the query of the row.
    • Copy network call: Copy the network call name.

Network call details

  1. Click on a network call in the table to view its detailed information. In addition to the standard network call information fields, side panel displays the header and payload details:
    • Headers: Displays metadata for network requests and responses, including request methods, response status codes, content types, cookies, and authentication tokens. This information is valuable for debugging and analyzing request-response interactions.
    • Payload: Shows the body of the network request or response, such as JSON, form data, or raw text. This helps in analyzing the content being transmitted.

Filters

On the left-hand sidebar, you can filter your network call metrics according to network fragment, page URL, request status code, etc.

image.png

Typical use case

The use case below focus on investigating network call anomalies, specifically demonstrating how to analyze a high error count in a webpage segment.

Investigating high error count

Detect network calls with error spikes, identify the likely cause, and continue the investigation using the service trace.

Scenario

An excessive error count has been detected in a specific webpage segment, as shown below.

Solution

  1. Use the Filter sidebar to focus on a specific network fragment (api/v1/logquery).

    image.png

  2. In the Group by dropdown, browse through the network call attributes to identify those with the highest impact. For example, a specific application version is responsible for the majority (81.5%) of the errors.

    image.png

  3. Additionally, you can view the trace associated with the network call to identify the trace with the highest number of errors. Return to the Network Fragment display, hover over the network call row, click the ellipsis, and select Go To Trace to view the network call trace.

  4. Use the Service and Span views of the trace to identify the problematic segment.

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to reach out to us via our in-app chat or by sending us an email to [email protected].