@dynatrace/react-native-plugin
Advanced tools
This plugin gives you the ability to use the Dynatrace Mobile agent in your react native application.
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.
The following features are currently supported:
react-native eject. This generates the Android and iOS folders that are required by the plugin.react-native install @dynatrace/react-native-plugin.react-native link @dynatrace/react-native-plugin which will automatically add the iOS agent pod to your iOS project.node ./node_modules/@dynatrace/react-native-plugin/scripts/install.jsreact-native link does not work as expected, you can manually add the iOS agent to your projectinsert the following in your Podfile:
pod 'react-native-dynatrace', :path => '../node_modules/@dynatrace/react-native-plugin'
node_modules/@dynatrace/react-native-plugin/iosDynatraceRNBridge.xcodeproj into your Libraries grouplibRNDynatrace.a under the Workspace groupDepending 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.
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')
},
reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter")
};
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')
},
reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter")
}
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 ['js'];
}
}
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.
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.
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.Use react-native run-android or react-native run-ios to rebuild and run your app.
import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';
let myAction = Dynatrace.enterAction("MyButton tapped");
//Perform the action and whatever else is needed.
myAction.leaveAction();
platform of type Platform. You can use this to only trigger manual instrumentation for a specific OS. The available values are: Platform.Ios, Platform.Android. Default is that it will work on any platform. Otherwise it is passed only to the relevant OS. For example:let myAction = Dynatrace.enterAction("MyButton tapped", Platform.Ios);
//Perform the action and whatever else is needed.
myAction.leaveAction("ios");
let myAction = Dynatrace.enterAction("MyButton tapped", Platform.Android);
//Perform the action and whatever else is needed.
myAction.leaveAction("android");
let myAction = Dynatrace.enterAction("MyButton tapped");
//Perform the action and whatever else is needed.
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.
It is possible to exclude certain packages or files from the instrumentation process. In case of a few packages this is even
dynatrace.config fileThe 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>
The react configuration block contains all settings regarding the react instrumentation. The following options are possible:
<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:
<react>
<debug>true</debug>
</react>
This will activate the debug mode. You will get more console output during instrumentation and at runtime.
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)
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.
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.
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.
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
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:+"
}
...
If the instrumentation runs through and your application starts but you see no data you probably need to dig deeper why the Agents are not sending any data. Opening up a support case is a great idea, but gathering logs first is even better. How do you gather logs?
Add the following configuration snippet to your other configuration in dynatrace.config (Maybe beneath the autoStart block. The whole structure is only visible, so you know where the config belongs) and run npm run instrumentDynatrace :
<android>
<config>
dynatrace {
configurations {
defaultConfig {
debug.agentLogging true
}
}
}
</config>
</android>
Add the following configuration snippet to your other configuration in dynatrace.config (The whole structure is only visible, so you know where the config belongs) and run npm run instrumentDynatrace :
<ios>
<config>
<key>DTXLogLevel</key>
<string>ALL</string>
</config>
</ios>
The documentation for OneAgent for Android and iOS is available at the following location:
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).
Missing property DTXApplicationID means that there is no configuration available. Are you sure you called npm run updateConfiguration at least once?0.182.2
0.182.1
0.181.1
0.179.1
0.174.0
0.172.0
0.171.0
0.168.0
FAQs
This plugin gives you the ability to use the Dynatrace Mobile agent in your react native application.
The npm package @dynatrace/react-native-plugin receives a total of 5,857 weekly downloads. As such, @dynatrace/react-native-plugin popularity was classified as popular.
We found that @dynatrace/react-native-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.