Skip to content

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

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

Merged
merged 11 commits into from
Dec 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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 interactionfor 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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand All @@ -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:

Expand All @@ -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`:

Expand All @@ -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:

Expand Down