Assets
Learn more about browser asset performance monitoring, which allows you to debug the performance of loading JavaScript and CSS on your frontend.
This view is only available on Team and Business plans. On Team plans, you won't be able to query data that's more than 7 days old. To enable querying for all your data, upgrade to the Business or Enterprise plan.
If you have performance monitoring enabled for your frontend, you can see how your browser assets are performing in Sentry.
Starting with the Assets page, you get a high-level overview of how your assets are doing. From there, you can drill into a specific asset's Asset Summary page and then investigate sample events from the Sample List to better understand the context of its performance in a specific page.
The asset pages are only available for frontend JavaScript projects with performance monitoring enabled. Currently only JavaScript, CSS, images, and certain assets that are initiated by CSS (such as fonts), are supported.
For the best experience, we recommend enabling automatic instrumentation via the BrowserTracing
integration for your frontend project to see asset performance data. This is supported for the following JavaScript platforms:
Sentry tries to extract metrics by looking at asset-related spans.
The JavaScript SDK automatically generates asset
spans on pageload
and navigation
transactions using the browser's Resource Timing API.
If you are using automatic instrumentation, asset monitoring should work without any configuration.
If you've manually instrumented Sentry, you'll need to make sure that your spans conform to our standards for the best experience:
- The span
op
field is prefixed withresource
(for example,resource.script
orresource.css
). - The span's
description
contains the URL of the loaded resource, which should correspond to the PerformanceResourceTiming name field. - The
http.response_transfer_size
span data value is set to the total transfer size of the resource. - The
http.response_content_length
span data value is set to the encoded body size of the resource. - The
http.decoded_response_content_length
span data value is set to the decoded body size of the resource. - The
resource.render_blocking_status
span data value is set to the render blocking status of the resource.
Here's an example snippet of creating a resource span manually with the SDK.
// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const startTime = msToSec(entry.startTime);
const duration = msToSec(entry.duration);
const span = Sentry.startInactiveSpan({
startTimestamp: startTime,
op: entry.initiatorType
? `resource.${entry.initiatorType}`
: "resource.other",
description: entry.name,
data: {
"http.response_transfer_size": entry.transferSize,
"http.response_content_length": entry.encodedBodySize,
"http.decoded_response_content_length": entry.decodedBodySize,
"resource.render_blocking_status": entry.renderBlockingStatus,
},
});
// override end timestamp to match performance entry
span.finish(startTime + duration);
});
The Assets page gives you a quick overview of your application's asset performance for the selected project(s). You can use this page as a starting point to investigate potential problem assets and drill down to better understand how various assets are affecting your app's performance.
Open the Assets page by clicking "Assets" in the sidebar, under "Insights". Alternatively, the Performance page also surfaces the highest impact assets in the "Most Time Consuming Assets" widget. From there, you can click "View All" to open the Assets page.
At the top of the page, summary graphs for requests per minute (throughput) and average duration provide high-level insight into the performance of your assets. If you see an anomaly or want to investigate a time range further, you can click and drag to select a range directly in a graph to filter data for that time range.
The asset table below shows a list of grouped assets, along with their type, their volume (requests per min), average duration, the total time your app spent loading that asset (time spent), and average encoded size of the asset.
By default, the assets table is sorted by most time spent, which serves as a proxy for the relative performance impact of a given asset. A asset's time spent is the sum of all its durations in a given time period or, put another way, the product of its average duration and requests per minute. This means that assets at the top are usually loading really slowly, very frequently, or both.
You can click on a column header to change how the table is sorted. Sort by requests per minute to see the most frequently loaded assets or by average duration to see the slowest-loading assets.
You can also filter assets by domain, type, page it's found on, and whether it has render blocked.
To view more details, click on a asset from the table to open its Asset Summary page.
A render blocking asset is one which will stop the browser from rendering anything on the screen, until the asset is fully download and processed by the browser.
An example of this is a <script/>
within the <head>
of an HTML document. When loaded, the browser will want to load this script entirely before rendering content as it assumes it may need something from that script to render. If this is not the case, you can add the defer
or async
attribute to the script in order to reduce or eliminate render blocking.
Sentry captures a assets render blocking status using the resource.render_blocking_status
property in the PerformanceResourceTiming Api.
To enable Sentry to group similar assets together, Sentry parameterizes asset URLs, removing potentially dynamic elements. This helps track the performance of a particular asset across different releases, even when they have dynamic segments (used for busting caches or CDNS).
If you would like to further improve your groupings, consider the following rules we use when parameterizing urls. These rules can help you understand how you can name urls to improve grouping.
The following tokens will be replaced with * within a asset url
- A version string (
myfile.v3.0.js
is replace withmyfile.*.js
) - Hexadecimal strings with more than 5 digits (
myfile.7A9B3E.js
is replaced withmyfile.*.js
) - UUID's
- Integer IDs with more than one digit (
1234.7A9B3E.js
is replace with*.*.js
) - Strings longer then 25 characters
- The entire path except for common path segments such as static, chunks, media, etc
Asset parametrization is still a work-in-progress. As these improvements are made, you will will temporarily see instances of the new and old groupings in your Asset Module.
Let us know of any feedback through Github Issues.
To see an example of asset URL from a group, hover over a URL in the asset table.
To open a asset's Asset Summary page, click on the asset from the table in the Assets page.
At the top of the page, average encoded size, average decoded size, average transfer size, average duration, and requests per minute are shown for the selected time range. Right below this, you can see summary graphs for requests per minute, average duration, and average asset size over time.
At the bottom, you can find a list of pages the asset is found in, sorted by the requests per minute for the asset on that page.
If you want to investigate a specific page, click on it to open a sidebar showing some sample events.
When viewing an image asset, the asset summary page will also show the 5 largest image samples. Sentry determines the span is an image if it has one of the following extensions: 'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'apng', 'avif'.
If size information is not available, the samples will not be ordered in any particular order. If the images are publicly accessible and the 'Enable Images' project settings is enabled, then the actual images will be rendered in the UI.
Click on a page to open its samples list. This side panel shows summary metrics (requests per minute, average duration, and time spent) for the asset in the specific page.
The table shows a sample list of events, their span duration, and the difference in duration compared to average. This table is sorted by longest span duration.
Sentry automatically finds a variety of samples to help you investigate performance problems. The chosen events will cover the entire selected time range, as well as a range of durations (both faster than, slower than, and near the average duration). You can get a sense of the performance characteristics by comparing different sample events.
These same events are also represented as triangles shown in the average duration graph above.
You can generate a new list of random sample events by clicking the "Try Different Samples" button at the bottom.
From the sample list, you can drill down to specific good, average, or bad examples of a given asset within a given page. Click on an event ID to drill into the asset's span details within the span waterfall of the Trace View page.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").