This guide provides instructions on how to integrate Instabug's Bug Reporting, Crash Reporting, and App Performance Monitoring features into your Jetpack Compose application. Following these steps, you can capture and report bugs and crashes from your Compose UI.

Integration Methods

There are two ways to integrate Jetpack Compose with Instabug:

• Automatic Approach - We detect the screens if you are using the Compose Navigation library.
• Manual Approach - You define each screen using an API.

Common Integration Steps

For both the manual and automatic approach, you must use these common integration steps:

For Bug Reporting & Crash Reporting only

implementation "androidx.compose.ui:ui:$compose_version" 
implementation "com.instabug.library:instabug-compose:x.x.x"

For Bug Reporting, Crash Reporting, & APM

implementation "androidx.compose.ui:ui:$compose_version" 
implementation "androidx.compose.foundation:foundation:$compose_version" 
implementation "com.instabug.library:instabug-compose-apm:x.x.x"

📘

Minimum & Maximum Compose UI and Foundation versions

The minimum supported compose.ui and compose.foundation version is 1.1.0, and the maximum supported version is 1.5.0.

❗️

All compose.ui and compose.foundation versions below 1.1.0 are not supported and using them may cause your app to crash.

🚧

For APM:

The SDK will be responsible for laying out the application’s UI to be able to measure the performance of the composable screen.

IBGScreen is a UI composable that could be considered a Box UI, as it provides Box scope to its children. It has the below signature:

fun IBGScreen(screenName: String, modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit)

Automatic Approach

If you are using Compose Navigation, you can capture Compose View Names and their performance out-of-the-box without any code change. You will just need to add these configurations to your Gradle - build.gradle file:

classpath "com.instabug.library:instabug-plugin:x.x.x"

plugins { 
id 'com.android.application' 
id 'instabug' }

instabug {
setCaptureComposeNavigationDestinations(true)
}

📘

Minimum & Maximum Compose Navigation versions

The minimum supported Compose Navigation version is 2.4.0, and the maximum supported version is 2.6.0.

Manual Approach

Define Screen Names

In order to track and identify screens in your Compose app, you‘ll need to define screen names using the IBGScreen function. The screen name will correspond to the current view in your app, and Instabug will use the latest UI component to update screens.

Example usage of IBGScreen in a Compose UI:

@Composable
fun HomeScreen() {
    IBGScreen(screenName = "Home Screen") {
        Box {
           // Your Compose UI code goes here
        }
    }
}

Replace "Home Screen" with a descriptive name that represents the screen you're integrating Instabug with. Make sure to use unique screen names for each screen in your app.

Define a strategy to capture Fragments

If you have Fragments in your app, you can choose whether Instabug captures NavFragments or if it should follow its current strategy of capturing Fragments.

Instabug.setFragmentStrategy(.NavFragment, .LatestVisibleFragment)

Jetpack Compose Support

We currently support the following products:

• Bug Reports
• Crashes
• App launches and screen loading Compose view performance
• Network calls that happen on a Compose view
  • Note that you’ll have to configure the network metric separately

We currently don't support the following features:

• User Steps that happened inside a Compose View
• Repro steps (including interactions) that happened inside a Compose View
• Auto masking of screenshots captured by Repro Steps
  • Accordingly, we’d highly recommend disabling Repro Steps with screenshots in case you’re using Jetpack Compose on your app

📘

Minimum SDK Version

Supporting Jetpack Compose requires a minimum Instabug Android SDK version of 12.1.0.