How Can I Integrate Crash of AppGallery Connect in React Native? - Huawei Developers

HUAWEI AppGallery Connect Crash supports multiple platforms. Here’s how you can integrate the AppGallery Connect React Native plug-in. If you want to experience the remote configuration function, see the GitHub demo.
Integration Procedure
1. Install the React Native dependency.
npm install -g yarn
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Create a project and enable Remote Configuration.
a) In AppGallery Connect, create an Android app, add the app to a project, and enable Crash and HUAWEI Analytics for it.
b) Run the following command to create a React Native project. In this example, name the project rncrashdemo.
npx react-native init rncrashdemo
c) Add the configuration file to your React Native project.
Add the agconnect-services.json file to the android/app directory of the React Native project.
d) Configure the Maven repository address and AppGallery Connect plug-in address.
1) Open the build.gradle file in the android directory of your React Native project.
Go to allprojects > repositories and configure the Maven repository address.
Go to buildscript > repositories and configure the Maven repository address.
Go to buildscript > dependencies and configure the AppGallery Connect plug-in address.
2) Add build dependencies and the AppGallery Connect plug-in address.
Open the build.gradle file in the android/app directory of the React Native project and add the plug-in address.
3. Install the plug-in.
In the project directory, run the following command to install the Crash plug-in.
npm install @react-native-agconnect/crash
4. Test the Crash service.
You can set a button to determine whether to report crashes. Create another button for testing. Click the button, call setUserId to set a custom user ID, call setCustomKey to set a custom key-value pair, call LogLevel to customize the log level, and call testIt to trigger a crash.
5. Install an app.
Run the yarn android command to install your app.
Viewing a Crash Report
After integration, click the test button to trigger a crash and generate a custom crash report. You can view the report in AppGallery Connect.
1. Select Last hour.
2. View details about crash stack information.
3. View custom key-value pairs.
4. View custom log levels.
5. View custom user IDs.
Reference
1. HUAWEI AppGallery Connect Crash documentation: https://developer.huawei.com/consum...Gallery-connect-Guides/agc-crash-introduction
2. HUAWEI AppGallery Connect Crash demo: https://github.com/AppGalleryConnect/agc-reactnative-plugin/tree/master/agc-crash-reactnative

Related

Coding-free Integration of AppGallery Connect Crash into an Android App

According to Huawei official document, AppGallery Connect Crash is a lightweight crash analysis service, in which Huawei provides a Crash SDK that can be quickly integrated into your app, without the need for coding. The SDK integrated into your app can automatically collect crash data and report the data to AppGallery Connect when your app crashes, helping you understand the version quality of your app, quickly locate the causes of crashes, and evaluate the impact scope of crashes.
In other words, Huawei provides an SDK. You can view the crash information of your app as long as you integrate it. No code is required. Isn't it great? Let's see how it works.
Creating Your Project and App
First, you need to create a project in AppGallery Connect and add an app to it. For details, see the AppGallery Connect documentation.
Enabling HUAWEI Analytics
The Crash service uses capabilities of HUAWEI Analytics when reporting crash events. Therefore, you must enable HUAWEI Analytics before integrating the Crash SDK. For details, please refer to the AppGallery Connect documentation.
Integrating SDKs
If you are using Android Studio, you need to integrate the Crash SDK into your Android Studio project before development.
1. Sign in to AppGallery Connect and click My projects.
2. Find the project you created from the project list, and click the app for integration on the project card.
3. Go to Project Settings > General information, and click agconnect-services.json under App information to download the configuration file.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
4. Copy the agconnect-services.json file to the app's root directory of your Android Studio project.
5. Open the build.gradle file in the root directory of your Android Studio project, and configure the Maven repository address and AppGallery Connect plug-in address.
HTML:
buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.3'
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
HTML:
allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
}
6. Integrate the latest versions of the Analytics SDK and Crash SDK.
HTML:
dependencies {
implementation 'com.huawei.hms:hianalytics:5.0.4.200'
implementation 'com.huawei.agconnect:agconnect-crash:1.4.1.300'
}
7. Click Sync Now to synchronize the configuration.
Testing the Crash Service
You can create a test button CrashTest in your demo project, and call the testIt method provided by AppGallery Connect to trigger a crash.
The sample code for creating the button is as follows:
HTML:
<Button
android:id="@+id/btn0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize= "22dp"
android:textAllCaps="false"
android:text="CrashTest" />
The sample code for a tapping event is as follows:
HTML:
Button btn_crash0 = findViewById(R.id.btn0);
btn_crash0.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View view) {
AGConnectCrash.getInstance().testIt(MainActivity.this);
}
});
Package and run your app, and tap the CrashTest button to trigger a crash.
Viewing a Crash Report
You can view the details of the crash that you just triggered in AppGallery Connect.
1. Sign in to AppGallery Connect, go to My projects, and click your app.
2. Go to Quality > Crash. On the Crash page, click the Statistics tab, and view crash statistics of your app. The crash information is displayed 1 or 2 minutes after you run your app.
3. Click the Problems tab, and view the crash of your app. For example, in the following figure, java.lang.NullPointerException is the null pointer issue triggered during the test.
Click the crash to view its details. The possible causes of the crash are displayed, as shown in the following figure, helping you analyze the crash.
Summary:
1. It is easy to integrate the Crash service. During testing, you can either write code yourself, or use the testIt method provided by AppGallery Connect.
2. Crash reports are available in only 1 or 2 minutes.
3. All you need to write is just a few lines of code during testing. The service integration for app release is coding-free.
4. The Crash service also provides features including monitoring NDK crash reports, restoring obfuscated reports, and generating custom reports.
For more details, check:
HUAWEI AppGallery Connect Crash documentation: https://developer.huawei.com/consum...Gallery-connect-Guides/agc-crash-introduction
Huawei AGC Crash codelab:
https://developer.huawei.com/consumer/en/codelab/CrashService/index.html#0
Crash service supports to track Run time expectation data.
sujith.e said:
Crash service supports to track Run time expectation data.
Click to expand...
Click to collapse
yes, it begins to supports to track Runtime exception from 1.4.2.300 SDK version in November 20.

How Can I Integrate Remote Configuration of AppGallery Connect in Flutter?

Recently, it is found that some services of AppGallery Connect start to support cross-platform frameworks, including Flutter. Let's have a try on Remote Configuration.
Integration Procedure
1. Install the Flutter environment.
a) Download the Flutter SDK package from https://flutter.dev/docs/get-started/install/windows.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Decompress the package to any directory, for example, D:\Flutter.
b) Add Flutter to environment variables. Here, the path is D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin.
c) In Android Studio, go to File > Settings > Plugins, download the Flutter and Dart plug-ins, and restart Android Studio for the plug-ins to take effect.
2. Create a project and enable Remote Configuration.
a) Create an Android project in AppGallery Connect and enable Remote Configuration.
b) Add the following configuration items to Remote Configuration.
c) In Android Studio, go to File > New > New Flutter Project… and create a Flutter project.
d) Go to Project settings > General information in AppGallery Connect. In the App information area, download the agconnect-services.json file.
e) Place the agconnect-services.json file in the directory shown in the following figure.
f) Configure the Maven repository and Remote Configuration plug-in in the app-level build.gradle file.
g) Open the build.gradle file in the android/app directory of the Flutter project and add the build dependencies and AppGallery Connect plug-in address.
3. Integrate the Remote Configuration SDK.
Add the SDK dependency of Remote Configuration to the pubspec.yaml file.
Click Pub get to synchronize the data.
4. Test basic functions.
Here I implement a simple demo app to demonstrate several of the most important functions.
In the UI design, the Mode 1:Fetch And Activate Immediately, Mode 2:Fetch And Activate Next Time, and Clear Data buttons are provided to implement the following functions:
1. Obtain data from the cloud. This operation takes effect this time.
Tap Mode 1:Fetch And Activate Immediately to call fetch and then applyLastFetched to obtain the data fetched this time. The operation will take effect immediately. Therefore, we call the getMergedAll API to apply all the settings to the device. Then, we can obtain the data from the cloud on the device. The following figure shows the tap effect.
2. Obtain the cloud data and make the setting obtained last time take effect.
The API for delaying the setting to take effect shares the same implementation logic as that for making the setting take effect immediately, and they differ in the execution sequence.
Tap Mode 2:Fetch And Activate Next Time to call apply and getMergedAll to apply the last fetch result, and then call fetch to obtain the latest setting for next use.
3. Clear the data.
To clear data, tap Clear Data to call the clearAll API.
4. Set local configuration items.
You can create a Map parameter in the*.dart file and call the applyDefault API to apply the local settings.
HTML:
Map defaults = {
'mLong': 1000,
'mString': 'hello world',
'mDouble': 3.14,
'mBoolean': true
};
AGCRemotConfig.instance.applyDefaults(defaults);
5. Package your app.
Similar to Android, you only need to run your project in Android Studio.
Precautions
Different from setting local configuration items on the Android platform, Flutter cannot use XML files to store local configuration items.
For more details, check:
Flutter official guide: https://flutter.dev/docs/get-started/install/windows
To view more about how to integrate Remote Configuration into an Android project, visit https://developer.huawei.com/consum...-connect-Guides/agc-remoteconfig-introduction.
Demo of Remote Configuration(Flutter):https://developer.huawei.com/consum...oteconfig-flutter-samplecode-0000001056579535
Is there any usage restriction?
riteshchanchal said:
Is there any usage restriction?
Click to expand...
Click to collapse
there are some restriction as follows. For more restriction, please focus on the official document
A single project can have a maximum of 2000 parameters and 500 conditions. The total length of all parameter strings cannot exceed 800 KB.
The interface invoking frequency cannot exceed 20 times per hour.

Coding-free Integration of AppGallery Connect Crash in Flutter

HUAWEI AppGallery Connect Crash supports multiple platforms. Here’s how you can integrate the AppGallery Connect Flutter plug-in.If you want to quickly experience this service, see the demo on GitHub.
Integration Procedure
1. Install the Flutter environment.
a) Download the Flutter SDK package from https://flutter.dev/docs/get-started/install/windows.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Decompress the package to any directory.
b) Add the Flutter command file to the environment variable.
c) Download the Flutter and Dart plug-ins in Android Studio.
2. Create a project and enable Crash.
a) In AppGallery Connect, create an Android app, add the app to a project, and enable Crash and HUAWEI Analytics for it.
b) In Android Studio, create a Flutter project.
c) Add the agconnect-services.json file to the android/app directory.
d) Configure the Maven repository address and AppGallery Connect plug-in address.
1) Open the build.gradle file in the android directory of the Flutter project.
Go to allprojects > repositories and configure the Maven repository address for the AppGallery Connect SDK.
Go to buildscript > repositories and configure the Maven repository address for the AppGallery Connect SDK.
Go to buildscript > dependencies and configure the AppGallery Connect plug-in address.
2) Add build dependencies and the AppGallery Connect plug-in address.
Open the build.gradle file in the android/app directory of the Flutter project and add the plug-in address.
3. Integrate the Crash SDK.
Add the SDK dependency of Crash to the pubspec.yaml file.
Click Pub get to synchronize the data.
After the data is synchronized, you can view the downloaded file here.
4.Test the Crash service.
You can set two buttons to determine whether to report crashes. Create another button for testing. Click the button, call setUserId to set a custom user ID, call setCustomKey to set a custom key-value pair, call LogLevel to customize the log level, and call testIt to trigger a crash.
5. Package the APK file.
Similar to Android, you only need to run your project in Android Studio.
Viewing a Crash Report
After integration, click the test button to trigger a crash and generate a custom crash report. You can view the report in AppGallery Connect.
1、 Select Last hour.
2、View details about crash stack information.
3、 View custom key-value pairs.
4、 View custom log levels.
5、 View custom user IDs.
6、Generate and upload a mapping file to de-obfuscate the crash report.
For more details, please check:
1、HUAWEI AppGallery Connect Crash documentation: https://developer.huawei.com/consum...Gallery-connect-Guides/agc-crash-introduction
2、HUAWEI AppGallery Connect Crash codelab: https://developer.huawei.com/consumer/en/codelab/CrashService/index.html#0
https://github.com/AppGalleryConnect/agc-demos/tree/main/Flutter/agc-crash-flutter

How Can I Integrate Remote Configuration of AppGallery Connect in Cordova?

Recently, it is found that AppGallery Connect Remote Configuration starts to support Cordova. The integration is rather simple, let’s have a try.If you want to quickly experience this service, see the demo on GitHub.
Integration Procedure
1. Create a project directory on your computer, run the following npm command to install Cordova.
npm install -g cordova
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Create a project and enable Remote Configuration.
a) Create an Android app in AppGallery, add it to a project, enable Remote Configuration, and add a parameter.
b) Run the following command to create a Cordova project. In this example, name the project RemoteConfig.
cordova create RemoteDemo com.huawei.cordova.remoteconfig RemoteConfig Creating a new cordova project.
c) Add an app platform to the project.
In the project directory, run cordova platform add android to add the Android platform.
Run cordova platform -l to view the supported platforms.
d) Go to Project settings in AppGallery Connect, download the agconnect-services.json file, and add the file to the android/app directory of your project.
e) Install the AppGallery Connect plug-in.
cordova plugin add @Cordova-plugin-agconnect/remoteconfig --save
After the plug-in is installed, you can view it in the plugins directory.
Add the AppGallery Connect plug-in address to app/build.gradle.
3. Use the Remote Configuration service.
1. Fetch data from the cloud. The data takes effect this time.
Call the fetch API to fetch parameter values from the cloud, and call the apply API to make them take effect.
You can view the fetched parameter values on the cloud in log information.
The other values displayed in log information are local ones.
2. Fetch the cloud data and make the parameter values fetched last time take effect.
Replace the fetch API with applyLastFetch to fetch data that is fetched from the cloud last time.
3. Clear the data.
Call the clearAll API to clear the cached data that is fetched earlier.
4. Fetch the value of a key from the cloud.
Call getValue to fetch related data from the cloud.
4. Compile and install an app package.
Run the cordova build android command to compile the project.
Find the APK package in the build folder in the android directory.
For more details, please check:
Cordova documentation:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
Remote Configuration API Reference:
https://github.com/AppGalleryConnect/agc-demos/tree/main/Cordova/agc-remoteconfig-cordova
Remote Configuration Demo:
https://github.com/AppGalleryConnect/agc-demos/tree/main/Cordova/agc-remoteconfig-cordova

How Can I Integrate Remote Configuration of AppGallery Connect in React Native?

If you want to experience the remote configuration function, see the GitHub demo.
1. Install the React Native dependency.
npm install -g yarn
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
2. Create a project and enable Remote Configuration.
a) Create an Android app in AppGallery, add it to a project, enable Remote Configuration, and add a parameter.
b) Run the following command to create a React Native project. In this example, name the project RemoteConfig.
npx react-native init RemoteConfig
c) Add the configuration file to your React Native project.
Add the agconnect-services.json file to the android/app directory of the React Native project.
d) Configure the Maven repository address and AppGallery Connect plug-in address.
1) Open the build.gradle file in the android directory of your React Native project.
Go to allprojects > repositories and configure the Maven repository address.
Go to buildscript > repositories and configure the Maven repository address.
Go to buildscript > dependencies and configure the AppGallery Connect plug-in address.
2) Add build dependencies and the AppGallery Connect plug-in address.
Open the build.gradle file in the android/app directory of the React Native project and add the plug-in address.
3. Install the plug-in.
Add the plug-in to dependencies under the package.json file in your project.
Call npm install or yarn install to install the plug-in.
npm install
4. Use the Remote Configuration service.
a) Apply the local settings.
You can set the local settings to Map format and call the applyDefault API to apply them.
b) Fetch the cloud data or the parameter values fetched last time.
Call the fetch API to fetch parameter values from the cloud with an interval.
Similarly, call applyLastFetch to fetch data that is fetched from the cloud last time.
c) Merge the local and cloud data.
Call getMergedAll to merge the local and cloud data.
d) Clear the data.
Call the clearAll API to clear the cached data that is fetched earlier.
e) Fetch the value of a key from the cloud.
Call getValue to fetch related data from the cloud.
f) Package the APK file.
Run the yarn android command under the root directory of your project.
g) Result
You can obtain all required parameter values and on-cloud parameter values.
For more:
AppGallery Connect RemoteConfiguration Demo:https://github.com/AppGalleryConnect/agc-reactnative-plugin/tree/master/agc-remoteconfig-reactnative
thanks for guide
temkarus0070 said:
thanks for guide
Click to expand...
Click to collapse
you are welcome.Thank you for your like.

Categories

Resources