[Huawei Developers] HMS Community:
View attachment 5576435

Introduction

In this article, I will explain how to integrate Huawei Crash Kit in a News Application using React Native. This kit provides a crash analysis service where we can quickly detect, locate, and resolve app crashes (unexpected exits of apps), and have access to highly readable crash reports in real time. It is very easy to integrate.

Requirements

1. JDK version: 1.7 or later

2. Android Studio version: 3.X or later

3. minSdkVersion: 21 or later

4. targetSdkVersion: 31 (recommended)

5. compileSdkVersion: 29 (recommended)

6. Gradle: 4.1 or later (recommended)

7. Must have a Huawei Developer Account

8. Must have a Huawei phone with HMS 4.0.0.300 or later and running EMUI 4.0 or later.

9. React Native environment with Android Studio, Node Js and Visual Studio code.

Preparation

In order to develop the HMS react native apps, following steps are mandatory:

1. First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.

2. Create a project in android studio, refer Creating an Android Studio Project.

3. Generate a SHA-256 certificate fingerprint.

4. To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.

Or use cmd as explained in SHA256 CODE

5. Create an App in AppGallery Connect.

6. Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.

View attachment 5576437

7. Enter SHA-256 certificate fingerprint and click Save, as follows.

View attachment 5576439

8. Create a react native project. Use the following command

react-native init project name

9. Enabling the Crash Service

(i). Sign in to AppGallery Connect and click My projects.

(ii). Find your project from the project list and click the app for which you need to enable the Crash service on the project card.

(iii). Choose Quality > Crash. The Crash page is displayed.

View attachment 5576441

Note: To use the Crash service, you need to enable HUAWEI Analytics first. If you have not enabled HUAWEI Analytics, click Enable now, or navigate to HUAWEI Analytics to enable the service.

Integration

1. Configure android level build.gradle.

Add to buildscript/repositories and allprojects/repositories

maven {url 'http://developer.huawei.com/repo/'}

2. Adding permissions

Add below permissions to Android.manifest file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

3. Download the Plugin using NPM.

Open project directory path in command prompt and run this command.

npm i @react-native-agconnect/crash

4. Integrate the Crash SDK.

Add the following code to the app-level build.gradle file (usually in the app directory):

(i).

implementation 'com.huawei.agconnect:agconnect-crash:1.6.4.300'

(ii). Integrate the APM SDK to further locate whether an app crash is caused by an app event or behavior such as ANR, launch, and network request.

implementation 'com.huawei.agconnect:agconnect-apms:1.5.2.307'

Sync Gradle.

Development

To successfully crash service, we would need to:

Initialize the AGConnectCrash instance.

AGConnectCrash.getInstance()

Collect or report crash data.

AGConnectCrash.enableCrashCollection(Boolean)

For instance, in my News Application, if Food field is clicked, it will not fetch any Data and an error (Namely NoDataExpection extending RuntimeException) would be thrown which will cause app to crash.

We just have to add this code, so that When app encounters crash, Crash service reports the crash on dashboard in AppGallery connect.

View attachment 5576443

AGConnectCrash.getInstance().enableCrashCollection(true)

If you want to test crash kit you can follow simple steps:

AGCCrash.testIt() is used to test the crash. We can view the crash data in AppGallery Connect to check whether the crash service is running properly.

AGCCrash.testIt()

2. Set custom user ID.

We can use custom id for identifying the users uniquely.

AGCCrash.setUserId("123");

3. Add Custom Key – Value Pair.

AGCCrash.setCustomKey is used to add the crash record status.

AGCCrash.setCustomKey("key", "value");

Testing

Run the below command to build the project.

React-native run-android

Run the application (Generating the Signed Apk):

Open project directory path in command prompt. Navigate to android directory and run the below command for signing the apk.

gradlew assembleRelease

Result/ Crash Report

To monitor crash:

1. Sign in to AppGallery Connect and select my project.

2. Choose the app.

3. Select Quality > Crash on left panel of the screen.

View attachment 5576445

4. View details about crash stack information.

View attachment 5576447

5. View custom key-value pairs.

View attachment 5576449

6. We can also View custom log levels and custom user IDs.

To enable Crash service notifications

1. Sign in AppGallery and Select User and Permissions.

2. Select User > Personal Information.

3. Select the check box under Email for Crash notification under notification.

Tips and Tricks

1. Set minSDK version to 24 or later, otherwise you will get AndriodManifest merge issue.

2. agconnect-services.json is not required for integrating the hms-ads-sdk.

3. Make sure you have added SHA-256 fingerprint without fail.

4. Make sure all the dependencies are added properly.

Huawei Crash services work on non-Huawei device.

5. AGConnectCrash.getInstance().testIt(mContext) triggers app crash. Make sure to comment or remove it before releasing your app.

6. Crash Service takes around 1 to 3 minutes to post the crash logs on App Gallery connect dashboard/console.

7. Crash SDK collects App and system data.

System data :

AAID, Android ID (obtained when AAID is empty), system type, system version, ROM version, device brand, system language, device model, whether the device is rooted, screen orientation, screen height, screen width, available memory space, available disk space, and network connection status.

App data:

APK name, app version, crashed stack, and thread stack.

8. The Crash SDK collects data locally and reports data to the collection server through HTTPS after encrypting the data.

9. For project cleaning navigate to android directory and run the below command.

gradlew clean

Conclusion

In this article, we learnt about how to integrate Crash Kit in React native project. It is very simple and quick way to detect, locate and resolve app crashes.

Reference

Crash Kit: Documentation

Crash Kit: Training Video