feat(android): Add Jetpack Compose automatic UI transaction docs (#5893)

Co-authored-by: Isabel <[email protected]>
Co-authored-by: Roman Zavarnitsyn <[email protected]>

Author: 3 people

src/platforms/android/common/performance/instrumentation/automatic-instrumentation.mdx

@@ -226,24 +226,58 @@ For more information see our [file I/O integration](/platforms/android/configura
 
 ### User Interaction Instrumentation
 
+The UI instrumentation, once enabled, captures transactions for a set of different user interactions, which include clicks, scrolls, and swipes. User interaction instrumentation is available for both classic Android Views as well as Jetpack Compose.
+
+This feature is disabled by default, but you can enable it by setting:
+
+```xml {filename:AndroidManifest.xml}
+<application>
+    <meta-data android:name="io.sentry.traces.user-interaction.enable" android:value="true" />
+</application>
+```
+
+#### User Interaction Instrumentation for Classic Android View System
+
 _(New in version 6.0.0)_
 
-The UI instrumentation, once enabled, captures transactions for a set of different user interactions, which include clicks, scrolls and swipes. The SDK composes the transaction name out of the host `Activity` and the `id` of the view, which captured the user interaction; for example, `LoginActivity.login_button`. The transaction operation is set to `ui.action` plus the interaction type (one of `click`, `scroll` or `swipe`).
+ The SDK composes the transaction name out of the host `Activity` and the `id` of the view that captured the user interaction — for example, for `LoginActivity.login_button`. The transaction operation is set to `ui.action` plus the interaction type (one of `click`, `scroll`, or `swipe`).
 
 <Note>
 
 If the view doesn't have the `id` assigned, the transaction won't be captured because it can't be uniquely identified otherwise.
 
 </Note>
 
-The UI instrumentation is disabled by default, but you can enable it by setting:
+#### User Interaction Instrumentation for Jetpack Compose
 
-```xml {filename:AndroidManifest.xml}
-<application>
-    <meta-data android:name="io.sentry.traces.user-interaction.enable" android:value="true" />
-</application>
+_(New in version 6.10.0)_
+
+The SDK composes the transaction name out of the host `Activity` and the `tag` set by way of the `Modifier.testTag("<tag>")` of the `Composable` (for example, `LoginActivity.login_button`). The transaction operation is set to `ui.action` plus the interaction type (one of `click`, `scroll`, or `swipe`).
+
+```kotlin
+import androidx.compose.ui.platform.testTag
+
+@Composable
+fun LoginScreen() {
+  Column {
+    // ...
+    Button(
+        modifier = Modifier.testTag("button_login"),
+        onClick = { TODO() }) {
+        Text(text = "Login")
+    }
+  }
+}
 ```
 
+<Note>
+
+If the `@Composable` doesn't have a `testTag` modifier applied, the transaction won't be captured because it can't be uniquely identified otherwise.
+
+</Note>
+
+#### Transaction Lifetime
+
 The transaction finishes automatically after it reaches the specified [idleTimeout](/platforms/android/configuration/options/#idle-timeout) and all of its child spans are finished. The `idleTimeoout` defaults to `3000` milliseconds (three seconds). You can also disable the idle timeout by setting it to `null`, but the transaction must be finished manually in this case.
 
 <Note>

src/platforms/android/configuration/integrations/jetpack-compose.mdx

@@ -8,13 +8,82 @@ categories:
   - mobile
 ---
 
-The `sentry-compose` library provides [Jetpack Compose](https://developer.android.com/jetpack/androidx/releases/compose) Navigation support for Sentry.
+The `sentry-compose-android` library provides [Jetpack Compose](https://developer.android.com/jetpack/androidx/releases/compose) support for the following interactions:
+* User interactions like clicks, swipes and scroll gestures
+* Jetpack Compose navigation
 
-On this page, we get you up and running with Sentry's Compose Navigation Integration, so that it will automatically add a breadcrumb and start a transaction for each navigation event.
+## User Interactions
+_(New in version 6.10.0)_
 
-## Auto-Installation With the Sentry Android Gradle Plugin
+### Installation
 
-### Install
+To add the Jetpack Compose integration, install the [Android SDK](/platforms/android/), then add the `sentry-compose-android` dependency using Gradle:
+
+```groovy
+implementation 'io.sentry:sentry-android:{{ packages.version('sentry.java.android', '6.2.0') }}'
+implementation 'io.sentry:sentry-compose-android:{{ packages.version('sentry.java.compose', '6.2.0') }}'
+```
+
+### Configuration
+
+This feature is disabled by default, but you can enable it the following ways.
+
+#### Using `AndroidManifest.xml`
+```xml {filename:AndroidManifest.xml}
+<application>
+    <meta-data android:name="io.sentry.traces.user-interaction.enable" android:value="true" />
+    <meta-data android:name="io.sentry.breadcrumbs.user-interaction" android:value="true" />
+</application>
+```
+
+#### Using `SentryOptions`
+
+If you initialize the SDK [manually as mentioned here](/platforms/android/configuration/manual-init/), you can enable user interactions like this:
+```kotlin {filename:MyApplication.kt}
+SentryAndroid.init(this) { options ->
+    // ...
+    options.isEnableUserInteractionTracing = true
+    options.isEnableUserInteractionBreadcrumbs = true
+}
+```
+
+The Sentry SDK utilizes the built-in `Modifier.testTag("<tag>")` of a Composable to determine its identifier. Here's an example:
+
+```kotlin
+import androidx.compose.ui.platform.testTag
+@Composable
+fun LoginScreen() {
+  Column {
+    // ...
+    Button(
+        modifier = Modifier.testTag("button_login"),
+        onClick = { TODO() }) {
+        Text(text = "Login")
+    }
+  }
+}
+```
+
+<Note>
+
+If a `@Composable` doesn't have a `testTag` modifier applied, both breadcrumbs and transactions won't be captured because they can't be uniquely identified.
+
+</Note>
+
+<Note>
+
+If you want to customize the recorded breadcrumbs/transactions, you can skip to [the section below](#customize-the-recorded-breadcrumbtransaction).
+
+</Note>
+
+## Jetpack Compose Navigation
+
+
+In this section, we get you up and running with Sentry's Compose Navigation Integration, so that it will automatically add a breadcrumb and start a transaction for each navigation event.
+
+### Auto-Installation With the Sentry Android Gradle Plugin
+
+#### Install
 
 If you're using the [Sentry Android Gradle Plugin](/platforms/android/gradle/), the Jetpack Compose Navigation Integration is automatically applied, and both breadcrumbs and transactions are automatically created for every navigation event.
 
@@ -50,7 +119,7 @@ Learn more about the Sentry Android Gradle plugin in our [Gradle](/platforms/and
 
 </Note>
 
-### Disable
+#### Disable
 
 If you want to disable the Jetpack Compose instrumentation feature, you can adapt your `build.gradle(.kts)` file like so:
 
@@ -77,9 +146,9 @@ sentry {
 }
 ```
 
-## Manual Installation
+### Manual Installation
 
-### Install
+#### Install
 
 Sentry captures data by adding a `withSentryObservableEffect` extension function to `NavHostController`. To add the Navigation integration, install the [Android SDK](/platforms/android/), then add the `sentry-compose` dependency using Gradle:
 
@@ -88,7 +157,7 @@ implementation 'io.sentry:sentry-android:{{ packages.version('sentry.java.androi
 implementation 'io.sentry:sentry-compose-android:{{ packages.version('sentry.java.compose.android', '6.2.0') }}'
 ```
 
-### Configure
+#### Configure
 
 Configuration should happen in the respective `@Composable` function, once you obtain an instance of `NavHostController`:
 
@@ -110,7 +179,7 @@ NavHost(
 
 By default, the navigation transaction finishes automatically after it reaches the specified [idleTimeout](/platforms/android/configuration/options/#idle-timeout) and all of its child spans are finished. You can customize the timeout to your needs.
 
-## Verify
+### Verify
 
 This snippet includes a sample `Activity` with a couple of navigation events between composables and captures an intentional message, so you can test that everything is working as soon as you set it up: