diff --git a/docs/product/performance/assets.mdx b/docs/product/performance/assets.mdx new file mode 100644 index 0000000000000..ae8b4cec97c28 --- /dev/null +++ b/docs/product/performance/assets.mdx @@ -0,0 +1,163 @@ +--- +title: Assets +sidebar_order: 70 +description: "Learn more about browser asset performance monitoring, which allows you to debug the performance of loading JavaScript and CSS on your frontend." +--- + + +This product feature was originally named "Resources", "Assets" has the same functionality with a new exciting name. + + +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](#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. + +
+ +## Prerequisites and Limitations + +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: + +- [Vanilla JavaScript](/platforms/javascript/performance/) +- [Angular](/platforms/javascript/guides/angular/performance/) +- [Astro](/platforms/javascript/guides/astro/performance/) +- [Ember](/platforms/javascript/guides/ember/performance/) +- [Gatsby](/platforms/javascript/guides/gatsby/performance/) +- [Next.js](/platforms/javascript/guides/nextjs/performance/) +- [React](/platforms/javascript/guides/react/performance/) +- [Remix](/platforms/javascript/guides/remix/performance/) +- [Svelte](/platforms/javascript/guides/svelte/performance/) +- [SvelteKit](/platforms/javascript/guides/sveltekit/performance/) +- [Vue](/platforms/javascript/guides/vue/performance/) + +### Span Eligibility + +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](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing). + +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 with `resource` (for example, `resource.script` or `resource.css`). +- The span's `description` contains the URL of the loaded resource, which should correspond to the [PerformanceResourceTiming name field](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/name). +- The `http.response_transfer_size` span data value is set to the [total transfer size](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize) of the resource. +- The `http.response_content_length` span data value is set to the [encoded body size](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/encodedBodySize) of the resource. +- The `http.decoded_response_content_length` span data value is set to the [decoded body size](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/decodedBodySize) of the resource. +- The `resource.render_blocking_status` span data value is set to the [render blocking status](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus) of the resource. + +Here's an example snippet of creating a resource span manually with the SDK. + +```javascript +// 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); +}); +``` +## Assets Page + +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 "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 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](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/encodedBodySize) 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. + + +### What Does a Render Blocking Mean? + +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 `