diff --git a/docs/concepts/search/searchable-properties/events.mdx b/docs/concepts/search/searchable-properties/events.mdx index 1719890370c3d..8e0b9241bf0d2 100644 --- a/docs/concepts/search/searchable-properties/events.mdx +++ b/docs/concepts/search/searchable-properties/events.mdx @@ -342,13 +342,13 @@ Returns results with a matching maximum value for the field entered. ### `measurements.app_start_cold` -A [cold start](/product/insights/mobile-vitals/#app-start) refers to when the app launches for the first time after a reboot or update. The app is not in memory and no process exists. +A [cold start](/product/insights/mobile/mobile-vitals/app-starts/) refers to when the app launches for the first time after a reboot or update. The app is not in memory and no process exists. - **Type:** duration ### `measurements.app_start_warm` -A [warm start](/product/insights/mobile-vitals/#app-start) refers to when the app has already launched at least once and is partially in memory. For instance, the user backs out of your app, but then re-launches it. The process may have continued to run, but the app must recreate the activity from scratch. +A [warm start](/product/insights/mobile/mobile-vitals/app-starts/) refers to when the app has already launched at least once and is partially in memory. For instance, the user backs out of your app, but then re-launches it. The process may have continued to run, but the app must recreate the activity from scratch. - **Type:** duration @@ -378,7 +378,7 @@ A [warm start](/product/insights/mobile-vitals/#app-start) refers to when the ap ### `measurements.frames_frozen` -[Slow and frozen frames](/product/insights/mobile-vitals/#slow-and-frozen-frames) measure the responsiveness of your app. +[Slow and frozen frames](/product/insights/mobile/mobile-vitals/#slow-and-frozen-frames) measure the responsiveness of your app. - **Type:** number @@ -390,7 +390,7 @@ Returns results with a matching rate of frozen frames. That is, `measurements.fr ### `measurements.frames_slow` -[Slow and frozen frames](/product/insights/mobile-vitals/#slow-and-frozen-frames) measure the responsiveness of your app. +[Slow and frozen frames](/product/insights/mobile/mobile-vitals/#slow-and-frozen-frames) measure the responsiveness of your app. - **Type:** number diff --git a/docs/platforms/android/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/android/tracing/instrumentation/automatic-instrumentation.mdx index 3606b6092c7c6..bd77fcade6280 100644 --- a/docs/platforms/android/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/android/tracing/instrumentation/automatic-instrumentation.mdx @@ -147,7 +147,7 @@ You can opt out of Activity Instrumentation and App Start Instrumentation using ``` -Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). ### Slow and Frozen Frames @@ -159,7 +159,7 @@ Supported on Android OS version `7.0` and above. Unresponsive UI and animation hitches annoy users and degrade the user experience. Two measurements to track these types of experiences are _slow frames_ and _frozen frames_. If you want your app to run smoothly, you should try to avoid both. The SDK adds these two measurements for the [Activity](/platforms/android/tracing/instrumentation/automatic-instrumentation/#activity-instrumentation) transactions. -Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). ### Trace Propagation Targets diff --git a/docs/platforms/android/tracing/instrumentation/perf-v2.mdx b/docs/platforms/android/tracing/instrumentation/perf-v2.mdx index a322d4b5c809b..53197587aab0c 100644 --- a/docs/platforms/android/tracing/instrumentation/perf-v2.mdx +++ b/docs/platforms/android/tracing/instrumentation/perf-v2.mdx @@ -11,7 +11,7 @@ Supported in Sentry's Android SDK version `7.4.0` and above. -Performance V2 is a set of features which enrich your existing instrumentation, giving you more insights into potential performance bottlenecks. These features tightly integrate with [Mobile Vitals](/product/insights/mobile-vitals/). +Performance V2 is a set of features which enrich your existing instrumentation, giving you more insights into potential performance bottlenecks. These features tightly integrate with the [Mobile Vitals](/product/insights/mobile/mobile-vitals/) insights module. ### Enabling Performance V2 diff --git a/docs/platforms/apple/common/features/index.mdx b/docs/platforms/apple/common/features/index.mdx index 737502658f08b..b71b98ea2b05f 100644 --- a/docs/platforms/apple/common/features/index.mdx +++ b/docs/platforms/apple/common/features/index.mdx @@ -38,7 +38,7 @@ The SDK builds a crash report that persists to disk. While it attempts to send t - Rendering of UIViewControllers - Performance of HTTP requests - Distributed tracing - - Mobile Vitals + - Insights for Mobile Vitals - Cold and warm start - Slow and frozen frames - Prewarmed App Start Tracing diff --git a/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx index 82510a39ea071..265078166c866 100644 --- a/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -123,7 +123,7 @@ Before [sentry-cocoa 8.18.0](https://github.com/getsentry/sentry-cocoa/releases/ - **UIKit and Application Init**: from pre main initializers to [`didFinishLaunchingNotification`][didfinishlaunching]. - **Initial Frame Render**: from the [`didFinishLaunchingNotification`][didfinishlaunching] to [`UIWindowDidBecomeVisibleNotification`][uiwindow]. -Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). ### Prewarmed App Start Tracing @@ -170,7 +170,7 @@ The detail view of the transaction displays the slow, frozen, and total frames: ![Slow and Frozen Frames](./img/slow-frozen-frames.png) -Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). ## Network Tracking diff --git a/docs/platforms/flutter/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/flutter/tracing/instrumentation/automatic-instrumentation.mdx index 9e869e4ab3be9..dc9b0abf371e2 100644 --- a/docs/platforms/flutter/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/flutter/tracing/instrumentation/automatic-instrumentation.mdx @@ -45,7 +45,7 @@ Learn more in our [App Start Instrumentation](/platforms/flutter/integrations/ap Unresponsive UI and animation hitches annoy users and degrade the user experience. Two measurements to track these types of experiences are slow frames and frozen frames. If you want your app to run smoothly, you should try to avoid both. The SDK adds these two measurements for the transactions you capture. -Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). Learn more how to set it up in our [Slow and Frozen Frames Instrumentation](/platforms/flutter/integrations/slow-and-frozen-frames-instrumentation/) docs. diff --git a/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx index bb48ac848a92a..ee286f337b6e0 100644 --- a/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx @@ -53,13 +53,13 @@ If you don't [wrap your root component with Sentry](#wrap-your-root-component), The SDK differentiates between a cold and a warm start, but doesn't track hot starts or resumes. The measurements are available under `measurements.app_start_warm` and `measurements.app_start_cold`. -Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Cold and warm start are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). ### Slow and Frozen Frames Unresponsive UI and animation hitches annoy users and degrade the user experience. Two measurements to track these types of experiences are slow frames and frozen frames. If you want your app to run smoothly, you should try to avoid both. The SDK adds these two measurements for the transactions you capture. -Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile-vitals). +Slow and frozen frames are Mobile Vitals, which you can learn about in the [full documentation](/product/insights/mobile/mobile-vitals). diff --git a/docs/platforms/react-native/tracing/instrumentation/time-to-display.mdx b/docs/platforms/react-native/tracing/instrumentation/time-to-display.mdx index 980f1abacd58b..45368a7dba188 100644 --- a/docs/platforms/react-native/tracing/instrumentation/time-to-display.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/time-to-display.mdx @@ -6,7 +6,7 @@ sdk: sentry.javascript.react-native description: "Learn how to measure time to display with the Sentry React Native SDK." --- -Sentry's React Native SDK package ships with a tracing feature that allows you to measure your application's [Time to Display](/product/insights/mobile-vitals/#time-to-initial-display-and-time-to-full-display). This guide will show you how to use Sentry's React Native SDK to measure Time to Display in your application. +Sentry's React Native SDK package ships with a tracing feature that allows you to measure your application's [Time to Display](/product/insights/mobile/mobile-vitals/#time-to-initial-display-and-time-to-full-display). This guide will show you how to use Sentry's React Native SDK to measure Time to Display in your application. Time to Display consists of two parts, Time To Initial Display (TTID) and Time To Full Display (TTFD). TTID measures the time it takes to display the first frame, while TTFD measures the time it takes to display the full content for the user to interact with. diff --git a/docs/product/explore/profiling/mobile-app-profiling/metrics.mdx b/docs/product/explore/profiling/mobile-app-profiling/metrics.mdx index 5db4e5cd829a8..3af1ac1d49dd1 100644 --- a/docs/product/explore/profiling/mobile-app-profiling/metrics.mdx +++ b/docs/product/explore/profiling/mobile-app-profiling/metrics.mdx @@ -16,7 +16,7 @@ The amount of heap memory used by the application is recorded every 100 ms using ## GPU Information -In addition to counting the number of [slow and frozen UI frame renders](/product/insights/mobile-vitals/#slow-and-frozen-frames) for Mobile Vitals, Sentry now records the timestamp for every frame and overlays it on top of profiling flame charts: +In addition to counting the number of [slow and frozen UI frame renders](/product/insights/mobile/mobile-vitals/#slow-and-frozen-frames) for Mobile Vitals Insights, Sentry now records the timestamp for every frame and overlays it on top of profiling flame charts: ![Sentry displays slow and frozen frames above the flamechart of a particular profile.](./img/flamechart-with-gpu-overlay.png) diff --git a/docs/product/insights/img/mobile-performance-overview.png b/docs/product/insights/img/mobile-performance-overview.png index 5a685065e4e47..782cd7c4770e4 100644 Binary files a/docs/product/insights/img/mobile-performance-overview.png and b/docs/product/insights/img/mobile-performance-overview.png differ diff --git a/docs/product/insights/mobile/img/app-starts-screen-summary.png b/docs/product/insights/mobile/img/app-starts-screen-summary.png deleted file mode 100644 index 9041a56cd73c2..0000000000000 Binary files a/docs/product/insights/mobile/img/app-starts-screen-summary.png and /dev/null differ diff --git a/docs/product/insights/mobile/img/app-starts.png b/docs/product/insights/mobile/img/app-starts.png deleted file mode 100644 index bd5bbb067c574..0000000000000 Binary files a/docs/product/insights/mobile/img/app-starts.png and /dev/null differ diff --git a/docs/product/insights/mobile/img/screen-loads-screen-summary.png b/docs/product/insights/mobile/img/screen-loads-screen-summary.png deleted file mode 100644 index f588ff7c49309..0000000000000 Binary files a/docs/product/insights/mobile/img/screen-loads-screen-summary.png and /dev/null differ diff --git a/docs/product/insights/mobile/img/screen-loads.png b/docs/product/insights/mobile/img/screen-loads.png deleted file mode 100644 index c00ab1e33e61e..0000000000000 Binary files a/docs/product/insights/mobile/img/screen-loads.png and /dev/null differ diff --git a/docs/product/insights/mobile/index.mdx b/docs/product/insights/mobile/index.mdx index 5b91246b9e8de..a3adb7bed7bee 100644 --- a/docs/product/insights/mobile/index.mdx +++ b/docs/product/insights/mobile/index.mdx @@ -10,66 +10,6 @@ The [**Mobile Performance**](https://sentry.io/orgredirect/organizations/:orgslu ![Mobile performance overview page.](../img/mobile-performance-overview.png) -## App Start +## Learn More -App start metrics track how long your mobile application takes to launch. For this, Sentry measures _cold starts_ and _warm starts_. - -The definitions of cold start and warm start change slightly depending on the operating system. On iOS, Apple recommends your app take at most 400ms to render the first frame. On Android, the [Google Play console](https://developer.android.com/topic/performance/vitals/launch-time#av) warns you when a cold start takes longer than five seconds or a warm start longer than two seconds. For definitions by operating system, check out the corresponding SDK docs: - -- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) -- [Flutter](/platforms/flutter/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) -- [iOS](/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#app-start-tracking) -- [React Native](/platforms/react-native/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) - -In the example below, the detail view of a transaction displays the warm start measurement in the right sidebar. - -![The event detail of a transaction with a warm start measurement.](./img/app-start-transaction.png) - -While the SDKs differentiate between a cold and a warm start, they don't track hot starts or resumes. To get more insight into your cold and warm start metrics, you can use the [App Starts](/product/insights/mobile-vitals/app-starts/) feature. - -## Slow and Frozen Frames - -To track the responsiveness of the user interface, Sentry measures _slow frames_ and _frozen frames_. Typically, a phone or tablet renders 60 frames per second (fps). At 60 fps, every frame has 16 or 16.67 ms to render. - -- **Slow Frames**: Using 60 fps, slow frames are frames that take more than 16 ms (Android) or 16.67 ms (iOS) to render. -- **Frozen Frames**: Frozen frames are frames that take longer than 700 ms to render. - -For Apple, the frame rate can be higher, especially as 120 fps displays are becoming more popular. For these apps, Sentry detects the frame rate and adjusts the slow frame calculation accordingly. - -In the example below, the detail view of the transaction displays the slow, frozen, and total frames in an iOS application: - -![The event detail of a transaction with slow and frozen frames measurements.](./img/slow-frozen-frames.png) - -You can track slow and frozen frames for: - -- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) -- [Flutter](/platforms/flutter/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) -- [iOS](/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) -- [React Native](/platforms/react-native/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) - -## Time to Initial Display and Time to Full Display - -To track how long it takes your application to produce its first frame and then how long it takes to produce its first frame with all the content, Sentry measures time to initial display and time to full display, respectively. - -- **Time to initial display**: tracks how long it takes for your mobile application to produce its first frame. This includes app start time on the first screen loaded. It doesn’t include any content loaded lazily after the first frame is drawn. Time to initial display is automatic and enabled by default. -- **Time to full display**: tracks how long it takes for your mobile application to produce its first frame with full content. This includes content loaded asynchronously after the first frame, for example, after loading content from the network. Time to full display is opt-in and requires you to manually call the API to report that the screen has loaded all of its content and is fully displayed. - -In the example below, the detail view of the transaction displays the time-to-initial-display span in an Android application: - -![The event detail of a transaction with time to initial display and time to full display spans.](./img/time-to-initial-full-display.png) - -You can track time to initial display for: - -- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-initial-display) -- [Apple](/platforms/apple/tracing/instrumentation/automatic-instrumentation/#time-to-initial-display) -- [Flutter](/platforms/flutter/integrations/routing-instrumentation/#time-to-initial-display) -- [React Native](/platforms/react-native/performance/instrumentation/time-to-display/#automatic-time-to-initial-display-for-react-navigation) - -You can track time to full display for: - -- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-full-display) -- [Apple](/platforms/apple/tracing/instrumentation/automatic-instrumentation/#time-to-full-display) -- [Flutter](/platforms/flutter/integrations/routing-instrumentation/#time-to-full-display) -- [React Native](/platforms/react-native/performance/instrumentation/time-to-display/#time-to-full-display) - -To get more insight into the performance of your time to initial display and time to full display metrics, use the [Screen Loads](/product/insights/mobile-vitals/screen-loads/) feature. + diff --git a/docs/product/insights/mobile/app-starts.mdx b/docs/product/insights/mobile/mobile-vitals/app-starts.mdx similarity index 79% rename from docs/product/insights/mobile/app-starts.mdx rename to docs/product/insights/mobile/mobile-vitals/app-starts.mdx index 9e4ead0eacb7d..e18be2b69d0ee 100644 --- a/docs/product/insights/mobile/app-starts.mdx +++ b/docs/product/insights/mobile/mobile-vitals/app-starts.mdx @@ -15,7 +15,7 @@ The **App Starts** page shows an overview of the amount of time it takes for you **For Android:** - `>=7.4.0` for automatic instrumentation of app start spans and app start profiling -- [Performance-V2](/platforms/android/performance/instrumentation/perf-v2) feature flag and [App Start Profiling](/platforms/android/profiling/#app-start-profiling) must also be enabled in the SDK, e.g.: +- [Performance-V2](/platforms/android/performance/instrumentation/perf-v2) feature flag (`<8.0.0`) and [App Start Profiling](/platforms/android/profiling/#app-start-profiling) must also be enabled in the SDK, e.g.: ```java {filename:MyApplication.java} import io.sentry.android.core.SentryAndroid; @@ -59,23 +59,15 @@ The charts display the following metrics (using cold starts as an example): - Average Cold Start - The overall time it takes your application to start, compared by release. -- Top Screen Cold Start - - The time it takes for individual screens to start, compared by release. This chart syncs with the sort order in the table below it. -- Count - - The number of starts occurring in the selected time range for the releases. This gives you an idea of how statistically significant the aggregated data is. +- Cold Start Device Distribution + - The average cold start time grouped by [device class](/concepts/search/searchable-properties/#device-classification) (high, medium, low, or unknown). **Reasons Why You Might Not Be Seeing Any Data:** - You don’t have any transactions with op `ui.load` - Your SDKs don’t meet the minimum SDK requirements -## Screen Summary Page - -![Example of Screen Summary](./img/app-starts-screen-summary.png) - -To get additional information about any of your application’s screens, click on them to get to the **Screen Summary** page. Here, you’ll see your average start duration broken down by release and [device class](/concepts/search/searchable-properties/#device-classification) (high, medium, low, or unknown). This will help you understand how users with different device performance levels are being affected. - -The table below the chart shows spans that have changed from one release to the next and allows you to filter for specific span operations and device classes. Being able to narrow down to specific event samples helps debug slow starts. +The table at the bottom shows spans that have changed from one release to the next and allows you to filter for specific span operations and device classes. Being able to narrow down to specific event samples helps debug slow starts. Clicking the "By Event" toggle in the top right corner of this table will show you events split by release and you'll be able to see overall changes in start times between the two releases you've selected. diff --git a/docs/product/insights/mobile/img/01_full_widget_mobile.png b/docs/product/insights/mobile/mobile-vitals/img/01_full_widget_mobile.png similarity index 100% rename from docs/product/insights/mobile/img/01_full_widget_mobile.png rename to docs/product/insights/mobile/mobile-vitals/img/01_full_widget_mobile.png diff --git a/docs/product/insights/mobile/img/app-start-transaction.png b/docs/product/insights/mobile/mobile-vitals/img/app-start-transaction.png similarity index 100% rename from docs/product/insights/mobile/img/app-start-transaction.png rename to docs/product/insights/mobile/mobile-vitals/img/app-start-transaction.png diff --git a/docs/product/insights/mobile/img/app-starts-samples-by-event.png b/docs/product/insights/mobile/mobile-vitals/img/app-starts-samples-by-event.png similarity index 100% rename from docs/product/insights/mobile/img/app-starts-samples-by-event.png rename to docs/product/insights/mobile/mobile-vitals/img/app-starts-samples-by-event.png diff --git a/docs/product/insights/mobile/img/app-starts-span-detail-view.png b/docs/product/insights/mobile/mobile-vitals/img/app-starts-span-detail-view.png similarity index 100% rename from docs/product/insights/mobile/img/app-starts-span-detail-view.png rename to docs/product/insights/mobile/mobile-vitals/img/app-starts-span-detail-view.png diff --git a/docs/product/insights/mobile/mobile-vitals/img/app-starts.png b/docs/product/insights/mobile/mobile-vitals/img/app-starts.png new file mode 100644 index 0000000000000..00259ae5aa495 Binary files /dev/null and b/docs/product/insights/mobile/mobile-vitals/img/app-starts.png differ diff --git a/docs/product/insights/mobile/mobile-vitals/img/mobile-vitals.png b/docs/product/insights/mobile/mobile-vitals/img/mobile-vitals.png new file mode 100644 index 0000000000000..b940401957c39 Binary files /dev/null and b/docs/product/insights/mobile/mobile-vitals/img/mobile-vitals.png differ diff --git a/docs/product/insights/mobile/img/screen-loads-span-detail.png b/docs/product/insights/mobile/mobile-vitals/img/screen-loads-span-detail.png similarity index 100% rename from docs/product/insights/mobile/img/screen-loads-span-detail.png rename to docs/product/insights/mobile/mobile-vitals/img/screen-loads-span-detail.png diff --git a/docs/product/insights/mobile/mobile-vitals/img/screen-loads.png b/docs/product/insights/mobile/mobile-vitals/img/screen-loads.png new file mode 100644 index 0000000000000..c60f54314bbef Binary files /dev/null and b/docs/product/insights/mobile/mobile-vitals/img/screen-loads.png differ diff --git a/docs/product/insights/mobile/img/slow-frozen-frames.png b/docs/product/insights/mobile/mobile-vitals/img/slow-frozen-frames.png similarity index 100% rename from docs/product/insights/mobile/img/slow-frozen-frames.png rename to docs/product/insights/mobile/mobile-vitals/img/slow-frozen-frames.png diff --git a/docs/product/insights/mobile/img/time-to-initial-full-display.png b/docs/product/insights/mobile/mobile-vitals/img/time-to-initial-full-display.png similarity index 100% rename from docs/product/insights/mobile/img/time-to-initial-full-display.png rename to docs/product/insights/mobile/mobile-vitals/img/time-to-initial-full-display.png diff --git a/docs/product/insights/mobile/img/ttid-ttfd-affecting-spans.png b/docs/product/insights/mobile/mobile-vitals/img/ttid-ttfd-affecting-spans.png similarity index 100% rename from docs/product/insights/mobile/img/ttid-ttfd-affecting-spans.png rename to docs/product/insights/mobile/mobile-vitals/img/ttid-ttfd-affecting-spans.png diff --git a/docs/product/insights/mobile/mobile-vitals/index.mdx b/docs/product/insights/mobile/mobile-vitals/index.mdx new file mode 100644 index 0000000000000..c20fae20a9686 --- /dev/null +++ b/docs/product/insights/mobile/mobile-vitals/index.mdx @@ -0,0 +1,87 @@ +--- +title: "Mobile Vitals" +sidebar_order: 0 +description: "Track the performance of your app." +--- + +The Mobile Vitals insights module provides a high-level overview of the performance of your screens, and allows you to drill down into the performance metrics of individual screens. + +![The Mobile Vitals insights module.](./img/mobile-vitals.png) + +## App Start + +App start metrics track how long your mobile application takes to launch. For this, Sentry measures [_cold starts_]( /concepts/search/searchable-properties/events/#measurementsapp_start_cold) and [_warm starts_](/concepts/search/searchable-properties/events/#measurementsapp_start_warm). + +The definitions of cold start and warm start change slightly depending on the operating system. On iOS, Apple recommends your app take at most 400ms to render the first frame. On Android, the [Google Play console](https://developer.android.com/topic/performance/vitals/launch-time#av) warns you when a cold start takes longer than five seconds or a warm start longer than two seconds. For definitions by operating system, check out the corresponding SDK docs: + +- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) +- [Apple](/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#app-start-tracking) +- [Flutter](/platforms/flutter/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) +- [React Native](/platforms/react-native/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation) + +In the example below, the detail view of a transaction displays the warm start measurement in the right sidebar. + +![The event detail of a transaction with a warm start measurement.](./img/app-start-transaction.png) + +While the SDKs differentiate between cold and warm starts, they don't track hot starts or resumes. To get more insight into your cold and warm start metrics, you can use the [App Starts](/product/insights/mobile/mobile-vitals/app-starts/) feature. + +## Slow and Frozen Frames + +To track the responsiveness of the user interface, Sentry measures _slow frames_ and _frozen frames_. Both indicate if the rendering of a frame is taking too long, causing the UI to appear laggy or frozen. + +Typically, a phone or tablet renders at 60 or 120 frames per second (fps). Based on this a single frame has a time budget of 16.67 / 8.33 ms to render. + +- **Slow Frames**: Using 60 fps, slow frames are frames that take more than 16 ms (Android) or 16.67 ms (iOS) to render. +- **Frozen Frames**: Frozen frames are frames that take longer than 700 ms to render. + +Sentry also supports higher frame rates, especially as 120 fps displays are becoming more popular. For these apps, Sentry detects the frame rate and adjusts the slow frame calculation accordingly. + +On the Mobile Vitals insights page, you can see a slow and frozen frame rate, indicating the percentage of frames that are slow or frozen during the lifetime of the transaction. + +In the example below, the detail view of the transaction displays the slow, frozen, and total frames in an iOS application: + +![The event detail of a transaction with slow and frozen frames measurements.](./img/slow-frozen-frames.png) + +You can track slow and frozen frames for: + +- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) +- [Apple](/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) +- [Flutter](/platforms/flutter/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) +- [React Native](/platforms/react-native/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) + +## Frames Delay + +Frames Delay is the user-perceived total delayed duration of rendered frames. For example, at a refresh rate of 60fps, if a two frame renders takes 20ms each, the frame delay is 8ms (2 * (20ms - 16ms) = 8ms). + +You can track frames delay on the following platforms: +- [Android](/platforms/android/tracing/instrumentation/perf-v2/#frames-delay) +- [Apple, as part of slow and frozen frames](/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames) +- [Flutter](/platforms/flutter/integrations/slow-and-frozen-frames-instrumentation/) + +## Time to Initial Display and Time to Full Display + +To track how long it takes a screen to render its first frame and then how long it takes to render its first frame with all content, Sentry measures time to initial display and time to full display, respectively. + +- **Time to initial display**: tracks how long it takes your app to render its first frame. This includes app start time on the first screen loaded. It doesn't include any content loaded lazily after the first frame is drawn. Time to initial display is measured automatically and enabled by default. + +- **Time to full display**: tracks how long it takes for your mobile application to render its first frame with full content. This includes content loaded asynchronously after the first frame, for example, after loading content from the network. Time to full display is opt-in and requires you to manually call the API to report that the screen has loaded all of its content and is fully displayed. + +In the example below, the detail view of the transaction displays the time-to-initial-display span in an Android application: + +![The event detail of a transaction with time to initial display and time to full display spans.](./img/time-to-initial-full-display.png) + +You can track time to initial display for: + +- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-initial-display) +- [Apple](/platforms/apple/tracing/instrumentation/automatic-instrumentation/#time-to-initial-display) +- [Flutter](/platforms/flutter/integrations/routing-instrumentation/#time-to-initial-display) +- [React Native](/platforms/react-native/performance/instrumentation/time-to-display/#automatic-time-to-initial-display-for-react-navigation) + +You can track time to full display for: + +- [Android](/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-full-display) +- [Apple](/platforms/apple/tracing/instrumentation/automatic-instrumentation/#time-to-full-display) +- [Flutter](/platforms/flutter/integrations/routing-instrumentation/#time-to-full-display) +- [React Native](/platforms/react-native/performance/instrumentation/time-to-display/#time-to-full-display) + +To get more insight into the performance of your time to initial display and time to full display metrics, use the [Screen Loads](/product/insights/mobile/mobile-vitals/screen-loads/) feature. diff --git a/docs/product/insights/mobile/screen-loads.mdx b/docs/product/insights/mobile/mobile-vitals/screen-loads.mdx similarity index 77% rename from docs/product/insights/mobile/screen-loads.mdx rename to docs/product/insights/mobile/mobile-vitals/screen-loads.mdx index 92e5d4b002a84..5712d35cca17d 100644 --- a/docs/product/insights/mobile/screen-loads.mdx +++ b/docs/product/insights/mobile/mobile-vitals/screen-loads.mdx @@ -10,7 +10,7 @@ description: "Learn how to monitor your mobile application's performance by usin The **Screen Loads** page shows an overview of the amount of time it takes for your application to load its screens. It helps you identify slow or regressed screens and gives additional information so you can better understand the factors contributing to the slowness of both time to initial display (TTID) and time to full display (TTFD). -Sentry tracks TTID automatically, but [TTFD](/product/insights/mobile-vitals/#time-to-initial-display-and-time-to-full-display) requires that the `reportFullyDisplayed()` API be manually called to report that the screen has loaded all of its content and is fully displayed. +Sentry tracks TTID automatically, but [TTFD](/product/insights/mobile/mobile-vitals/#time-to-initial-display-and-time-to-full-display) requires that the `reportFullyDisplayed()` API be manually called to report that the screen has loaded all of its content and is fully displayed. ### Minimum SDK Requirements: @@ -35,24 +35,17 @@ Sentry tracks TTID automatically, but [TTFD](/product/insights/mobile-vitals/#ti By default, the **Screen Loads** page displays metrics for the two releases with the highest screen counts for the time range you’ve selected. To choose a different set of releases to compare, use the “release selector” at the top of the page. -The charts section shows a comparison of TTID and TTFD for your top five screens across your two selected releases. - -The sortable table below shows a list of your application's screens with the average TTID and TTFD for each release. +The charts section shows a comparison of TTID and TTFD metrics for your two selected releases over time. **Reasons Why You Might Not Be Seeing Any Data:** - You don’t have any transactions with op `ui.load` - Your SDKs don’t meet the minimum SDK requirements -## Screen Summary Page - -![Example of Screen Summary](./img/screen-loads-screen-summary.png) - -To get additional information about any of your application's screens, click on them to get to the **Screen Summary** page. Here, you’ll see a breakdown of TTID and TTFD values broken out by [device class](/concepts/search/searchable-properties/#device-classification) (high, medium, low, or unknown), across your selected releases. This will help you understand how users with different device performance levels are being affected. -The Screen Summary page also shows the average TTID, average TTFD, and Count (the number of times a screen has been called) - broken out by release. +Here, you’ll see a breakdown of TTID and TTFD values by [device class](/concepts/search/searchable-properties/#device-classification) (high, medium, low, or unknown), across your selected releases. This will help you understand how users with different device performance levels are being affected. -To see slow TTID and TTFD events and profiles for each release broken out by specific device class, use the “Device Class” filter at the top of the table. +To see slow TTID and TTFD events and profiles for each release broken out by specific device class, use the “Device Class” filter below the charts. At the bottom of the page, you’ll see a table of spans that occurred during screen load, sorted by the most time your screen spent in that span. Here, you’ll be able to: @@ -60,7 +53,7 @@ At the bottom of the page, you’ll see a table of spans that occurred during sc - Find the slowest spans in the release you’re interested in by looking at average span duration. -- See which spans occur most frequently by looking at “Count”. (This might help you identify excessive io calls or repeated work that might be occurring during screen load.) +- See which spans occur most frequently by looking at “Total Count”. (This might help you identify excessive io calls or repeated work that might be occurring during screen load.) **Eligible span operations:** diff --git a/docs/product/insights/mobile/network-requests.mdx b/docs/product/insights/mobile/network-requests.mdx new file mode 100644 index 0000000000000..0b3dadda3b8d5 --- /dev/null +++ b/docs/product/insights/mobile/network-requests.mdx @@ -0,0 +1,7 @@ +--- +title: Network Requests +sidebar_order: 10 +description: "Track the performance of your application's HTTP requests and drill into the domains serving them." +--- + + diff --git a/docs/product/insights/overview/filters-display/index.mdx b/docs/product/insights/overview/filters-display/index.mdx index 3bc20df1a2775..23920a3ba5e22 100644 --- a/docs/product/insights/overview/filters-display/index.mdx +++ b/docs/product/insights/overview/filters-display/index.mdx @@ -28,7 +28,7 @@ When you select "All Transactions", the table includes all transactions across a ### Mobile -"Mobile" puts an emphasis on [Mobile Vitals](/product/insights/mobile-vitals/). Note that if you've selected a non-mobile project, this mode also displays all of those transactions. +"Mobile" puts an emphasis on performance Metrics related to [mobile app development](/product/insights/mobile/). Note that if you've selected a non-mobile project, this mode also displays all of those transactions. ## Filtering Transactions diff --git a/docs/product/insights/overview/filters-display/widgets.mdx b/docs/product/insights/overview/filters-display/widgets.mdx index 68d5c0449835b..b1e08bf64f45d 100644 --- a/docs/product/insights/overview/filters-display/widgets.mdx +++ b/docs/product/insights/overview/filters-display/widgets.mdx @@ -15,7 +15,7 @@ The value displayed in the top right of some widgets is the **overall value for ## Average TTIDs -Shows the average TTID duration for top screens for mobile projects. Click the screen name to view more information about the screen in the [Screen Loads](/product/insights/mobile-vitals/screen-loads/) page. +Shows the average TTID duration for top screens for mobile projects. Click the screen name to view more information about the screen in the [Screen Loads](/product/insights/mobile/mobile-vitals/screen-loads/) page. This widget is available in the [Mobile Overview](/product/insights/mobile/). @@ -23,7 +23,7 @@ This widget is available in the [Mobile Overview](/product/insights/mobile/). ## Most Slow Frames -Shows transactions with the most slow frames for mobile projects. Learn more in [Mobile Vitals](/product/insights/mobile-vitals). +Shows transactions with the most slow frames for mobile projects. Learn more in [Mobile Vitals](/product/insights/mobile/mobile-vitals). This widget is available in the [Mobile Overview](/product/insights/mobile/). @@ -31,7 +31,7 @@ This widget is available in the [Mobile Overview](/product/insights/mobile/). ## Most Frozen Frames -Shows transactions with the most frozen frames for mobile projects. Learn more in [Mobile Vitals](/product/insights/mobile-vitals). +Shows transactions with the most frozen frames for mobile projects. Learn more in [Mobile Vitals](/product/insights/mobile/mobile-vitals). This widget is available in the [Mobile Overview](/product/insights/mobile) tab. diff --git a/redirects.js b/redirects.js index f84c1d4ac0216..f314d5d16b686 100644 --- a/redirects.js +++ b/redirects.js @@ -882,11 +882,11 @@ const userDocsRedirects = [ }, { source: '/product/insights/mobile-vitals/app-starts/', - destination: '/product/insights/mobile/app-starts/', + destination: '/product/insights/mobile/mobile-screens/app-starts/', }, { source: '/product/insights/mobile-vitals/screen-loads/', - destination: '/product/insights/mobile/screen-loads/', + destination: '/product/insights/mobile/mobile-screens/screen-loads/', }, { source: '/product/insights/web-vitals/',