From c216ea4a5b3048c30ca5ab567dae968b772a7dcc Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Wed, 17 Apr 2024 14:27:43 -0700 Subject: [PATCH 01/12] Standardize mobile crash report setup --- .../error_tracking/mobile/android.md | 10 ++++- .../error_tracking/mobile/expo.md | 36 +++++++++------- .../error_tracking/mobile/flutter.md | 17 +++++--- .../error_tracking/mobile/ios.md | 26 ++++++------ .../error_tracking/mobile/reactnative.md | 42 ++++++++++--------- .../error_tracking/mobile/roku.md | 10 ++++- 6 files changed, 85 insertions(+), 56 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/android.md b/content/en/real_user_monitoring/error_tracking/mobile/android.md index 4fa790a085d67..a2d66e3053324 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/android.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/android.md @@ -39,7 +39,9 @@ If you have not set up the Android SDK yet, follow the [in-app setup instruction For any given error, you can access the file path, line number, and a code snippet for each frame of the related stack trace. -## Upload your mapping file +## Get deobfuscated stack traces + +### Upload your mapping file **Note**: Re-uploading a source map does not override the existing one if the version has not changed. @@ -157,7 +159,7 @@ For example: tasks["minify${variant}WithR8"].finalizedBy { tasks["uploadMapping${variant}"] } ``` -### Limitations +## Limitations {{< site-region region="us,us3,us5,eu,gov" >}} Mapping files are limited to **500** MB. If your project has a mapping file larger than this, use one of the following options to reduce the file size: @@ -181,6 +183,10 @@ datadog { } ``` +## Test your implementation + + + ## Further Reading {{< partial name="whats-next/whats-next.html" >}} diff --git a/content/en/real_user_monitoring/error_tracking/mobile/expo.md b/content/en/real_user_monitoring/error_tracking/mobile/expo.md index 8e5d4a6d7594b..48a71a0aa9218 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/expo.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/expo.md @@ -54,18 +54,6 @@ yarn add -D @datadog/datadog-ci Run `eas secret:create` to set `DATADOG_API_KEY` to your Datadog API key. -### Add git repository data to your mapping files on Expo Application Services (EAS) - -If you are using EAS to build your Expo application, set `cli.requireCommit` to `true` in your `eas.json` file to add git repository data to your mapping files. - -```json -{ - "cli": { - "requireCommit": true - } -} -``` - ### Setting the Datadog site Run `eas secret:create` to set `DATADOG_SITE` to the host of your Datadog site, for example: `datadoghq.eu`. By default, `datadoghq.com` is used. @@ -80,15 +68,33 @@ Run `eas secret:create` to set `DATADOG_SITE` to the host of your Datadog site, | `androidProguardMappingFiles` | `true` | Enables the uploading of Proguard mapping files to deobfuscate native Android crashes (is only applied if obfuscation is enabled). | | `datadogGradlePluginVersion` | `"1.+"` | Version of `dd-sdk-android-gradle-plugin` used for uploading Proguard mapping files. | -### Limitations +## Get deobfuscated stack traces + +### Add git repository data to your mapping files on Expo Application Services (EAS) + +If you are using EAS to build your Expo application, set `cli.requireCommit` to `true` in your `eas.json` file to add git repository data to your mapping files. + +```json +{ + "cli": { + "requireCommit": true + } +} +``` + +## Limitations {{< site-region region="us,us3,us5,eu,gov" >}} Source maps, mapping files, and dSYM files are limited to **500** MB each. {{< /site-region >}} {{< site-region region="ap1" >}} -Source maps, mapping files, and dSYM files are limited to **500** MB each. +Source maps, mapping files, and dSYM files are limited to **500** MB each. {{< /site-region >}} +## Test your implementation + +## Additional configuration options + ### Disable file uploads You can disable some files from uploading by setting the `iosDsyms`, `iosSourcemaps`, `androidProguardMappingFiles`, or `androidSourcemaps` parameters to `false`. @@ -113,7 +119,7 @@ You can disable some files from uploading by setting the `iosDsyms`, `iosSourcem If you want to disable **all file uploads**, remove `expo-datadog` from the list of plugins. -### Using with Sentry +### Using Expo with Datadog and Sentry Both Datadog and Sentry config plugins use regular expressions to modify the "Bundle React Native code and images" iOS build phase to send the sourcemap. This can make your EAS builds fail with a `error: Found argument 'datadog-ci' which wasn't expected, or isn't valid in this context` error. diff --git a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md index 81b1d0850fec7..8abe56736788c 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md @@ -49,7 +49,8 @@ DatadogSdk.instance.initialize(configuration); If your application suffers a fatal crash, after your application restarts, the Datadog Flutter SDK uploads a crash report to Datadog. For non-fatal errors, the Datadog Flutter SDK uploads these errors with other RUM data. -## Upload symbol files to Datadog +## Get deobfuscated stack traces +### Upload symbol files to Datadog Native iOS crash reports are collected in a raw format and mostly contain memory addresses. To map these addresses into legible symbol information, Datadog requires that you upload .dSYM files, which are generated in your application's build process. @@ -79,7 +80,7 @@ datadog-ci flutter-symbols upload --service-name --dart-symb For a full list of options, see the `datadog-ci` [Flutter Symbols documentation][5]. -### Limitations +## Limitations {{< site-region region="us,us3,us5,eu,gov" >}} Source maps and dSYM files are limited to **500** MB each. @@ -88,23 +89,27 @@ Source maps and dSYM files are limited to **500** MB each. Source maps and dSYM files are limited to **500** MB each. {{< /site-region >}} -## Advanced Configuration - Flavors and Build Numbers +## Test your implementation + +## Additional configuration options + +### Flavors and build numbers Datadog uses the combination of the `service-name`, `version`, and `flavor` to locate the correct symbols for deobfuscation. For your crash reports to have complete information, the parameters sent to the `datadog-ci` command and the parameters set in [DatadogConfiguration][6] must match exactly. -If you are using app [flavors][7] in Flutter, you will need to set the name of the flavor in [DatadogConfiguration.flavor][8] since we cannot detect the flavor automatically. You can then pass this to the `--flavor` parameter of the `datadog-ci` command: +If you are using app [flavors][7] in Flutter, you need to set the name of the flavor in [DatadogConfiguration.flavor][8] since we cannot detect the flavor automatically. You can then pass this to the `--flavor` parameter of the `datadog-ci` command: ```sh datadog-ci flutter-symbols upload --service-name --dart-symbols-location --android-mapping --ios-dsyms --flavor my_flavor ``` -The Datadog SDK will automatically detect the version number of your application specified in your `pubspec.yaml` up to but not including the build number. If you are using build numbers as part of the version in your application and need to upload symbols for each build, you will need to add the version to [DatadogConfiguration.version][9]. You can then pass this to the `--version` parameter of the `datadog-ci` command: +The Datadog SDK automatically detects the version number of your application specified in your `pubspec.yaml` up to but not including the build number. If you are using build numbers as part of the version in your application and need to upload symbols for each build, you need to add the version to [DatadogConfiguration.version][9]. You can then pass this to the `--version` parameter of the `datadog-ci` command: ```sh datadog-ci flutter-symbols upload --service-name --dart-symbols-location --android-mapping --ios-dsyms --version 1.2.3+22 ``` -Note that Datadog uses tags for versions which do not allow `+`. All tooling automatically replaces `+` with `-` so that the version tags are searchable in Datadog. +**Note**: Datadog uses tags for versions which do not allow `+`. All tooling automatically replaces `+` with `-` so that the version tags are searchable in Datadog. ## Further reading diff --git a/content/en/real_user_monitoring/error_tracking/mobile/ios.md b/content/en/real_user_monitoring/error_tracking/mobile/ios.md index ee4f8d23298a7..f9f6b0a1e5bf1 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/ios.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/ios.md @@ -100,13 +100,15 @@ Datadog.initialize( CrashReporting.enable() ``` -## Symbolicate crash reports +## Get deobfuscated stack traces + +### Symbolicate crash reports Crash reports are collected in a raw format and mostly contain memory addresses. To map these addresses into legible symbol information, Datadog requires .dSYM files, which are generated in your application's build or distribution process. -### Find your dSYM file +### Find your .dSYM file -Every iOS application produces .dSYM files for each application module. These files minimize an application's binary size and enable faster download speed. Each application version contains a set of .dSYM files. +Every iOS application produces `.dSYM` files for each application module. These files minimize an application's binary size and enable faster download speed. Each application version contains a set of `.dSYM` files. Depending on your setup, you may need to download `.dSYM` files from App Store Connect or find them on your local machine. @@ -115,17 +117,17 @@ Depending on your setup, you may need to download `.dSYM` files from App Store C | Yes | `.dSYM` files are available after [App Store Connect][6] completes processing your application's build. | | No | Xcode exports `.dSYM` files to `$DWARF_DSYM_FOLDER_PATH` at the end of your application's build. Ensure that the `DEBUG_INFORMATION_FORMAT` build setting is set to **DWARF with dSYM File**. By default, Xcode projects only set `DEBUG_INFORMATION_FORMAT` to **DWARF with dSYM File** for the Release project configuration. | -### Upload your dSYM file +### Upload your .dSYM file -By uploading your .dSYM file to Datadog, you gain access to the file path and line number of each frame in an error's related stack trace. +By uploading your `.dSYM` file to Datadog, you gain access to the file path and line number of each frame in an error's related stack trace. Once your application crashes and you restart the application, the iOS SDK uploads a crash report to Datadog. **Note**: Re-uploading a source map does not override the existing one if the version has not changed. -#### Datadog CI +### Use Datadog CI to upload your .dSYM file -You can use the command line tool [@datadog/datadog-ci][5] to upload your dSYM file: +You can use the command line tool [@datadog/datadog-ci][5] to upload your `.dSYM` file: ```sh export DATADOG_API_KEY="" @@ -141,9 +143,9 @@ npx @datadog/datadog-ci dsyms upload /path/to/appDsyms/ Alternatively, if you use Fastlane or GitHub Actions in your workflows, you can leverage these integrations instead of `datadog-ci`: -#### Fastlane Plugin +### Use Fastlane plugin to upload your .dSYM file -The Datadog plugin helps you upload dSYM files to Datadog from your Fastlane configuration. +The Fastlane plugin helps you upload `.dSYM` files to Datadog from your Fastlane configuration. 1. Add [`fastlane-plugin-datadog`][3] to your project. @@ -163,7 +165,7 @@ The Datadog plugin helps you upload dSYM files to Datadog from your Fastlane con For more information, see [`fastlane-plugin-datadog`][3]. -#### GitHub Action +### Use GitHub Actions to upload your .dSYM file The [Datadog Upload dSYMs GitHub Action][4] allows you to upload your symbols in your GitHub Action jobs: @@ -193,7 +195,7 @@ jobs: For more information, see [dSYMs commands][7]. -### Limitations +## Limitations {{< site-region region="us,us3,us5,eu,gov" >}} dSYM files are limited to **500** MB. @@ -202,7 +204,7 @@ dSYM files are limited to **500** MB. dSYM files are limited to **500** MB. {{< /site-region >}} -## Verify crash reports +## Test your implementation To verify your iOS Crash Reporting and Error Tracking configuration, issue a crash in your RUM application and confirm that the error appears in Datadog. diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index 91a2fa888562a..133d9990465ab 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -52,7 +52,7 @@ const config = new DdSdkReactNativeConfiguration( config.nativeCrashReportEnabled = true; // enable native crash reporting ``` -## Symbolicate crash reports +## Get deobfuscated stack traces 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: @@ -65,9 +65,9 @@ To set your project up to send the symbolication files automatically, run `npx d See the wizard [official documentation][13] for options. -## Passing options for your uploads +### Passing options for your uploads -### On Android using the `datadog-sourcemaps.gradle` script +#### Using the `datadog-sourcemaps.gradle` script To specify a different service name, add the following code to your `android/app/build.gradle` file, before the `apply from: "../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"` line: @@ -77,11 +77,11 @@ project.ext.datadog = [ ] ``` -### On iOS using the `datadog-ci react-native xcode` command +#### Using the `datadog-ci react-native xcode` command Options for the `datadog-ci react-native xcode` command are available on the [command documentation page][12]. -### Limitations +## Limitations {{< site-region region="us,us3,us5,eu,gov" >}} Source maps, mapping files, and dSYM files are limited to **500** MB each. @@ -142,11 +142,13 @@ const crashApp = () => { }; ``` -## Alternatives to `datadog-react-native-wizard` +## Additional configuration options + +### Alternatives to `datadog-react-native-wizard` for symbolication If using `datadog-react-native-wizard` did not succeed or if you don't want to upload your symbolication files automatically on each release, follow the next steps to symbolicate crash reports. -### Upload JavaScript source maps on iOS builds +#### Upload JavaScript source maps on iOS builds You need to install `@datadog/datadog-ci` as a dev dependency to your project: @@ -156,7 +158,7 @@ yarn add -D @datadog/datadog-ci npm install --save-dev @datadog/datadog-ci ``` -#### Automatically on each release build (React Native >= 0.69) +##### Automatically on each release build (React Native >= 0.69) Manually uploading your source maps on every release build takes time and is prone to errors. Datadog recommends automatically sending your source maps every time you run a release build. @@ -196,7 +198,7 @@ For the upload to work, you need to provide your Datadog API key. If you use a c You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -#### Automatically on each release build (React Native < 0.69) +##### Automatically on each release build (React Native < 0.69) Open your `.xcworkspace` with Xcode, then select your project > Build Phases > Bundle React Native code and images. Edit the script to look like the following: @@ -220,7 +222,7 @@ For the upload to work, you need to provide your Datadog API key. If you use a c You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -#### Manually on each build +##### Manually on each build To output a source map, you need to edit the Xcode build phase "Bundle React Native Code and Images". @@ -254,7 +256,7 @@ 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 ``` -#### Manually on each build (with Hermes for React Native < 0.71) +##### Manually on each build (with Hermes for React Native < 0.71) There is a bug in React Native versions up to 0.71 that generates an incorrect source map when using Hermes. @@ -295,9 +297,9 @@ 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 ``` -### Upload JavaScript source maps on Android builds +#### Upload JavaScript source maps on Android builds -#### Automatically on each release build (React Native >= 0.71) +##### Automatically on each release build (React Native >= 0.71) In your `android/app/build.gradle` file, add the following after the `apply plugin: "com.facebook.react"` line: @@ -315,7 +317,7 @@ For the upload to work, you need to provide your Datadog API key. You can specif You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -#### Automatically on each release build (React Native < 0.71) +##### Automatically on each release build (React Native < 0.71) In your `android/app/build.gradle` file, add the following after the `apply from: "../../node_modules/react-native/react.gradle"` line: @@ -333,7 +335,7 @@ For the upload to work, you need to provide your Datadog API key. You can specif You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -#### Manually on each build +##### Manually on each build On Android, the source map file is located at `android/app/build/generated/sourcemaps/react/release/index.android.bundle.map`. The bundle file location depends on your React Native (RN) and Android Gradle Plugin (AGP) versions: @@ -360,13 +362,13 @@ export SOURCEMAP_PATH=android/app/build/generated/sourcemaps/react/release/index yarn datadog-ci react-native upload --platform android --service $SERVICE --bundle $BUNDLE_PATH --sourcemap $SOURCEMAP_PATH --release-version $VERSION --build-version $BUILD ``` -### Upload iOS dSYM files +#### Upload iOS dSYM files -#### Manually on each build +##### Manually on each build For more information, see the [iOS Crash Reporting and Error Tracking documentation][4]. -### Upload Android Proguard mapping files +#### Upload Android Proguard mapping files First, ensure that Proguard minification is enabled on your project. By default, this is not enabled on React Native projects. @@ -374,7 +376,7 @@ For more information, see [the React Native Proguard documentation][5]. If you are still unsure, you can see if running `(cd android && ./gradlew tasks --all) | grep minifyReleaseWithR8` returns anything. If so, minification is enabled. -#### Manually on each build +##### Manually on each build In your `android/app/build.gradle` file, add the [latest version of the plugin][15] and configure it **at the top of the file**: @@ -401,7 +403,7 @@ For more information, see the [Datadog Android SDK Gradle Plugin][6]. To run the plugin after a build run `(cd android && ./gradlew app:uploadMappingRelease)`. -#### Automate the upload on each build +##### Automate the upload on each build Install the plugin like in the previous step. diff --git a/content/en/real_user_monitoring/error_tracking/mobile/roku.md b/content/en/real_user_monitoring/error_tracking/mobile/roku.md index 929ce33a94f09..1cf9efef04215 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/roku.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/roku.md @@ -40,7 +40,15 @@ If you have not set up the Roku SDK yet, follow the [in-app setup instructions][ For any given error, you can access the file path, line number, and a code snippet for each frame of the related stack trace. -## Forward errors to Datadog +## Get deobfuscated stack traces + +## Limitations + +## Test your implementation + +## Additional configuration options + +### Forward errors to Datadog Whenever you perform an operation that might throw an exception, you can forward the error to Datadog by adding the following code snippet: From deec06f8f28275271693a663862e0987a8f5fb85 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Thu, 18 Apr 2024 06:20:42 -0700 Subject: [PATCH 02/12] update rn header --- .../real_user_monitoring/error_tracking/mobile/reactnative.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index 133d9990465ab..0349e355a01f8 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -148,7 +148,7 @@ const crashApp = () => { If using `datadog-react-native-wizard` did not succeed or if you don't want to upload your symbolication files automatically on each release, follow the next steps to symbolicate crash reports. -#### Upload JavaScript source maps on iOS builds +### Upload JavaScript source maps on iOS builds You need to install `@datadog/datadog-ci` as a dev dependency to your project: From 6c09b3180fdbeb243fd2c8fb8de57f51e78a783c Mon Sep 17 00:00:00 2001 From: Jeff Ward Date: Fri, 19 Apr 2024 15:30:32 -0400 Subject: [PATCH 03/12] Additional flutter info for Error Tracking Add "Test your implementation" Add information about automatic error reporting (this is already in setup, but duplicated here) and information about JavaScript source maps. --- .../error_tracking/mobile/flutter.md | 40 +++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md index 8abe56736788c..955015347df10 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md @@ -27,6 +27,27 @@ Your crash reports appear in [**Error Tracking**][1]. If you have not set up the Datadog Flutter SDK for RUM yet, follow the [in-app setup instructions][2] or see the [Flutter setup documentation][3]. +### Add Dart error tracking + +If you are using `DatadogSdk.runApp`, then the Datadog Flutter SDK will automatically track and report uncaught Dart exceptions. If you are not using `DatadogSdk.runApp`, you need to setup Dart error tracking manually with the following code before you initialize Datadog: + +```dart +final originalOnError = FlutterError.onError; +FlutterError.onError = (details) { + DatadogSdk.instance.rum?.handleFlutterError(details); + originalOnError?.call(details); +}; +final platformOriginalOnError = PlatformDispatcher.instance.onError; +PlatformDispatcher.instance.onError = (e, st) { + DatadogSdk.instance.rum?.addErrorInfo( + e.toString(), + RumErrorSource.source, + stackTrace: st, + ); + return platformOriginalOnError?.call(e, st) ?? false; +}; +``` + ### Add native crash reporting Update your initialization snippet to enable native crash reporting for iOS and Android by setting `nativeCrashReportEnabled` to `true`. @@ -44,18 +65,19 @@ final configuration = DatadogConfiguration( applicationId: '', ), ); -DatadogSdk.instance.initialize(configuration); ``` If your application suffers a fatal crash, after your application restarts, the Datadog Flutter SDK uploads a crash report to Datadog. For non-fatal errors, the Datadog Flutter SDK uploads these errors with other RUM data. ## Get deobfuscated stack traces + ### Upload symbol files to Datadog Native iOS crash reports are collected in a raw format and mostly contain memory addresses. To map these addresses into legible symbol information, Datadog requires that you upload .dSYM files, which are generated in your application's build process. -For all crash reports that are built with the `--split-debug-info` option set and/or with the `--obfuscate` option set, you need to upload their Android Proguard mapping file and Dart symbol files generated by the Flutter build process. +Crash reports and errors sent from Flutter iOS and Android applications that are built with the `--split-debug-info` option set and/or with the `--obfuscate` option set will also be in a raw or obfuscated format. For these applications, you need to upload their Android Proguard mapping file and Dart symbol files generated by the Flutter build process. +Errors sent from Flutter Web applications will send unmapped JavaScript file and line numbers, which need to be mapped to Dart file and line numbers. For these applications, you need to upload the Flutter generated JavaScript source map generated by the Flutter build porcess. The [@datadog/datadog-ci][4] command line tool supports uploading all of the necessary files (dSYMs, Android Proguard Mapping, and Dart Symbol Files) in one command. @@ -91,7 +113,19 @@ Source maps and dSYM files are limited to **500** MB each. ## Test your implementation -## Additional configuration options +To verify your Flutter Crash Reporting and Error Tracking configuration, issue an error in your RUM application and confirm that the error appears in Datadog. + +1. Run your application on a simulator, emulator, or a real device. If you are running on iOS, ensure that the debugger is not attached. Otherwise, Xcode captures the crash before the Datadog SDK does. +2. Execute code containing an error or crash, for example + + ```dart + void throwError() { + throw Exception("My Exception") + } + ``` + +3. For obfuscated error reports that do not result in a crash, you should be able to verify symbolication and deobfuscation in [**Error Tracking**][8]. +4. For crashes, after the crash happens, restart your application and wait for the Flutter SDK to upload the crash report in [**Error Tracking**][8]. ### Flavors and build numbers From 7665cb513f065987d4a23b6a0c6d9924e16e6d35 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 19 Apr 2024 12:57:58 -0700 Subject: [PATCH 04/12] make upload options collapsible --- .../error_tracking/mobile/reactnative.md | 44 ++++++++++++++----- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index 0349e355a01f8..5d127d59cf0da 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -148,9 +148,9 @@ const crashApp = () => { If using `datadog-react-native-wizard` did not succeed or if you don't want to upload your symbolication files automatically on each release, follow the next steps to symbolicate crash reports. -### Upload JavaScript source maps on iOS builds +#### Upload JavaScript source maps on iOS builds -You need to install `@datadog/datadog-ci` as a dev dependency to your project: +First, you need to install `@datadog/datadog-ci` as a dev dependency to your project: ```bash yarn add -D @datadog/datadog-ci @@ -158,7 +158,7 @@ yarn add -D @datadog/datadog-ci npm install --save-dev @datadog/datadog-ci ``` -##### Automatically on each release build (React Native >= 0.69) +{{% collapse-content title="Automatically on each release build (React Native >= 0.69)" level="h5" %}} Manually uploading your source maps on every release build takes time and is prone to errors. Datadog recommends automatically sending your source maps every time you run a release build. @@ -198,7 +198,9 @@ For the upload to work, you need to provide your Datadog API key. If you use a c You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -##### Automatically on each release build (React Native < 0.69) +{{% /collapse-content %}} + +{{% collapse-content title="Automatically on each release build (React Native < 0.69)" level="h5" %}} Open your `.xcworkspace` with Xcode, then select your project > Build Phases > Bundle React Native code and images. Edit the script to look like the following: @@ -222,7 +224,9 @@ For the upload to work, you need to provide your Datadog API key. If you use a c You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -##### Manually on each build +{{% /collapse-content %}} + +{{% collapse-content title="Manually on each build" level="h5" %}} To output a source map, you need to edit the Xcode build phase "Bundle React Native Code and Images". @@ -256,7 +260,9 @@ 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 ``` -##### Manually on each build (with Hermes for React Native < 0.71) +{{% /collapse-content %}} + +{{% collapse-content title="Manually on each build (with Hermes for React Native < 0.71)" level="h5" %}} There is a bug in React Native versions up to 0.71 that generates an incorrect source map when using Hermes. @@ -297,9 +303,11 @@ 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 ``` +{{% /collapse-content %}} + #### Upload JavaScript source maps on Android builds -##### Automatically on each release build (React Native >= 0.71) +{{% collapse-content title="Automatically on each release build (React Native >= 0.71)" level="h5" %}} In your `android/app/build.gradle` file, add the following after the `apply plugin: "com.facebook.react"` line: @@ -317,7 +325,9 @@ For the upload to work, you need to provide your Datadog API key. You can specif You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -##### Automatically on each release build (React Native < 0.71) +{{% /collapse-content %}} + +{{% collapse-content title="Automatically on each release build (React Native < 0.71)" level="h5" %}} In your `android/app/build.gradle` file, add the following after the `apply from: "../../node_modules/react-native/react.gradle"` line: @@ -335,7 +345,9 @@ For the upload to work, you need to provide your Datadog API key. You can specif You can also specify the Datadog site (such as `datadoghq.eu`) as a `DATADOG_SITE` environment variable, or as a `datadogSite` key in your `datadog-ci.json` file. -##### Manually on each build +{{% /collapse-content %}} + +{{% collapse-content title="Manually on each build" level="h5" %}} On Android, the source map file is located at `android/app/build/generated/sourcemaps/react/release/index.android.bundle.map`. The bundle file location depends on your React Native (RN) and Android Gradle Plugin (AGP) versions: @@ -362,12 +374,16 @@ export SOURCEMAP_PATH=android/app/build/generated/sourcemaps/react/release/index yarn datadog-ci react-native upload --platform android --service $SERVICE --bundle $BUNDLE_PATH --sourcemap $SOURCEMAP_PATH --release-version $VERSION --build-version $BUILD ``` +{{% /collapse-content %}} + #### Upload iOS dSYM files -##### Manually on each build +{{% collapse-content title="Manually on each build" level="h5" %}} For more information, see the [iOS Crash Reporting and Error Tracking documentation][4]. +{{% /collapse-content %}} + #### Upload Android Proguard mapping files First, ensure that Proguard minification is enabled on your project. By default, this is not enabled on React Native projects. @@ -376,7 +392,7 @@ For more information, see [the React Native Proguard documentation][5]. If you are still unsure, you can see if running `(cd android && ./gradlew tasks --all) | grep minifyReleaseWithR8` returns anything. If so, minification is enabled. -##### Manually on each build +{{% collapse-content title="Manually on each build" level="h5" %}} In your `android/app/build.gradle` file, add the [latest version of the plugin][15] and configure it **at the top of the file**: @@ -403,7 +419,9 @@ For more information, see the [Datadog Android SDK Gradle Plugin][6]. To run the plugin after a build run `(cd android && ./gradlew app:uploadMappingRelease)`. -##### Automate the upload on each build +{{% /collapse-content %}} + +{{% collapse-content title="Automate the upload on each build" level="h5" %}} Install the plugin like in the previous step. @@ -419,6 +437,8 @@ Inside the loop, add the following snippet: **Note**: Re-uploading a source map does not override the existing one if the version has not changed. +{{% /collapse-content %}} + ## Further reading {{< partial name="whats-next/whats-next.html" >}} From 2e6d7e88b78a0fc02d9fcb29f300a0afc95ca3a8 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 19 Apr 2024 13:02:05 -0700 Subject: [PATCH 05/12] some edits --- .../real_user_monitoring/error_tracking/mobile/flutter.md | 8 +++++--- .../error_tracking/mobile/reactnative.md | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md index 955015347df10..b6802cfddbf91 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md @@ -29,7 +29,9 @@ If you have not set up the Datadog Flutter SDK for RUM yet, follow the [in-app s ### Add Dart error tracking -If you are using `DatadogSdk.runApp`, then the Datadog Flutter SDK will automatically track and report uncaught Dart exceptions. If you are not using `DatadogSdk.runApp`, you need to setup Dart error tracking manually with the following code before you initialize Datadog: +If you are using `DatadogSdk.runApp`, then the Datadog Flutter SDK automatically tracks and reports uncaught Dart exceptions. + +If you are **not** using `DatadogSdk.runApp`, you need to setup Dart error tracking manually with the following code before you initialize Datadog: ```dart final originalOnError = FlutterError.onError; @@ -116,7 +118,7 @@ Source maps and dSYM files are limited to **500** MB each. To verify your Flutter Crash Reporting and Error Tracking configuration, issue an error in your RUM application and confirm that the error appears in Datadog. 1. Run your application on a simulator, emulator, or a real device. If you are running on iOS, ensure that the debugger is not attached. Otherwise, Xcode captures the crash before the Datadog SDK does. -2. Execute code containing an error or crash, for example +2. Execute code containing an error or crash. For example: ```dart void throwError() { @@ -124,7 +126,7 @@ To verify your Flutter Crash Reporting and Error Tracking configuration, issue a } ``` -3. For obfuscated error reports that do not result in a crash, you should be able to verify symbolication and deobfuscation in [**Error Tracking**][8]. +3. For obfuscated error reports that do not result in a crash, you can verify symbolication and deobfuscation in [**Error Tracking**][8]. 4. For crashes, after the crash happens, restart your application and wait for the Flutter SDK to upload the crash report in [**Error Tracking**][8]. ### Flavors and build numbers diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index 5d127d59cf0da..c8dc9a0192260 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -109,7 +109,7 @@ echo "Size of source maps and bundle is $(($payloadsize / 1000000))MB" If a `build` directory does not already exist, create it first by running `mkdir build`, then run the command above. -## Test your implementation of crash reporting +## Test your implementation To make sure your sourcemaps are correctly sent and linked to your application, you can generate crashes with the [`react-native-performance-limiter`][14] package. From 9219dc3cc1c3602ed7d3ca1ca1193e2633610e77 Mon Sep 17 00:00:00 2001 From: "Xavier F. Gouchet" Date: Mon, 22 Apr 2024 15:12:25 +0200 Subject: [PATCH 06/12] Additional Android info for Error Tracking --- .../error_tracking/mobile/android.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/android.md b/content/en/real_user_monitoring/error_tracking/mobile/android.md index a2d66e3053324..b68a7962f734d 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/android.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/android.md @@ -185,7 +185,18 @@ datadog { ## Test your implementation +To verify your Android Crash Reporting and Error Tracking configuration, issue a crash in your RUM application and confirm that the error appears in Datadog. +1. Run your application on an Android emulator or a real device. +2. Execute code containing an error or crash. For example: + + ```kotlin + fun onEvent() { + throw RuntimeException("Crash the app") + } + ``` + +3. After the crash happens, restart your application and wait for the Android SDK to upload the crash report in [**Error Tracking**][1]. ## Further Reading From 290c895bda6fc43490ca632e692bf0c4aca2cecb Mon Sep 17 00:00:00 2001 From: "Xavier F. Gouchet" Date: Tue, 23 Apr 2024 08:16:40 +0200 Subject: [PATCH 07/12] Additional Roku info for Error Tracking --- .../error_tracking/mobile/roku.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/roku.md b/content/en/real_user_monitoring/error_tracking/mobile/roku.md index 1cf9efef04215..8212c0dcf3634 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/roku.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/roku.md @@ -40,13 +40,24 @@ If you have not set up the Roku SDK yet, follow the [in-app setup instructions][ For any given error, you can access the file path, line number, and a code snippet for each frame of the related stack trace. -## Get deobfuscated stack traces - ## Limitations +**Note**: Crash reporting on Roku doesn't yet support stacktraces. + ## Test your implementation -## Additional configuration options +To verify your Roku Crash Reporting and Error Tracking configuration, issue a crash in your RUM application and confirm that the error appears in Datadog. + +1. Run your application on an Roku device. +2. Execute code containing a crash. For example: + + ```brightscript + sub explodingMethod() + x = 1 + print x.foo + ``` + +3. After the crash happens, restart your application and wait for the Roku SDK to upload the crash report in [**Error Tracking**][1]. ### Forward errors to Datadog From 0f968060499b914de358b71144ee915eeb818a1a Mon Sep 17 00:00:00 2001 From: Marco Saia Date: Wed, 24 Apr 2024 16:57:01 +0200 Subject: [PATCH 08/12] Additional React Native info for Error Tracking --- .../error_tracking/mobile/reactnative.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index c8dc9a0192260..039ed7a41ec7d 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -111,7 +111,21 @@ If a `build` directory does not already exist, create it first by running `mkdir ## Test your implementation -To make sure your sourcemaps are correctly sent and linked to your application, you can generate crashes with the [`react-native-performance-limiter`][14] package. +To verify your React Native Crash Reporting and Error Tracking configuration, issue an error in your RUM application and confirm that the error appears in Datadog. + +1. Run your application on a simulator, emulator, or a real device. If you are running on iOS, ensure that the debugger is not attached. Otherwise, Xcode captures the crash before the Datadog SDK does. +2. Execute code containing an error or crash. For example: + + ```javascript + const throwError = () => { + throw new Error("My Error") + } + ``` + +3. For obfuscated error reports that do not result in a crash, you can verify symbolication and deobfuscation in [**Error Tracking**][1]. +4. For crashes, after the crash happens, restart your application and wait for the React Native SDK to upload the crash report in [**Error Tracking**][1]. + +To make sure your sourcemaps are correctly sent and linked to your application, you can also generate crashes with the [`react-native-performance-limiter`][14] package. Install it with yarn or npm then re-install your pods: From 05fba3903cd6e981f1a50db2ec6401fcfec33a05 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 26 Apr 2024 12:55:09 -0700 Subject: [PATCH 09/12] copy edit contributions --- .../real_user_monitoring/error_tracking/mobile/android.md | 6 ++++-- .../real_user_monitoring/error_tracking/mobile/flutter.md | 2 +- .../error_tracking/mobile/reactnative.md | 6 ++++-- .../en/real_user_monitoring/error_tracking/mobile/roku.md | 6 ++++-- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/android.md b/content/en/real_user_monitoring/error_tracking/mobile/android.md index b68a7962f734d..20439f2f9ee66 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/android.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/android.md @@ -185,10 +185,12 @@ datadog { ## Test your implementation -To verify your Android Crash Reporting and Error Tracking configuration, issue a crash in your RUM application and confirm that the error appears in Datadog. +To verify your Android Crash Reporting and Error Tracking configuration, you need to trigger a crash in your RUM application and confirm that the error appears in Datadog. + +To test your implementation: 1. Run your application on an Android emulator or a real device. -2. Execute code containing an error or crash. For example: +2. Execute some code containing an error or crash. For example: ```kotlin fun onEvent() { diff --git a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md index b6802cfddbf91..be00c54ef2761 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/flutter.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/flutter.md @@ -69,7 +69,7 @@ final configuration = DatadogConfiguration( ); ``` -If your application suffers a fatal crash, after your application restarts, the Datadog Flutter SDK uploads a crash report to Datadog. For non-fatal errors, the Datadog Flutter SDK uploads these errors with other RUM data. +If your application suffers a fatal crash, the Datadog Flutter SDK uploads a crash report to Datadog *after* your application restarts. For non-fatal errors, the Datadog Flutter SDK uploads these errors with other RUM data. ## Get deobfuscated stack traces diff --git a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md index 039ed7a41ec7d..53abfe809cf15 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/reactnative.md @@ -111,10 +111,12 @@ If a `build` directory does not already exist, create it first by running `mkdir ## Test your implementation -To verify your React Native Crash Reporting and Error Tracking configuration, issue an error in your RUM application and confirm that the error appears in Datadog. +To verify your React Native Crash Reporting and Error Tracking configuration, you need to issue an error in your RUM application and confirm that the error appears in Datadog. + +To test your implementation: 1. Run your application on a simulator, emulator, or a real device. If you are running on iOS, ensure that the debugger is not attached. Otherwise, Xcode captures the crash before the Datadog SDK does. -2. Execute code containing an error or crash. For example: +2. Execute some code containing an error or crash. For example: ```javascript const throwError = () => { diff --git a/content/en/real_user_monitoring/error_tracking/mobile/roku.md b/content/en/real_user_monitoring/error_tracking/mobile/roku.md index 8212c0dcf3634..c3d2ae3dd2ec2 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/roku.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/roku.md @@ -46,10 +46,12 @@ For any given error, you can access the file path, line number, and a code snipp ## Test your implementation -To verify your Roku Crash Reporting and Error Tracking configuration, issue a crash in your RUM application and confirm that the error appears in Datadog. +To verify your Roku Crash Reporting and Error Tracking configuration, you need to trigger a crash in your RUM application and confirm that the error appears in Datadog. + +To test your implementation: 1. Run your application on an Roku device. -2. Execute code containing a crash. For example: +2. Execute some code containing a crash. For example: ```brightscript sub explodingMethod() From 6cf5baeb518d952ce84357c9c56cbd41799c93cf Mon Sep 17 00:00:00 2001 From: Rosa Trieu <107086888+rtrieu@users.noreply.github.com> Date: Mon, 29 Apr 2024 06:22:08 -0700 Subject: [PATCH 10/12] Update content/en/real_user_monitoring/error_tracking/mobile/roku.md Co-authored-by: Esther Kim --- content/en/real_user_monitoring/error_tracking/mobile/roku.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/roku.md b/content/en/real_user_monitoring/error_tracking/mobile/roku.md index c3d2ae3dd2ec2..ae9cd37173319 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/roku.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/roku.md @@ -42,7 +42,7 @@ For any given error, you can access the file path, line number, and a code snipp ## Limitations -**Note**: Crash reporting on Roku doesn't yet support stacktraces. +Crash reporting on Roku doesn't yet support stacktraces. ## Test your implementation From c4b764d38cf44565f8ce047d0d02cd9cdc842022 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Mon, 29 Apr 2024 09:59:45 -0700 Subject: [PATCH 11/12] copy from react native to expo --- .../error_tracking/mobile/expo.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/expo.md b/content/en/real_user_monitoring/error_tracking/mobile/expo.md index 48a71a0aa9218..5fc9991c862fa 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/expo.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/expo.md @@ -93,6 +93,53 @@ Source maps, mapping files, and dSYM files are limited to **500** MB each. ## Test your implementation +To verify your Expo Crash Reporting and Error Tracking configuration, you need to issue an error in your RUM application and confirm that the error appears in Datadog. + +To test your implementation: + +1. Run your application on a simulator, emulator, or a real device. If you are running on iOS, ensure that the debugger is not attached. Otherwise, Xcode captures the crash before the Datadog SDK does. +2. Execute some code containing an error or crash. For example: + + ```javascript + const throwError = () => { + throw new Error("My Error") + } + ``` + +3. For obfuscated error reports that do not result in a crash, you can verify symbolication and deobfuscation in [**Error Tracking**][1]. +4. For crashes, after the crash happens, restart your application and wait for the React Native SDK to upload the crash report in [**Error Tracking**][1]. + +To make sure your sourcemaps are correctly sent and linked to your application, you can also generate crashes with the [`react-native-performance-limiter`][14] package. + +Install it with yarn or npm then re-install your pods: + +```shell +yarn add react-native-performance-limiter # or npm install react-native-performance-limiter +(cd ios && pod install) +``` + +Crash the JavaScript thread from your app: + +```javascript +import { crashJavascriptThread } from 'react-native-performance-limiter'; + +const crashApp = () => { + crashJavascriptThread('custom error message'); +}; +``` + +Re-build your application for release to send the new sourcemaps, trigger the crash and wait on the [Error Tracking][1] page for the error to appear. + +To test your dSYMs and Proguard mapping files upload, crash the native main thread instead: + +```javascript +import { crashNativeMainThread } from 'react-native-performance-limiter'; + +const crashApp = () => { + crashNativeMainThread('custom error message'); +}; +``` + ## Additional configuration options ### Disable file uploads From cb755ceec97cd4bc2021763c123b389544b7eb01 Mon Sep 17 00:00:00 2001 From: Marco Saia Date: Tue, 30 Apr 2024 10:20:05 +0200 Subject: [PATCH 12/12] Removed RN expo native thread crash docs --- .../real_user_monitoring/error_tracking/mobile/expo.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/content/en/real_user_monitoring/error_tracking/mobile/expo.md b/content/en/real_user_monitoring/error_tracking/mobile/expo.md index 5fc9991c862fa..9dca219596cab 100644 --- a/content/en/real_user_monitoring/error_tracking/mobile/expo.md +++ b/content/en/real_user_monitoring/error_tracking/mobile/expo.md @@ -129,15 +129,6 @@ const crashApp = () => { ``` Re-build your application for release to send the new sourcemaps, trigger the crash and wait on the [Error Tracking][1] page for the error to appear. - -To test your dSYMs and Proguard mapping files upload, crash the native main thread instead: - -```javascript -import { crashNativeMainThread } from 'react-native-performance-limiter'; - -const crashApp = () => { - crashNativeMainThread('custom error message'); -}; ``` ## Additional configuration options