Sign In

Assets Module

The javascript SDK should automatically instrument most assets fetched by the application. This includes images, stylesheets, scripts, and other assets. But if you may wish to instrument assets manually.

Span conventions

Span Operations

Span OPDescription
resource.scriptJavscript was fetched by the browser
resource.cssA Stylesheet was fetched by the browser
resource.imgAn Image was fetched by the browser

Span Description

The description of an asset span should be the full URL which is was fetched from, e.g. https://cdn.com/main.hash123.js.

Span Data

Data KeyTypeDescriptionConditions
http.response_content_lengthintencoded size of the asset in bytes (what is sent over the network)required on all asset operations
http.decoded_response_content_lengthintthe decoded size of the asset in bytesrecommended on all asset operations
http.response_transfer_sizeintthe size of the encoded asset plus the response headers in bytesrecommended on all asset operations
resource.render_blocking_statusstringwether the resource blocks UI rendering, values are 'non-blocking' or 'blocking'recommended on all asset operations

Instrumentation

Once an application fetches an asset, the SDK creates a new span based on the operation.

Example

Consider a basic HTML file that fetches a single script:

Copied
<head>
  <script src="https://cdn.com/main.hash123.js"></script>
</head>

Should result in the following span, assuming the request was successful:

Copied
{
  "description": "https://cdn.com/main.hash123.js",
  "op": "resource.script",
  "data": {
    "http.decoded_response_content_length": 123,
    "http.response_content_length": 123,
    "http.response_transfer_size": 123,
    "server.address": "cdn.com",
    ... other span properties
  }
}
You can edit this page on GitHub.