Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rename resource module to asset module #10047

Merged
merged 10 commits into from
Jun 4, 2024
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
title: Resources
title: Assets
sidebar_order: 50
description: "Learn more about browser resource performance monitoring, which allows you to debug the performance of loading JavaScript and CSS on your frontend."
description: "Learn more about browser asset performance monitoring, which allows you to debug the performance of loading JavaScript and CSS on your frontend."
---

If you have performance monitoring enabled for your frontend, you can see how your browser resources are performing in Sentry.
If you have performance monitoring enabled for your frontend, you can see how your browser assets are performing in Sentry.
DominikB2014 marked this conversation as resolved.
Show resolved Hide resolved

Starting with the [**Resources** page](#resources-page), you get a high-level overview of how your resources are doing. From there, you can drill into a specific resource's [**Resource Summary** page](#resource-summary-page) and then investigate sample events from the [Sample List](#sample-list) to better understand the context of its performance in a specific page.
Starting with the [**Assets** page](#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](#asset-summary-page) and then investigate sample events from the [Sample List](#sample-list) to better understand the context of its performance in a specific page.

<div style={{position: 'relative', paddingBottom: 'calc(50.86013462976814% + 41px)', height: 0}}><iframe src="https://demo.arcade.software/BxySgGk7hpJ72xquLdKe?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}></iframe></div>
DominikB2014 marked this conversation as resolved.
Show resolved Hide resolved

## Prerequisites and Limitations

The resource pages are only available for frontend JavaScript projects with performance monitoring enabled. Currently only JavaScript, CSS, images, and certain resources that are initiated by CSS (such as fonts), are supported.
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 resource performance data. This is supported for the following JavaScript platforms:
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:

- [Vanilla JavaScript](/platforms/javascript/performance/)
- [Angular](/platforms/javascript/guides/angular/performance/)
Expand All @@ -30,11 +30,11 @@ For the best experience, we recommend enabling automatic instrumentation via the

### Span Eligibility

Sentry tries to extract metrics by looking at resource-related spans.
Sentry tries to extract metrics by looking at asset-related spans.

The JavaScript SDK automatically generates `resource` spans on `pageload` and `navigation` transactions using the browser's [Resource Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing).
The JavaScript SDK automatically generates `asset` spans on `pageload` and `navigation` transactions using the browser's [Resource Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing).

If you are using <PlatformLink to="/performance/instrumentation/automatic-instrumentation">automatic instrumentation</PlatformLink>, resource monitoring should work without any configuration.
If you are using <PlatformLink to="/performance/instrumentation/automatic-instrumentation">automatic instrumentation</PlatformLink>, 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:

Expand Down Expand Up @@ -73,41 +73,41 @@ resources.forEach((entry) => {
});
```

## Resources Page
## Assets Page

The **Resources** page gives you a quick overview of your application's resource performance for the selected project(s). You can use this page as a starting point to investigate potential problem resources and drill down to better understand how various resources are affecting your app's performance.
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 **Resources** page by clicking "Resources" in the sidebar, under "Performance". Alternatively, the **Performance** page also surfaces the highest impact resources in the "Most Time Consuming Resources" widget. From there, you can click "View All" to open the **Resources** page.
Open the **Assets** page by clicking "Assets" in the sidebar, under "Performance". 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 resources. 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.
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 resource table below shows a list of grouped resources, along with their type, their volume (requests per min), average duration, the total time your app spent loading that resource (time spent), and [average encoded size](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/encodedBodySize) of the resource.
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](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/encodedBodySize) of the asset.

By default, the resources table is sorted by most time spent, which serves as a proxy for the relative performance impact of a given resource. A resource'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 resources at the top are usually loading really slowly, very frequently, or both.
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 resources or by average duration to see the slowest-loading resources.
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 resources by domain, type, page it's found on, and whether it has render blocked.
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 resource from the table to open its **Resource Summary** page.
To view more details, click on a asset from the table to open its **Asset Summary** page.

<div style={{position: 'relative', paddingBottom: 'calc(50.86013462976814% + 41px)', height: 0}}><iframe src="https://demo.arcade.software/dVvM0eWdGjN7bVhxSwJr?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}></iframe></div>
DominikB2014 marked this conversation as resolved.
Show resolved Hide resolved

### What Does a Render Blocking Mean?

A render blocking resource is one which will stop the browser from rendering anything on the screen, until the resource is fully download and processed by the browser.
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 resources render blocking status using the `resource.render_blocking_status` property in the [PerformanceResourceTiming Api](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus).
Sentry captures a assets render blocking status using the `resource.render_blocking_status` property in the [PerformanceResourceTiming Api](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus).

### Resource Parameterization
### Asset Parameterization

To enable Sentry to group similar resources together, Sentry parameterizes resource URLs, removing potentially dynamic elements. This helps track the performance of a particular resource across different releases, even when they have dynamic segments (used for busting caches or CDNS).
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 resource url
The following tokens will be replaced with \* within a asset url

1. A version string (`myfile.v3.0.js` is replace with `myfile.*.js`)
2. Hexadecimal strings with more than 5 digits (`myfile.7A9B3E.js` is replaced with `myfile.*.js`)
Expand All @@ -118,15 +118,15 @@ The following tokens will be replaced with \* within a resource url

<Note>

Resource 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 Resource Module.
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.

</Note>

To see an example of resource URL from a group, hover over a URL in the resource table.
To see an example of asset URL from a group, hover over a URL in the asset table.

## Resource Summary Page
## Asset Summary Page

To open a resource's **Resource Summary** page, click on the resource from the table in the **Resources** page.
DominikB2014 marked this conversation as resolved.
Show resolved Hide resolved

Expand Down
Loading