Dynatrace React Native Plugin
The Dynatrace React Native plugin helps to auto-instrument your React Native app with Dynatrace OneAgent for Android and iOS and provides a TypeScript bridge to add manual instrumentation. It is compatible with raw, ejected React Native projects. Which means it works with Expo Kit, but not with Expo.
Currently this plugin is available as an early access version. If you want to test it, please sign up for the EAP.
Supported features
The following features are currently supported:
- Auto-instrumentation using OneAgent for Android and iOS
- User actions for AppStart and native controls
- Web requests
- Crashes
- React-native instrumentation
- User actions for touches Touchables and lifecycle events such as render(), didMount() and didUpdate()
- Reporting React Native Errors
- Manual instrumentation
- Typescript bindings to add manual instrumentation
Requirements
- React Native >= 0.48
- Gradle >= 5.0 (How to upgrade?)
- React Native Instrumentation => ES6 Classes
- For Android users: Minimum SDK version 15
- For iOS users: Minimum iOS 6
Quick Setup
- Eject your app
- Install plugin
- Register Dynatrace transformer
- Setup Configuration
- Run auto instrumentation
- Build and run your app
Advanced topics
Quick Setup
1. Eject your app
- If your app is not yet ejected do it now by calling
react-native eject
. This generates the Android and iOS folders that are required by the plugin.
2. Install the plugin
- Install the plugin by calling
react-native install @dynatrace/react-native-plugin
.
- Implicitely this will also call
react-native link @dynatrace/react-native-plugin
which will automatically add the iOS agent pod to your iOS project. - An installation script registers a script in package.json that will be used for auto-instrumentation later on.
Troubleshooting
- Expo-Kit only: the installation script does not get triggered automatically. You can call it manually by running
node ./node_modules/@dynatrace/react-native-plugin/scripts/install.js
- If for some reason (e.g. seperate native projects)
react-native link
does not work as expected, you can manually add the iOS agent to your project
Manually add the iOS agent to your project (with CocoaPods support)
insert the following in your Podfile:
pod 'react-native-dynatrace', :path => '../node_modules/@dynatrace/react-native-plugin'
Manually add the iOS agent to your project (without CocoaPods support)
- Open your project in Xcode
- Run open
node_modules/@dynatrace/react-native-plugin/ios
- Drag
DynatraceRNBridge.xcodeproj
into your Libraries group - Select your main project in the navigator to bring up settings
- Under Build Phases expand the Link Binary With Libraries header
- Scroll down and click the + to add a library
- Find and add
libRNDynatrace.a
under the Workspace group - ⌘+B
3. Register the Dynatrace transform
Depending on your react native version you will need to use a different way to register the transformer. If you don't know it, you can use react-native --version
to get it.
RN >= 0.59
In your projects root, either create or extend metro.config.js
so it contains the transformer.babelTransformerPath
property:
module.exports = {
transformer: {
babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
}
};
RN >= 0.57, < 0.59
Add this to your rn-cli.config.js
(make one if you don't have one already):
module.exports = {
transformer: {
babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
}
}
RN < 0.57
Add this to your rn-cli.config.js
(make one if you don't have one already):
module.exports = {
getTransformModulePath() {
return require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
}
}
4. Create dynatrace.config
Define a mobile app in Dynatrace and open the Mobile app instrumentation settings. Open the dynatrace.config
in the root directory that was already created by the npm install script and update the applicationId, beaconUrl for Android and DTXApplicationID and DTXBeaconURL for iOS.
Attention: If you were upgrading from a previous version of this plugin, you'll notice that the file format changed. Your old configuration was renamed to dynatrace.config.old
and you have to update the variables again.
If you want to know more details about the configuration you can find them in the Advanced Topics section.
5. Run auto instrumentation
Execute npm run instrumentDynatrace
in the root of your React Native project. This will configure both Android and iOS project with the settings from dynatrace.config
.
Command line arguments
This scripts assumes that the usual react native project structure is given. The following arguments can be specified if the project structure is different.
gradle=C:\MyReactAndroidProject\build.gradle
- the location of the root build.gradle file. We will assume that the other gradle file resides in /app/build.gradle
. This will add the whole agent dependencies automatically for you and will update the configuration.plist=C:\MyReactIOSProject\projectName\info.plist
- Tell the script where your info.plist file is. The plist file is used for updating the configuration for the agent.config=C:\SpecialFolderForDynatrace\dynatrace.config
- If you have not got your config file in the root folder of the React Native project but somewhere else.
6. Build and run your app
Use react-native run-android
or react-native run-ios
to rebuild and run your app.
Advanced topics
Manual Instrumentation
- Import and initialize the bridge:
import { Dynatrace } from '@dynatrace/react-native-plugin';
- Use manual instrumentation almost as you would in a native app. For example:
let myAction = Dynatrace.enterAction("MyButton tapped");
myAction.leaveAction();
- You will notice that each method has an addition optional parameter
platform
of type String
. You can use this to only trigger manual instrumentation for a specific OS. The available values are: ios
, android
and all
.
If you provide any platform value, then the manual instrumentation call is passed to both iOS and Android. Otherwise it is passed only to the relevant OS. For example:
let myAction = Dynatrace.enterAction("MyButton tapped", Dynatrace.PLATFORM_IOS);
myAction.leaveAction("ios");
let myAction = Dynatrace.enterAction("MyButton tapped", Dynatrace.PLATFORM_ANDROID);
myAction.leaveAction("android");
let myAction = Dynatrace.enterAction("MyButton tapped");
myAction.leaveAction();
Please refer to the TypeScript bindings to see the full API that is available for manual instrumentation. The file can be found in the plugin directory ./node_modules/@dynatrace/react-native-plugin/typings/react-native-dynatrace.d.ts
.
Exclude Packages & Limit Instrumentation
It is possible to exclude certain packages or files from the instrumentation process. In case of a few packages this is even
Structure of the dynatrace.config
file
The configuration is structured in the following way
<dynatrace>
<react>
// Configuration for React Native instrumentation
</react>
<android>
// Configuration for Android auto instrumentation
</android>
<ios>
// Configuration for iOS auto instrumentation
</ios>
</dynatrace>
React Block
The react
configuration block contains all settings regarding the react instrumentation. The following options are possible:
Filters
<react>
<exclude>
<path name="node_modules/libraryOne" event="TOUCH"/>
<path name="node_modules/libraryTwo" event="LIFE"/>
<path name="node_modules/libraryThree" event="ALL"/>
</exclude>
</react>
The excludes defined above will have the following consequence:
- LibraryOne will have NO Touch instrumentation (no button clicks)
- LibraryTwo will have NO Lifecycle instrumentation (no ComponentDidMount)
- LibraryThree will have NO instrumentation at all
Debug Mode
<react>
<debug>true</debug>
</react>
This will activate the debug mode. You will get more console output during instrumentation and at runtime.
Android Block
The Android block is just a wrapper for the Android configuration you find in the WebUI (in the Mobile Application Settings). Just copy the content into the following block:
<android>
<config>
// Your Android Configuration
</config>
</android>
The content of the config
block will be directly copied to the gradle file. If you want to know more about the possible configuration options have a look into the DSL documentation of our gradle plugin. (You can find it locally in @dynatrace\react-native-plugin\android\eap\docs\plugin\dsl
)
iOS Block
The iOS block is just a wrapper for the iOS configuration you find in the WebUI (in the Mobile Application Settings). Just copy the content into the following block:
<ios>
<config>
// Your Android Configuration
</config>
</ios>
The content of the config
block we be directly copied to the plist file, so you can use every setting that is possible and you find in the official Mobile Agent documentation.
Define build stages in dynatrace.config
If you have several stages like debug, qa or production you probably want to seperate them and let them report in different applications. This is possible with a different configuration.
Android
In Android you can enter all the information in the config file. So the following dynatrace {} block should be inserted into the android config xml block in your dynatrace.config file.
dynatrace {
configurations {
dev {
variantFilter "Debug" // build type name is upper case because a product flavor is used
// other variant-specific properties
}
demo {
variantFilter "demo" // the first product flavor name is always lower case
// other variant-specific properties
}
prod {
variantFilter "Release" // build type name is upper case because a product flavor is used
// other variant-specific properties
}
}
}
the above will lead to the following result:
> Task :app:printVariantAffiliation
Variant 'demoDebug' will use configuration 'dev'
Variant 'demoRelease' will use configuration 'demo'
Variant 'paidDebug' will use configuration 'dev'
Variant 'paidRelease' will use configuration 'prod'
In all those blocks you can define your different applicationIds. You can even use a different environment.
iOS
In iOS you can define some variables in the dynatrace.config file. Those variables should then be inserted in a prebuild script. The following properties should be inserted into the iOS config xml block in your dynatrace.config file.
<key>DTXApplicationID</key>
<string>${APPLICATION_ID}</string>
<key>DTXBeaconURL</key>
<string>https://bf04217tce.bf-dev.dynatracelabs.com/mbeacon</string>
The variable ${APPLICATION_ID} must then be inserted with a prebuild script. If you want to know more about this, you should look into: https://medium.com/@andersongusmao/xcode-targets-with-multiples-build-configuration-90a575ddc687
How does Dynatrace determine the user action name?
- React views
- Dynatrace looks if React views have a display name set (using displayName property).
- If the display name is not available, the class name will be used.
- If you minify your react native code you can use the keep_classname setting to preserve the class name.
- Touchables
- Dynatrace looks for an accessibility label first
- If the accessibility label is not set, it will take the first inner text that is found in the element hierarchy
Updating to Gradle 5
Updating Gradle only affects your Android build. To Update your project to Gradle 5 you have to modify 3 files in your Android folder.
ProjectFolder\android\gradle\wrapper\gradle-wrapper.properties
Update the distributionUrl to get a higher gradle version.
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
ProjectFolder\android\build.gradle
Update the version of your Android gradle plugin (here we updated to 3.4.0) as Gradle 5 needs a higher one. To get the newer versions you need to add google()
in your repositories. Example of a build.gradle file:
buildscript {
repositories {
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.4.0'
}
}
allprojects {
repositories {
google()
mavenLocal()
jcenter()
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
ProjectFolder\android\app\build.gradle
This depends on how old your React Native project really is. You need to change your used buildTools, compileSdkVersion, targetSdkVersion and support libaries. Older build.gradle files might look similar to this (Not important parts removed to make the snippet smaller):
...
apply from: "../../node_modules/react-native/react.gradle"
...
android {
compileSdkVersion 28
buildToolsVersion "28.0.3"
defaultConfig {
minSdkVersion 16
targetSdkVersion 28
...
}
...
}
dependencies {
compile "com.android.support:appcompat-v7:28.0.0"
compile "com.facebook.react:react-native:+"
}
...
Dynatrace documentation
The documentation for OneAgent for Android and iOS is available at the following location:
Troubleshooting and current restrictions:
Basically if you have problems with the plugin please have a look into the logs. They will tell you what went wrong. The logs can be found in the plugins folder of your React Native project (usually node_modules/@dynatrace/react-native-plugin/logs
).
- Currently errors/crashes are reported as errors in the user session and are not visible in the crash overview. This will change in upcoming versions.
- Currently on iOS web requests are not linked with user actions. This is because the actions are currently manual and the web request auto-detected. This will change in upcoming versions.
Missing property DTXApplicationID
means that there is no configuration available. Are you sure you called npm run updateConfiguration
at least once?- Be aware if you change your project to pods when you already have installed the plugin, you will end up with duplicate symbols because of the already linked library. Remove the mdoule reference manually from your project.
Changelog
0.179.0
- Made Plugin compatible with RN AutoLinking
- Improved instrumentation of require & imports
- Fixed Button instrumentation
- Improved Text identification of Touchable
- Webrequest linking (Android only)
- Auto User action creation (Android only)
- Report Stacktrace via Error API (Android & iOS)
- Uninstall process now removes everything
- Modifying SourceMap, Debugging now possible
- Fixed configuration issue with npm install
0.174.0
- Switching to new Android instrumentation
- Added options to filter instrumentation
0.172.0
- Error reporting through auto instrumentation
- Debug message output in console
0.171.0
- Added auto instrumentation for React classes
0.168.0