The RUM Browser SDK collects resources and assets for every RUM view (page load): XMLHttpRequest (XHRs) and Fetch requests, but also images, CSS files, JavaScript assets, and font files. A RUM Resource event is generated for each one of them, with detailed timings and metadata.

RUM Resources inherit from all the context related to the active RUM View at the time of collection.

To get even more complete, end-to-end visibility into requests as they move across layers of your stack, connect your RUM data with corresponding backend traces. This enables you to:

  • Locate backend problems that resulted in a user-facing error.
  • Identify the extent to which users are affected by an issue within your stack.
  • See complete end-to-end requests on the flame graphs, allowing you to seamlessly navigate between RUM and APM and back with precise context.

See Connect RUM and Traces for information about setting up this feature.

APM Trace information for a RUM Resource

Resource timing and metrics

Detailed network timing data for resources is collected from the Fetch and XHR native browser methods and from the Performance Resource Timing API.

AttributeTypeDescription
durationnumberEntire time spent loading the resource.
resource.sizenumber (bytes)Resource size.
resource.connect.durationnumber (ns)Time spent establishing a connection to the server (connectEnd - connectStart).
resource.ssl.durationnumber (ns)Time spent for the TLS handshake. If the last request is not over HTTPS, this metric does not appear (connectEnd - secureConnectionStart).
resource.dns.durationnumber (ns)Time spent resolving the DNS name of the last request (domainLookupEnd - domainLookupStart).
resource.redirect.durationnumber (ns)Time spent on subsequent HTTP requests (redirectEnd - redirectStart).
resource.first_byte.durationnumber (ns)Time spent waiting for the first byte of response to be received (responseStart - RequestStart).
resource.download.durationnumber (ns)Time spent downloading the response (responseEnd - responseStart).

Note: If you are having trouble collecting detailed timing for some resources, see Resource timing and CORS.

Resource attributes

AttributeTypeDescription
resource.typestringThe type of resource being collected (for example, css, javascript, media, XHR, image).
resource.methodstringThe HTTP method (for example POST, GET).
resource.status_codenumberThe response status code.
resource.urlstringThe resource URL.
resource.url_hoststringThe host part of the URL.
resource.url_pathstringThe path part of the URL.
resource.url_queryobjectThe query string parts of the URL decomposed as query params key/value attributes.
resource.url_schemestringThe protocol name of the URL (HTTP or HTTPS).
resource.provider.namestringThe resource provider name. Default is unknown.
resource.provider.domainstringThe resource provider domain.
resource.provider.typestringThe resource provider type (for example first-party, cdn, ad, analytics).

Identify third-party resources

RUM infers the name and category of the resource provider from the resource URL host part. If the resource URL host matches the current page URL host, the category is set to first party. Otherwise, the category will be cdn, analytics, or social for example.

Resource timing and CORS

The Resource Timing API is used to collect RUM resource timing. It is subject to the cross-origin security limitations that browsers enforce on scripts. For example, if your web application is hosted on www.example.com and it loads your images via images.example.com, you will only get timing for resources loaded hosted on www.example.com by default.

To resolve this, enable extended data collection for resources subject to CORS by adding the Timing-Allow-Origin HTTP response header to your cross-origin resources. For example, to grant access to the resource timing to any origin, use Timing-Allow-Origin: *. Find more about CORS on the MDN Web Docs

Further Reading