- Essentials
- In The App
- Infrastructure
- Application Performance
- Log Management
- Security Platform
- UX Monitoring
- Administration
Enable React Native Crash Reporting and Error Tracking to get comprehensive crash reports and error trends with Real User Monitoring. With this feature, you can access:
In order to symbolicate your stack traces, manually upload your mapping files into Datadog.
Your crash reports appear in Error Tracking.
If you have not set up the RUM React Native SDK yet, follow the in-app setup instructions or see the React Native RUM setup documentation.
Update your initialization snippet to enable native JavaScript crash reporting:
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true,
true,
true // enable javascript crash reporting
);
config.nativeCrashReportEnabled = true; // enable native crash reporting
Datadog can accept uploads up to 50MB.
To compute the size of your source maps and bundle, run this command:
npx react-native bundle \
--dev false \
--platform ios \
--entry-file index.js \
--bundle-output build/main.jsbundle \
--sourcemap-output build/main.jsbundle.map
sourcemapsize=$(wc -c build/main.jsbundle.map | awk '{print $1}')
bundlesize=$(wc -c build/main.jsbundle | awk '{print $1}')
payloadsize=$(($sourcemapsize + $bundlesize))
echo "Size of source maps and bundle is $(($payloadsize / 1000000))MB"
In order to make your application’s size smaller, its code is minified when it is built for release. To link errors to your actual code, you need to upload the following symbolication files:
You need to install @datadog/datadog-ci
as a dev dependency to your project:
yarn add -D @datadog/datadog-ci
npm install --save-dev @datadog/datadog-ci
To output a source map, you need to edit the XCode build phase “Bundle React Native Code and Images”.
ios/YourAppName.xcworkspace
file in XCode.Change the script by adding this after the set -e
line:
set -e
export SOURCEMAP_FILE=./build/main.jsbundle.map # <- add this line to output sourcemaps
# leave the rest of the script unchanged
Moving forward, you can find the source maps for your bundle on every iOS build.
To find the path to your bundle file from XCode, display the Report Navigator on XCode and filter by BUNDLE_FILE
for its location.
The usual location is ~/Library/Developer/Xcode/DerivedData/YourAppName-verylonghash/Build/Intermediates.noindex/ArchiveIntermediates/YourAppName/BuildProductsPath/Release-iphoneos/main.jsbundle
, where YourAppName
is the name of your app, and verylonghash
is a 28 letter hash.
To upload the source maps, run this from your React Native project:
export DATADOG_API_KEY= # fill with your API key
export SERVICE=com.myapp # replace by your service name
export VERSION=1.0.0 # replace by the version of your app in XCode
export BUILD=100 # replace by the build of your app in XCode
export BUNDLE_PATH= # fill with your bundle path
yarn datadog-ci react-native upload --platform ios --service $SERVICE --bundle $BUNDLE_PATH --sourcemap ./build/main.jsbundle.map --release-version $VERSION --build-version $BUILD
There is currently a bug in React Native that generates an incorrect source map when using Hermes.
To resolve this, you need to add more lines at the very end of the build phase to generate a correct source map file.
Edit your build phase like so:
set -e
export SOURCEMAP_FILE=./build/main.jsbundle.map # <- add this line to output sourcemaps
# keep the rest of the script unchanged
# add these lines to compose the packager and compiler sourcemaps into one file
REACT_NATIVE_DIR=../node_modules/react-native
source "$REACT_NATIVE_DIR/scripts/find-node.sh"
source "$REACT_NATIVE_DIR/scripts/node-binary.sh"
"$NODE_BINARY" "$REACT_NATIVE_DIR/scripts/compose-source-maps.js" "$CONFIGURATION_BUILD_DIR/main.jsbundle.map" "$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map" -o "../$SOURCEMAP_FILE"
To upload the source map, run this from your React Native project root:
export DATADOG_API_KEY= # fill with your API key
export SERVICE=com.myapp # replace by your service name
export VERSION=1.0.0 # replace by the version of your app in XCode
export BUILD=100 # replace by the build of your app in XCode
export BUNDLE_PATH= # fill with your bundle path
yarn datadog-ci react-native upload --platform ios --service $SERVICE --bundle $BUNDLE_PATH --sourcemap ./build/main.jsbundle.map --release-version $VERSION --build-version $BUILD
On Android, the bundle file is located at android/app/build/generated/assets/react/release/index.android.bundle
and the source map file is located at android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
. If your application has more comprehensive variants, replace release
by your variant’s name in the paths.
After running your build, upload your source map by running this from your React Native project root:
export DATADOG_API_KEY= # fill with your API key
export SERVICE=com.myapp # replace by your service name
export VERSION=1.0.0 # replace by the versionName from android/app/build.gradle
export BUILD=100 # replace by the versionCode from android/app/build.gradle
export BUNDLE_PATH=android/app/build/generated/assets/react/release/index.android.bundle
export SOURCEMAP_PATH=android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
yarn datadog-ci react-native upload --platform android --service $SERVICE --bundle $BUNDLE_PATH --sourcemap $SOURCEMAP_PATH --release-version $VERSION --build-version $BUILD
For more information, see the iOS Crash Reporting and Error Tracking documentation.
First, ensure that Proguard minification is enabled on your project. By default, this is not enabled on React Native projects.
For more information, see the React Native Proguard documentation.
If you are still unsure, you can see if running (cd android && ./gradlew tasks --all) | grep minifyReleaseWithR8
returns anything. If so, minification is enabled.
In your android/app/build.gradle
file, add the plugin and configure it at the very top of the file:
plugins {
id("com.datadoghq.dd-sdk-android-gradle-plugin") version "1.4.0"
}
datadog {
site = "US1"
checkProjectDependencies = "none" // this is needed in any case for React Native projects
}
The site value has to match the value in the Datadog SDK configuration. For more information, see the Datadog Android SDK Gradle Plugin.
To run the plugin after a build, export your API key as DD_API_KEY
and run (cd android && ./gradlew app:uploadMappingRelease)
.
Install the plugin like in the previous step.
Find the loop on applicationVariants
in the android/app/build.gradle
file. It should look like applicationVariants.all { variant ->
.
Inside the loop, add the following snippet:
if (project.tasks.findByName("minify${variant.name.capitalize()}WithR8")) {
tasks["minify${variant.name.capitalize()}WithR8"].finalizedBy { tasks["uploadMapping${variant.name.capitalize()}"] }
}
To verify your React Native Crash Reporting and Error Tracking configuration, you can install a package like the react-native-crash-tester
to crash your app from the native or JavaScript side.
Additional helpful documentation, links, and articles: