Jetpack Compose

Jetpack Compose

The Embrace SDK injects code into your APK using bytecode instrumentation to automatically capture taps on composables.

Enabling Jetpack Compose instrumentation

info

Requires Jetpack Compose dependency at build time and run time

info

Instrumenting Jetpack Compose click events incurs a small performance penalty on a tap as it requires searching Compose's UI tree. On lower-end devices this may manifest as dropped frames.

Set local config and Gradle plugin block

To enable onClick instrumentation, you will need to modify your embrace-config.json file

{
  "sdk_config": {
    "compose": {
      "capture_compose_onclick": true
    }
  }
}

It's also required to modify your app/build.gradle or app/build.gradle.kts file:

Kotlin

dependencies {
    implementation("io.embrace:embrace-android-instrumentation-compose-tap:9.3.0")
}

Groovy

dependencies {
    implementation("io.embrace:embrace-android-instrumentation-compose-tap:9.3.0")
}

Set ProGuard rule

In order to prevent code obfuscation, the following rule must be added into your R8/ProGuard rules:

-keep class androidx.compose.ui.platform.AndroidComposeView {
    <fields>;
    <methods>;
}

Identify clickable elements

onClickLabel or contentDescription must be added to have a proper way to identify a clicked element. Remember that onClickLabel will have more priority if both properties are set.

onClickLabel

Clickable modifier to define a label and the onClick callback:

Row(
    Modifier
        .clickable(onClickLabel = "someTag", onClick ={...})
){ ... }

Clickable element that already defines the onClick action under the hood.

The following example shows how to add a modifier onClick to override the label but not the actual action, so for the action, it passes null:

IconToggleButton(
    checked = isBookmarked,
    onCheckedChange ={onClick()},
    modifier = modifier.semantics{
        this.onClick(label = clickLabel, action = null)
}
){ ... }

contentDescription

Content description will be considered only if the element contains an OnClick modifier.

Content description can be added as part of Modifier semantics properties, but some elements take it as a parameter, such as Icon:

Icon(
    imageVector = if (isBookmarked) Icons.Filled.Bookmarkelse Icons.Filled.BookmarkBorder,
    contentDescription = "Icon" // handled by click label of parent
)

Content description as Modifier semantics properties:

Column(
    modifier = Modifier
        .clickable(onClickLabel = "test", onClick = {
            Log.d("log", "log")
        })
        .fillMaxWidth()
        .padding(16.dp)
){...}

Important

If you are facing issues at runtime, Jetpack Compose instrumentation can be turned off remotely. Contact us: support@embrace.io