From 69b57bac21cf9a9190fda1ca311501efb5134e30 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Mon, 5 May 2025 16:11:28 -0400 Subject: [PATCH 1/9] created a getting started page for the frontend ET and added it to the left nav --- config/_default/menus/main.en.yaml | 17 +++++++++++------ .../error_tracking/frontend/getting_started.md | 3 +++ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 content/en/error_tracking/frontend/getting_started.md diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 2e79bda9a8bb6..dd44201c06488 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2183,36 +2183,41 @@ menu: parent: error_tracking identifier: error_tracking_frontend weight: 7 + - name: Getting Started + url: error_tracking/frontend/getting_started + parent: error_tracking_frontend + identifier: error_tracking__fe_getting_started + weight: 100 - name: Browser Error Tracking url: error_tracking/frontend/browser parent: error_tracking_frontend identifier: error_tracking_browser - weight: 100 + weight: 101 - name: Collecting Browser Errors url: error_tracking/frontend/collecting_browser_errors parent: error_tracking_frontend identifier: error_tracking_collect_errors - weight: 101 + weight: 102 - name: Mobile Crash Tracking url: error_tracking/frontend/mobile parent: error_tracking_frontend identifier: error_tracking_mobile - weight: 102 + weight: 103 - name: Replay Errors url: error_tracking/frontend/replay_errors parent: error_tracking_frontend identifier: error_tracking_replays - weight: 103 + weight: 104 - name: Real User Monitoring url: error_tracking/rum parent: error_tracking_frontend identifier: error_tracking_rum - weight: 104 + weight: 105 - name: Logs url: error_tracking/frontend/logs parent: error_tracking_frontend identifier: error_tracking__fe_logs - weight: 105 + weight: 106 - name: Track Backend Errors url: error_tracking/backend parent: error_tracking diff --git a/content/en/error_tracking/frontend/getting_started.md b/content/en/error_tracking/frontend/getting_started.md new file mode 100644 index 0000000000000..7f0323763d3d8 --- /dev/null +++ b/content/en/error_tracking/frontend/getting_started.md @@ -0,0 +1,3 @@ +--- +title: Getting Started with Browser and Mobile Error Tracking +--- From d71e48959bcd32130a4e24d1a88e25a99f563998 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Wed, 7 May 2025 16:13:12 -0400 Subject: [PATCH 2/9] Revert "created a getting started page for the frontend ET and added it to the left nav" This reverts commit 69b57bac21cf9a9190fda1ca311501efb5134e30. "reverted commit" --- config/_default/menus/main.en.yaml | 17 ++++++----------- .../error_tracking/frontend/getting_started.md | 3 --- 2 files changed, 6 insertions(+), 14 deletions(-) delete mode 100644 content/en/error_tracking/frontend/getting_started.md diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index dd44201c06488..2e79bda9a8bb6 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2183,41 +2183,36 @@ menu: parent: error_tracking identifier: error_tracking_frontend weight: 7 - - name: Getting Started - url: error_tracking/frontend/getting_started - parent: error_tracking_frontend - identifier: error_tracking__fe_getting_started - weight: 100 - name: Browser Error Tracking url: error_tracking/frontend/browser parent: error_tracking_frontend identifier: error_tracking_browser - weight: 101 + weight: 100 - name: Collecting Browser Errors url: error_tracking/frontend/collecting_browser_errors parent: error_tracking_frontend identifier: error_tracking_collect_errors - weight: 102 + weight: 101 - name: Mobile Crash Tracking url: error_tracking/frontend/mobile parent: error_tracking_frontend identifier: error_tracking_mobile - weight: 103 + weight: 102 - name: Replay Errors url: error_tracking/frontend/replay_errors parent: error_tracking_frontend identifier: error_tracking_replays - weight: 104 + weight: 103 - name: Real User Monitoring url: error_tracking/rum parent: error_tracking_frontend identifier: error_tracking_rum - weight: 105 + weight: 104 - name: Logs url: error_tracking/frontend/logs parent: error_tracking_frontend identifier: error_tracking__fe_logs - weight: 106 + weight: 105 - name: Track Backend Errors url: error_tracking/backend parent: error_tracking diff --git a/content/en/error_tracking/frontend/getting_started.md b/content/en/error_tracking/frontend/getting_started.md deleted file mode 100644 index 7f0323763d3d8..0000000000000 --- a/content/en/error_tracking/frontend/getting_started.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Getting Started with Browser and Mobile Error Tracking ---- From a979194e491b3b178a18fac24272f950fd8be9ad Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Thu, 15 May 2025 22:54:18 -0400 Subject: [PATCH 3/9] added the Mobile Error Tracking page, moved the left nav headings around, moved over the contents of the ET setup from RUM. --- config/_default/menus/main.en.yaml | 25 +- .../frontend/mobile_error_tracking/_index.md | 16 + .../frontend/mobile_error_tracking/flutter.md | 9 + .../kotlin-multiplatform.md | 9 + .../mobile_error_tracking/reactnative.md | 443 ++++++++++++++++++ .../frontend/mobile_error_tracking/roku.md | 9 + .../frontend/mobile_error_tracking/unity.md | 9 + .../error_tracking/frontend/replay_errors.md | 2 +- .../setup-error-tracking-mobile.html | 64 +++ 9 files changed, 575 insertions(+), 11 deletions(-) create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/_index.md create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/flutter.md create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/kotlin-multiplatform.md create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/roku.md create mode 100644 content/en/error_tracking/frontend/mobile_error_tracking/unity.md create mode 100644 layouts/partials/error_tracking/setup-error-tracking-mobile.html diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 2e79bda9a8bb6..4c044f52471f0 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -2183,36 +2183,41 @@ menu: parent: error_tracking identifier: error_tracking_frontend weight: 7 - - name: Browser Error Tracking - url: error_tracking/frontend/browser - parent: error_tracking_frontend - identifier: error_tracking_browser - weight: 100 - name: Collecting Browser Errors url: error_tracking/frontend/collecting_browser_errors parent: error_tracking_frontend identifier: error_tracking_collect_errors + weight: 100 + - name: Browser Error Tracking + url: error_tracking/frontend/browser + parent: error_tracking_frontend + identifier: error_tracking_browser weight: 101 - - name: Mobile Crash Tracking + - name: Mobile Error Tracking + url: error_tracking/frontend/mobile_error_tracking + parent: error_tracking_frontend + identifier: error_tracking_mobile_et_only + weight: 102 + - name: Mobile Crash Reporting url: error_tracking/frontend/mobile parent: error_tracking_frontend identifier: error_tracking_mobile - weight: 102 + weight: 103 - name: Replay Errors url: error_tracking/frontend/replay_errors parent: error_tracking_frontend identifier: error_tracking_replays - weight: 103 + weight: 104 - name: Real User Monitoring url: error_tracking/rum parent: error_tracking_frontend identifier: error_tracking_rum - weight: 104 + weight: 105 - name: Logs url: error_tracking/frontend/logs parent: error_tracking_frontend identifier: error_tracking__fe_logs - weight: 105 + weight: 106 - name: Track Backend Errors url: error_tracking/backend parent: error_tracking diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/_index.md b/content/en/error_tracking/frontend/mobile_error_tracking/_index.md new file mode 100644 index 0000000000000..81269010c8a72 --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/_index.md @@ -0,0 +1,16 @@ +--- +title: Mobile Error Tracking +type: multi-code-lang +description: Set up error tracking for your mobile applications. +further_reading: +- link: '/error_tracking/' + tag: 'Documentation' + text: 'Get started with Error Tracking' +- link: '/error_tracking/explorer' + tag: 'Documentation' + text: 'Visualize Error Tracking data in the Explorer' +--- + +For information about error tracking for your application, choose a platform: + +{{< partial name="error_tracking/setup-error-tracking-mobile.html" >}} \ No newline at end of file diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md b/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md new file mode 100644 index 0000000000000..33478190d04e9 --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md @@ -0,0 +1,9 @@ +--- +title: Flutter Error Tracking +type: multi-code-lang +code_lang: flutter +code_lang_weight: 10 +--- + +### This is a text to simulate a page +FLUTTER \ No newline at end of file diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/kotlin-multiplatform.md b/content/en/error_tracking/frontend/mobile_error_tracking/kotlin-multiplatform.md new file mode 100644 index 0000000000000..22b7ee1bb894b --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/kotlin-multiplatform.md @@ -0,0 +1,9 @@ +--- +title: Kotlin Multiplatform Error Tracking +type: multi-code-lang +code_lang: kotlin-multiplatform +code_lang_weight: 20 +--- + +### This is a text to simulate a page +kotlin-multiplatform \ No newline at end of file diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md b/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md new file mode 100644 index 0000000000000..98d5f27bd80e7 --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md @@ -0,0 +1,443 @@ +--- +title: React Native Error Tracking +type: multi-code-lang +code_lang: reactnative +code_lang_weight: 30 +--- + +## Overview +This page describes how to instrument your applications for the [Error Tracking][1] standalone product with the React Native SDK. + +The minimum supported version for the React Native SDK is React Native **v0.63.4+**. Compatibility with older versions is not guaranteed out-of-the-box. + +The React Native SDK also supports the following services: + +- [CodePush][link]. For more information, see the [CodePush documentation][link]. +- [Expo][link]. For more information, see the [Expo documentation][link]. + +## Setup +To install with NPM, run: + +```sh +npm install @datadog/mobile-react-native +``` + +To install with Yarn, run: + +```sh +yarn add @datadog/mobile-react-native +``` + +See additional specification for Android and iOS applications: + +{{% collapse-content title="Android" level="h5" %}} +If you use a React Native version strictly over 0.67, make sure to use Java version 17. If you use React Native version equal or below ot 0.67, make sure to use Java version 11. + +In your `android/build.gradle` file, specify the `kotlinVersion` to avoid clashes among kotlin dependencies: + +```groovy +buildscript { + ext { + // targetSdkVersion = ... + kotlinVersion = "1.8.21" + } +} +``` + +The Datadog React Native SDK requires you to have `compileSdkVersion = 31` or higher in the Android application setup, which implies that you should use Build Tools version 31 or higher, Android Gradle Plugin version 7, and Gradle version 7 or higher. To modify the versions, change the values in the `buildscript.ext` block of your application's top-level `build.gradle` file. Datadog recommends using a React Native version that's actively supported. + +{{% /collapse-content %}} + +{{% collapse-content title="iOS" level="h5" %}} +Install the added pod: +```sh +(cd ios && pod install) +``` +{{% /collapse-content %}}
+ +### Specify application details in the UI + +1. In Datadog, navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][2]. +2. Choose `react-native` as the application type. +3. Provide an application name to generate a unique Datadog application ID and client token. +4. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. + + {{< img src="real_user_monitoring/error_tracking/mobile-new-application.png" alt="Create an application for React Native in Datadog" style="width:90%;">}} + + +To ensure the safety of your data, you must use a client token. If you used only [Datadog API keys][7] to configure the `@datadog/mobile-react-native` library, they would be exposed client-side in the React Native application's code. + +For more information about setting up a client token, see the [Client Token documentation][8]. + + +### Initialize the library with application context + +{{< site-region region="us" >}} + +```js +import { + DatadogProvider, + DatadogProviderConfiguration +} from '@datadog/mobile-react-native'; + +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, // Track user interactions (such as a tap on buttons). + true, // Track XHR resources + true // Track errors +); +config.site = 'US1'; +// Optional: Enable or disable native crash reports +config.nativeCrashReportEnabled = true; +// Optional: Sample RUM sessions (in this example, 80% of session are sent to Datadog. Default is 100%). This option is not applicable to Error Tracking. +config.sessionSamplingRate = 80; +// Optional: Sample tracing integrations for network calls between your app and your backend (in this example, 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default is 20%) +// You need to specify the hosts of your backends to enable tracing with these backends +config.resourceTracingSamplingRate = 80; +config.firstPartyHosts = ['example.com']; // matches 'example.com' and subdomains like 'api.example.com' +// Optional: Set the reported service name (by default, it uses the package name or bundleIdentifier of your Android or iOS app respectively) +config.serviceName = 'com.example.reactnative'; +// Optional: Let the SDK print internal logs above or equal to the provided level. Default is undefined (meaning no logs) +config.verbosity = SdkVerbosity.WARN; + +//Wrap the content of your App component in a DatadogProvider component, passing it your configuration: + +export default function App() { + return ( + + + + ); +} + +// Once the Datadog React Native SDK is initialized, you need to setup view tracking to be able to see data in the RUM dashboard +``` + +{{< /site-region >}} + +{{< site-region region="us3" >}} + +```js +import { + DatadogProvider, + DatadogProviderConfiguration +} from '@datadog/mobile-react-native'; + +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, // Track user interactions (such as a tap on buttons). + true, // Track XHR resources + true // Track errors +); +config.site = 'US3'; +// Optional: Enable or disable native crash reports +config.nativeCrashReportEnabled = true; +// Optional: Sample RUM sessions (here, 80% of sessions are sent to Datadog. Default = 100%). This option is not applicable to Error Tracking. +config.sessionSamplingRate = 80; +// Optional: Sample tracing integrations for network calls between your app and your backend (here, 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default = 20%) +// You need to specify the hosts of your backends to enable tracing with these backends +config.resourceTracingSamplingRate = 80; +config.firstPartyHosts = ['example.com']; // matches 'example.com' and subdomains like 'api.example.com' + +//Wrap the content of your App component in a DatadogProvider component, passing it your configuration: + +export default function App() { + return ( + + + + ); +} + +// Once the Datadog React Native SDK is initialized, you need to setup view tracking to be able to see data in the RUM dashboard +``` + +{{< /site-region >}} + +{{< site-region region="us5" >}} + +```js +import { + DatadogProvider, + DatadogProviderConfiguration +} from '@datadog/mobile-react-native'; + +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, // Track User interactions (e.g.: Tap on buttons). + true, // Track XHR Resources + true // Track Errors +); +config.site = 'US5'; +// Optional: Enable or disable native crash reports +config.nativeCrashReportEnabled = true; +// Optional: Sample RUM sessions (here, 80% of sessions are sent to Datadog. Default = 100%). This setting is not applicable to Error Tracking. +config.sessionSamplingRate = 80; +// Optional: Sample tracing integrations for network calls between your app and your backend (here, 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default = 20%) +// You need to specify the hosts of your backends to enable tracing with these backends +config.resourceTracingSamplingRate = 80; +config.firstPartyHosts = ['example.com']; // Matches 'example.com' and subdomains like 'api.example.com' + +//Wrap the content of your App component in a DatadogProvider component, passing it your configuration: + +export default function App() { + return ( + + + + ); +} +// Once the Datadog React Native SDK is initialized, you need to setup view tracking to be able to see data in the RUM dashboard +``` + +{{< /site-region >}} + +{{< site-region region="eu" >}} + +```js +import { + DatadogProvider, + DatadogProviderConfiguration +} from '@datadog/mobile-react-native'; + +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, // Track User interactions (e.g.: Tap on buttons). + true, // Track XHR Resources + true // Track Errors +); +config.site = 'EU1'; +// Optional: Enable or disable native crash reports +config.nativeCrashReportEnabled = true; +// Optional: Sample RUM sessions (here, 80% of sessions are sent to Datadog. Default = 100%). This setting is not applicable to Error Tracking. +config.sessionSamplingRate = 80; +// Optional: Sample tracing integrations for network calls between your app and your backend (here, 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default = 20%) +// You need to specify the hosts of your backends to enable tracing with these backends +config.resourceTracingSamplingRate = 80; +config.firstPartyHosts = ['example.com']; // matches 'example.com' and subdomains like 'api.example.com' + +//Wrap the content of your App component in a DatadogProvider component, passing it your configuration: + +export default function App() { + return ( + + + + ); +} +// Once the Datadog React Native SDK for RUM is initialized, you need to setup view tracking to be able to see data in a dashboard +``` + +{{< /site-region >}} + +{{< site-region region="gov" >}} + +```js +import { + DatadogProvider, + DatadogProviderConfiguration +} from '@datadog/mobile-react-native'; + +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, // Track User interactions (e.g.: Tap on buttons). + true, // Track XHR Resources + true // Track Errors +); +config.site = 'US1_FED'; +// Optional: Enable or disable native crash reports +config.nativeCrashReportEnabled = true; +// Optional: Sample RUM sessions (here, 80% of sessions are sent to Datadog. Default = 100%) +config.sessionSamplingRate = 80; +// Optional: Sample tracing integrations for network calls between your app and your backend (here, 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default = 20%). This setting is not applicable to Error Tracking. +// You need to specify the hosts of your backends to enable tracing with these backends +config.resourceTracingSamplingRate = 80; +config.firstPartyHosts = ['example.com']; // matches 'example.com' and subdomains like 'api.example.com' + +//Wrap the content of your App component in a DatadogProvider component, passing it your configuration: + +export default function App() { + return ( + + + + ); +} +// Once the Datadog React Native SDK is initialized, you need to setup view tracking to be able to see data in the RUM dashboard +``` +{{< /site-region >}} + + +#### Sample session rates + +To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while [initializing the RUM React Native SDK](#initialize-the-library-with-application-context) as a percentage between 0 and 100. You can specify the rate with the `config.sessionSamplingRate` parameter. + + +#### Set tracking consent (GDPR compliance) + +To be compliant with the GDPR regulation, the React Native SDK requires the tracking consent value at initialization. + +The `trackingConsent` setting can be one of the following values: + +`.PENDING` +: The React Native SDK starts collecting and batching the data but does not send it to Datadog. The React Native SDK waits for the new tracking consent value to decide what to do with the batched data. + +`.GRANTED` +: The React Native SDK starts collecting the data and sends it to Datadog. + +`.NOTGRANTED` +: The React Native SDK does not collect any data.
No logs, traces, or RUM events are sent to Datadog. + +To change the tracking consent value after the React Native SDK is initialized, use the `Datadog.set(trackingConsent:)` API call. The React Native SDK changes its behavior according to the new value. + +For example, if the current tracking consent is `.PENDING`: + +- If you change the value to `.GRANTED`, the React Native SDK sends all current and future data to Datadog; +- If you change the value to `.NOTGRANTED`, the React Native SDK wipes all current data and does not collect future data. + + +### Override the reported version + +By default, the Datadog React Native SDK reports the `version` as the commercial version of your app (for example, "1.2.44"). + +If you use an Over The Air (OTA) updates provider like Microsoft's CodePush, you can override this version to indicate which version of your JavaScript code is running. + +Datadog recommends using a `versionSuffix` to the `DatadogProviderConfiguration` object: + +```js +const config = new DatadogProviderConfiguration( + '', + '', + '', + true, + true, + true +); + +config.versionSuffix = 'codepush.3'; +``` + +If the commercial version of your app is `1.2.44`, it is reported as `1.2.44-codepush.3` in Datadog. A dash (`-`) is automatically added between the version and the suffix. + +You can also completely override the version by specifying the `version` field. However, make sure you set it correctly, as it has to match the one specified during the upload of your source maps and other mapping files. + +For more information about limitations on the version field, see the [Tags documentation][10]. + +### User interactions tracking + +If user interactions tracking is enabled as in the code example above, the Datadog React Native SDK traverses up the hierarchy of components starting from the component that received a tap, looking for `dd-action-name` property. Once found, it is used as a name for the action reported. + +Alternatively, you can use the `accessibilityLabel` element property to give the tap action a name; otherwise, the element type is reported. You can check the sample app for usage examples. + + +## Sending data when device is offline + +The React Native SDK ensures availability of data when your user device is offline. In cases of low-network areas, or when the device battery is too low, all events are first stored on the local device in batches. They are sent as soon as the network is available, and the battery is high enough to ensure the React Native SDK does not impact the end user's experience. If the network is not available with your application running in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully. + +This means that even if users open your application while offline, no data is lost. + +**Note**: The data on the disk is automatically deleted if it gets too old to ensure the React Native SDK does not use too much disk space. + +## Track background events + +

Tracking background events may lead to additional sessions, which can impact billing. For questions, contact Datadog support.

+
+ +You can track events such as crashes and network requests when your application is in the background (for example, when no active view is available). + +Add the following snippet during initialization in your Datadog configuration: + +```javascript +configuration.trackBackgroundEvents = true; +``` + +## Data storage + + +{{% collapse-content title="Android" level="h5" %}} +Before data is uploaded to Datadog, it is stored in cleartext in your application's cache directory. This cache folder is protected by [Android's Application Sandbox][11], meaning that on most devices this data can't be read by other applications. However, if the mobile device is rooted, or someone tampers with the Linux kernel, the stored data might become readable. +{{% /collapse-content %}} + + +{{% collapse-content title="iOS" level="h5" %}} +Before data is uploaded to Datadog, it is stored in cleartext in the cache directory (`Library/Caches`) of your [application sandbox][12], which can't be read by any other app installed on the device. +{{% /collapse-content %}} + + +## Development mode + +While in development mode, your application can submit extra events related to the React Native tooling, such as code transformation errors and requests to a local development server. + +To prevent these events from showing in the dashboard, you can disable errors and resources tracking in dev mode using the `__DEV__` flag: + +```js +const config = new DatadogProviderConfiguration( + CLIENT_TOKEN, + ENVIRONMENT, + APPLICATION_ID, + true, + !__DEV__ /* trackResources will be false in DEV mode, true otherwise */, + !__DEV__ /* trackErrors will be false in DEV mode, true otherwise */, + trackingConsent +) +``` + +## New architecture support + +The [React Native new architecture][11] is supported by the React Native SDK in version `>=1.8.0`. + +The minimum supported React Native version for the new architecture is `0.71`. + +## Troubleshooting + +### Usage with `use_frameworks!` + +If you have `use_frameworks!` enabled in your `Podfile`, running `pod install` after adding the SDK is likely to trigger an error like this one: + +```shell +The 'Pods-MyApp' target has transitive dependencies that include statically linked binaries: (DatadogSDKBridge, DatadogSDKCrashReporting) +``` + +To prevent that error, edit your `Podfile` to install the React Native SDK pod as a static library: + +```ruby +static_libraries = ['DatadogSDKReactNative'] + +# Turn pods with static dependencies into static libraries by overriding the static_framework? function to return true +pre_install do |installer| + installer.pod_targets.each do |pod| + if static_libraries.include?(pod.name) + def pod.static_framework?; + true + end + def pod.build_type; + Pod::BuildType.static_library + end + end + end +end +``` + +**Note**: This solution comes from this [StackOverflow][13] post. + +## Further Reading + +{{< partial name="whats-next/whats-next.html" >}} + + +[1]: https://docs.datadoghq.com/error_tracking/ +[2]: https://app.datadoghq.com/error-tracking/settings/setup/client/ +[7]: /account_management/api-app-keys/#api-keys +[8]: /account_management/api-app-keys/#client-tokens +[10]: /getting_started/tagging/#define-tags +[12]: https://support.apple.com/guide/security/security-of-runtime-process-sec15bfe098e/web \ No newline at end of file diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/roku.md b/content/en/error_tracking/frontend/mobile_error_tracking/roku.md new file mode 100644 index 0000000000000..14ab13091e367 --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/roku.md @@ -0,0 +1,9 @@ +--- +title: Roku Error Tracking +type: multi-code-lang +code_lang: roku +code_lang_weight: 40 +--- + +### This is a text to simulate a page +ROKU \ No newline at end of file diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/unity.md b/content/en/error_tracking/frontend/mobile_error_tracking/unity.md new file mode 100644 index 0000000000000..5c7f8c028357b --- /dev/null +++ b/content/en/error_tracking/frontend/mobile_error_tracking/unity.md @@ -0,0 +1,9 @@ +--- +title: Unity Error Tracking +type: multi-code-lang +code_lang: unity +code_lang_weight: 50 +--- + +### This is a text to simulate a page +unity \ No newline at end of file diff --git a/content/en/error_tracking/frontend/replay_errors.md b/content/en/error_tracking/frontend/replay_errors.md index df5aa7585515b..60c348234a3f8 100644 --- a/content/en/error_tracking/frontend/replay_errors.md +++ b/content/en/error_tracking/frontend/replay_errors.md @@ -80,4 +80,4 @@ After reviewing key information about the error, such as the error message and s [1]: https://app.datadoghq.com/error-tracking/settings/setup/client [2]: /error_tracking/frontend/browser#setup -[3]: /error_tracking/frontend/mobile +[3]: /error_tracking/frontend/mobile_error_tracking diff --git a/layouts/partials/error_tracking/setup-error-tracking-mobile.html b/layouts/partials/error_tracking/setup-error-tracking-mobile.html new file mode 100644 index 0000000000000..74834ce04ec21 --- /dev/null +++ b/layouts/partials/error_tracking/setup-error-tracking-mobile.html @@ -0,0 +1,64 @@ +{{ $dot := . }} +
+
+
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/android_large.svg" "class" "img-fluid" "alt" "android" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/ios_large.svg" "class" "img-fluid" "alt" "ios" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/rum-expo_large.svg" "class" "img-fluid" "alt" "rum-expo" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/react-native_large.svg" "class" "img-fluid" "alt" "react-native" "width" "200") }} +
+ +
+ {{/*
*/}} +
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/flutter_large.svg" "class" "img-fluid" "alt" "flutter" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/roku_large.svg" "class" "img-fluid" "alt" "Roku" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "integrations_logos/kotlin-multiplatform_large.svg" "class" "img-fluid" "alt" "Kotlin Multiplatform" "width" "200") }} +
+ +
+
+ +
+ {{ partial "img.html" (dict "root" . "src" "/integrations_logos/rum-unity_large.svg" "class" "img-fluid" "alt" "Unity" "width" "200") }} +
+ +
+
+
+
From 6ff8f27350f16dbb543c07fc91ef63cdf12650b6 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Thu, 15 May 2025 22:58:52 -0400 Subject: [PATCH 4/9] removed the Error Tracking content from the RUM docs --- .../react_native/setup/reactnative.md | 26 +++---------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/reactnative.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/reactnative.md index 2ef6023c9f089..bce6b753fb56b 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/reactnative.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/reactnative.md @@ -29,9 +29,9 @@ further_reading: --- ## Overview -This page describes how to instrument your applications for both [Real User Monitoring (RUM)][1] or [Error Tracking][2] with the React Native SDK. You can follow the steps below to instrument your applications for RUM (includes Error Tracking), or Error Tracking if you have purchased it as a standalone product. +This page describes how to instrument your applications for [Real User Monitoring (RUM)][1] with the React Native SDK. -The minimum supported version for the React Native SDK is React Native v0.63.4+. Compatibility with older versions is not guaranteed out-of-the-box. +The minimum supported version for the React Native SDK is React Native **v0.63.4+**. Compatibility with older versions is not guaranteed out-of-the-box. The React Native SDK supports the following services: @@ -79,10 +79,7 @@ The Datadog React Native SDK requires you to have `compileSdkVersion = 31` or hi ### Specify application details in the UI -{{< tabs >}} -{{% tab "RUM" %}} - -1. In Datadog, navigate to [**Digital Experience** > **Add an Application**][1]. +1. In Datadog, navigate to [**Digital Experience** > **Add an Application**][14]. 2. Choose `react-native` as the application type. 3. Provide an application name to generate a unique Datadog application ID and client token. 4. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. @@ -90,22 +87,6 @@ The Datadog React Native SDK requires you to have `compileSdkVersion = 31` or hi {{< img src="real_user_monitoring/react_native/reactnative_setup.png" alt="Create a RUM application for React Native in Datadog" style="width:90%;">}} -[1]: https://app.datadoghq.com/rum/application/create -{{% /tab %}} -{{% tab "Error Tracking" %}} - -1. In Datadog, navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][1]. -2. Choose `react-native` as the application type. -3. Provide an application name to generate a unique Datadog application ID and client token. -4. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. - - {{< img src="real_user_monitoring/error_tracking/mobile-new-application.png" alt="Create an application for React Native in Datadog" style="width:90%;">}} - - -[1]: https://app.datadoghq.com/error-tracking/settings/setup/client/ -{{% /tab %}} -{{< /tabs >}} - To ensure the safety of your data, you must use a client token. If you used only [Datadog API keys][7] to configure the `@datadog/mobile-react-native` library, they would be exposed client-side in the React Native application's code. For more information about setting up a client token, see the [Client Token documentation][8]. @@ -476,3 +457,4 @@ end [11]: https://source.android.com/security/app-sandbox [12]: https://support.apple.com/guide/security/security-of-runtime-process-sec15bfe098e/web [13]: https://stackoverflow.com/questions/37388126/use-frameworks-for-only-some-pods-or-swift-pods/60914505#60914505 +[14]: https://app.datadoghq.com/rum/application/create From 323146a68e9363dbb1b196af208e203487a0eb2f Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Thu, 15 May 2025 23:05:50 -0400 Subject: [PATCH 5/9] corrected a link --- .../error_tracking/frontend/mobile_error_tracking/reactnative.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md b/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md index 98d5f27bd80e7..eb01bd726b9c9 100644 --- a/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md +++ b/content/en/error_tracking/frontend/mobile_error_tracking/reactnative.md @@ -440,4 +440,5 @@ end [7]: /account_management/api-app-keys/#api-keys [8]: /account_management/api-app-keys/#client-tokens [10]: /getting_started/tagging/#define-tags +[11]: https://source.android.com/security/app-sandbox [12]: https://support.apple.com/guide/security/security-of-runtime-process-sec15bfe098e/web \ No newline at end of file From ca7a4653d2aab944e43fed273ed47dbb6a28e659 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Thu, 15 May 2025 23:26:45 -0400 Subject: [PATCH 6/9] added the ET content for Roku in the Mobile Error Tracking section of the page --- .../frontend/mobile_error_tracking/roku.md | 253 +++++++++++++++++- 1 file changed, 251 insertions(+), 2 deletions(-) diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/roku.md b/content/en/error_tracking/frontend/mobile_error_tracking/roku.md index 14ab13091e367..09eff707f5b9f 100644 --- a/content/en/error_tracking/frontend/mobile_error_tracking/roku.md +++ b/content/en/error_tracking/frontend/mobile_error_tracking/roku.md @@ -3,7 +3,256 @@ title: Roku Error Tracking type: multi-code-lang code_lang: roku code_lang_weight: 40 +further_reading: +- link: /real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration + tag: Documentation + text: RUM Roku Advanced Configuration +- link: https://github.com/DataDog/dd-sdk-roku + tag: "Source Code" + text: Source code for dd-sdk-roku +- link: /real_user_monitoring + tag: Documentation + text: Explore Datadog RUM +- link: https://www.datadoghq.com/blog/monitor-roku-with-rum/ + tag: Blog + text: Monitor your Roku channels with Datadog RUM --- -### This is a text to simulate a page -ROKU \ No newline at end of file +{{< site-region region="gov" >}} +
RUM and Error Tracking for Roku are not available on the US1-FED Datadog site.
+{{< /site-region >}} + +## Overview + +This page describes how to instrument your applications for [Error Tracking][2] with the Roku SDK. + +The Datadog Roku SDK supports BrightScript channels for Roku OS 10 and higher. + +## Setup + +### Step 1 - Declare the SDK as a dependency +{{% collapse-content title="Using ROPM (recommended)" level="h5" %}} +`ROPM` is a package manager for the Roku platform (based on NPM). If you're not already using `ROPM` in your Roku project, read their [Getting started guide][3]. + +Once your project is set up to use `ROPM`, you can use the following command to install the Datadog dependency: + +```shell +ropm install datadog-roku +``` +{{% /collapse-content %}} + +{{% collapse-content title="Setup manually" level="h5" %}} +If your project does not use `ROPM`, install the library manually by downloading the [Roku SDK zip archive][4] and unzipping it in your project's root folder. + +Make sure you have a `roku_modules/datadogroku` subfolder in both the `components` and `source` folders of your project. +{{% /collapse-content %}}
+ + + +### Step 2 - Specify application details in Datadog + +1. Navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][10]. +2. Select **Roku** as the application type and enter an application name to generate a unique Datadog application ID and client token. +3. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. For more information, see [Roku Data Collected][11]. + + {{< img src="real_user_monitoring/roku/roku-new-application-2.png" alt="Create an application for Roku in Datadog" style="width:90%;">}} + + +### Step 3 - Initialize the library + +In the initialization snippet, set an environment name. For more information, see [Using Tags][7]. + +{{< site-region region="us" >}} +```brightscript +sub RunUserInterface(args as dynamic) + screen = CreateObject("roSGScreen") + scene = screen.CreateScene("MyScene") + screen.show() + + datadogroku_initialize({ + clientToken: "", + applicationId: "" + site: "us1", + env: "", + sessionSampleRate: 100, ' the percentage (integer) of sessions to track + launchArgs: args + }) + + ' complete your channel setup here +end sub +``` +{{< /site-region >}} + +{{< site-region region="eu" >}} +```brightscript +sub RunUserInterface(args as dynamic) + screen = CreateObject("roSGScreen") + scene = screen.CreateScene("MyScene") + screen.show() + + datadogroku_initialize({ + clientToken: "", + applicationId: "" + site: "eu1", + env: "", + sessionSampleRate: 100, ' the percentage (integer) of sessions to track + launchArgs: args + }) + + ' complete your channel setup here +end sub +``` +{{< /site-region >}} + +{{< site-region region="us3" >}} +```brightscript +sub RunUserInterface(args as dynamic) + screen = CreateObject("roSGScreen") + scene = screen.CreateScene("MyScene") + screen.show() + + datadogroku_initialize({ + clientToken: "", + applicationId: "" + site: "us3", + env: "", + sessionSampleRate: 100, ' the percentage (integer) of sessions to track + launchArgs: args + }) + + ' complete your channel setup here +end sub +``` +{{< /site-region >}} + +{{< site-region region="us5" >}} +```brightscript +sub RunUserInterface(args as dynamic) + screen = CreateObject("roSGScreen") + scene = screen.CreateScene("MyScene") + screen.show() + + datadogroku_initialize({ + clientToken: "", + applicationId: "" + site: "us5", + env: "", + sessionSampleRate: 100, ' the percentage (integer) of sessions to track + launchArgs: args + }) + + ' complete your channel setup here +end sub +``` +{{< /site-region >}} + +{{< site-region region="ap1" >}} +```brightscript +sub RunUserInterface(args as dynamic) + screen = CreateObject("roSGScreen") + scene = screen.CreateScene("MyScene") + screen.show() + + datadogroku_initialize({ + clientToken: "", + applicationId: "" + site: "ap1", + env: "", + sessionSampleRate: 100, ' the percentage (integer) of sessions to track + launchArgs: args + }) + + ' complete your channel setup here +end sub +``` +{{< /site-region >}} + +#### Sample session rates + +To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while [initializing the RUM Roku SDK][8]. The rate is a percentage between 0 and 100. By default, `sessionSamplingRate` is set to 100 (keep all sessions). + + +## Instrument the channel + +See [**Track RUM Resources**](#track-rum-resources) to enable automatic tracking of all your resources, and [**Enrich user sessions**](#enrich-user-sessions) to add custom global or user information to your events. + +### Track Views + +To split [user sessions][9] into logical steps, manually start a View using the following code. Every navigation to a new screen within your channel should correspond to a new View. + +```brightscript + viewName = "VideoDetails" + viewUrl = "components/screens/VideoDetails.xml" + m.global.datadogRumAgent.callfunc("startView", viewName, viewUrl) +``` + +### Track RUM Actions + +RUM Actions represent the interactions your users have with your channel. You can forward actions to Datadog as follows: + +```brightscript + targetName = "playButton" ' the name of the SG Node the user interacted with + actionType = "click" ' the type of interaction, should be one of "click", "back", or "custom" + m.global.datadogRumAgent.callfunc("addAction", { target: targetName, type: actionType}) +``` + +### Track RUM errors + +Whenever you perform an operation that might throw an exception, you can forward the error to Datadog as follows: + +```brightscript + try + doSomethingThatMightThrowAnException() + catch error + m.global.datadogRumAgent.callfunc("addError", error) + end try +``` + +## Sending data when device is offline + +RUM ensures availability of data when your user device is offline. In case of low-network areas, or when the device battery is too low, all the RUM events are first stored on the local device in batches. + +Each batch follows the intake specification. They are sent as soon as the network is available, and the battery is high enough to ensure the Datadog SDK does not impact the end user's experience. If the network is not available while your application is in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully. + +This means that even if users open your application while offline, no data is lost. To ensure the SDK does not use too much disk space, the data on the disk is automatically discarded if it gets too old. + + + + + + + + + + + + + + + + + + + + + + + + + + +## Further Reading + +{{< partial name="whats-next/whats-next.html" >}} + +[1]: /real_user_monitoring/ +[2]: /error_tracking/ +[3]: https://github.com/rokucommunity/ropm +[4]: https://github.com/DataDog/dd-sdk-roku +[5]: /account_management/api-app-keys/#api-keys +[6]: /account_management/api-app-keys/#client-tokens +[7]: /getting_started/tagging/using_tags/#rum--session-replay +[8]: /real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration/#enrich-user-sessions +[9]: /real_user_monitoring/mobile_and_tv_monitoring/roku/data_collected +[10]: https://app.datadoghq.com/error-tracking/settings/setup/client +[11]: /real_user_monitoring/mobile_and_tv_monitoring/data_collected/roku From 9dd2db8a2c38165a61d2e82ca73b1fa782213689 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Thu, 15 May 2025 23:31:11 -0400 Subject: [PATCH 7/9] removed the Error Tracking content from the ROKURUM docs --- .../mobile_and_tv_monitoring/roku/setup.md | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/setup.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/setup.md index e81ea89587f37..307a8751d664e 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/setup.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/setup.md @@ -24,7 +24,7 @@ further_reading: ## Overview -This page describes how to instrument your applications for both [Real User Monitoring (RUM)][1] and [Error Tracking][2] with the Roku SDK. You can follow the steps below to instrument your applications for RUM (includes Error Tracking) or Error Tracking if you have purchased it as a standalone product. +This page describes how to instrument your applications for [Real User Monitoring (RUM)][1] with the Roku SDK. The Datadog Roku SDK supports BrightScript channels for Roku OS 10 and higher. @@ -49,9 +49,6 @@ Make sure you have a `roku_modules/datadogroku` subfolder in both the `component ### Step 2 - Specify application details in Datadog -{{< tabs >}} -{{% tab "RUM" %}} - 1. Navigate to [**Digital Experience** > **Add an Application**][1]. 2. Select **Roku** as the application type and enter an application name to generate a unique Datadog application ID and client token. 3. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. For more information, see [Roku Data Collected][2]. @@ -61,20 +58,6 @@ Make sure you have a `roku_modules/datadogroku` subfolder in both the `component [1]: https://app.datadoghq.com/rum/application/create [2]: /real_user_monitoring/mobile_and_tv_monitoring/data_collected/roku -{{% /tab %}} -{{% tab "Error Tracking" %}} - -1. Navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][1]. -2. Select **Roku** as the application type and enter an application name to generate a unique Datadog application ID and client token. -3. To disable automatic user data collection for client IP or geolocation data, uncheck the boxes for those settings. For more information, see [Roku Data Collected][2]. - - {{< img src="real_user_monitoring/roku/roku-new-application-2.png" alt="Create an application for Roku in Datadog" style="width:90%;">}} - -[1]: https://app.datadoghq.com/error-tracking/settings/setup/client -[2]: /real_user_monitoring/mobile_and_tv_monitoring/data_collected/roku - -{{% /tab %}} -{{< /tabs >}} To ensure the safety of your data, you must use a client token. If you use only [Datadog API keys][5] to configure the `dd-sdk-roku` library, they are exposed client-side in the Roku channel's BrightScript code. From 6efebb0e74785bc31deeebdd98f6d4e4afc3cdbe Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Fri, 16 May 2025 01:49:27 -0400 Subject: [PATCH 8/9] added the ET content for Flutter in the Mobile Error Tracking section of the page --- .../frontend/mobile_error_tracking/flutter.md | 369 +++++++++++++++++- 1 file changed, 367 insertions(+), 2 deletions(-) diff --git a/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md b/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md index 33478190d04e9..038ee99d29383 100644 --- a/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md +++ b/content/en/error_tracking/frontend/mobile_error_tracking/flutter.md @@ -3,7 +3,372 @@ title: Flutter Error Tracking type: multi-code-lang code_lang: flutter code_lang_weight: 10 +further_reading: +- link: /real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration + tag: Documentation + text: RUM Flutter Advanced Configuration +- link: https://github.com/DataDog/dd-sdk-flutter + tag: "Source Code" + text: Source code for dd-sdk-flutter +- link: real_user_monitoring/explorer/ + tag: Documentation + text: Learn how to explore your RUM data +- link: https://www.datadoghq.com/blog/monitor-flutter-application-performance-with-mobile-rum/ + tag: Blog + text: Monitor Flutter application performance with Datadog Mobile RUM --- -### This is a text to simulate a page -FLUTTER \ No newline at end of file +## Overview + +This page describes how to instrument your applications for [Error Tracking][2] with the Flutter SDK. + +## Setup + +To start sending RUM or Error Tracking data from your Flutter application to Datadog: + +### Step 1 - Specify application details in the UI + +1. Navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][15]. +2. Choose `Flutter` as the application type. +3. Provide an application name to generate a unique Datadog application ID and client token. +4. To disable automatic user data collection for either client IP or geolocation data, uncheck the boxes for those settings. For more information, see [Flutter Data Collected][16]. + + {{< img src="real_user_monitoring/error_tracking/mobile-new-application-1.png" alt="Create an application for Flutter in Datadog" style="width:90%;">}} + + +To ensure the safety of your data, you must use a client token. For more information about setting up a client token, see the [Client Token documentation][3]. + +### Step 2 - Instrument your application + +First, ensure that you have your environment set up properly for each platform. + +
+Datadog supports Flutter Monitoring for iOS and Android for Flutter 3.0+. +
+ +Datadog does not officially support Flutter Web, but the current Flutter SDK for mobile apps allows you to achieve some out-of-the-box monitoring. + + +**Here are known limitations:** + * All Actions reported from Flutter are labeled with type `custom`. + * Long running actions (`startAction` and `stopAction`) are not supported. + * Manually reporting RUM resources (`startResource` and `stopResource`) is not supported. + * Event mappers are not supported. + * Tags on loggers are not supported. + * `addUserExtraInfo` is not supported. + * `stopSession` is not supported. + +No Flutter Web support is planned, but Datadog's priorities are often re-evaluated based on your feedback. If you have a Flutter Web app and would want to use the Datadog SDK to monitor its performance, reach out to your customer support team and escalate this feature request. + + +{{% collapse-content title="iOS" level="h5" %}} +Your iOS Podfile, located in `ios/Podfile`, must have `use_frameworks!` set to true (which is the default in Flutter) and must set its target iOS version >= 11.0. + +This constraint is usually commented out on the top line of the Podfile, and should read: +```ruby +platform :ios, '11.0' +``` + +You can replace `11.0` with any minimum version of iOS you want to support that is 11.0 or higher. +{{% /collapse-content %}} + +{{% collapse-content title="Android" level="h5" %}} +For Android, your `minSdkVersion` version must be >= 21, and if you are using Kotlin, it should be a version >= 1.8.0. These constraints are usually held in your `android/app/build.gradle` file. +{{% /collapse-content %}} + +{{% collapse-content title="Web" level="h5" %}} + +For Web, add the following to your `index.html` under the `head` tag, for **{{}}** site: +{{< site-region region="us" >}} +```html + + +``` +{{}} +{{< site-region region="ap1" >}} +```html + + +``` +{{}} +{{< site-region region="eu" >}} +```html + + +``` +{{}} +{{< site-region region="us3" >}} +```html + + +``` +{{}} +{{< site-region region="us5" >}} +```html + + +``` +{{}} +{{< site-region region="gov" >}} +```html + + +``` +{{}} + +This loads the CDN-delivered Datadog Browser SDKs for Logs and RUM. The synchronous CDN-delivered version of the Browser SDK is the only version supported by the Datadog Flutter Plugin. +{{% /collapse-content %}}
+ +#### Add the plugin + +1. Add the following to your `pubspec.yaml` file: + + ```yaml + dependencies: + datadog_flutter_plugin: ^2.0.0 + ``` +2. Create a configuration object for each Datadog feature (such as Logs or RUM) with the following snippet. If you do not pass a configuration for a given feature, that feature is disabled. + + ```dart + // Determine the user's consent to be tracked + final trackingConsent = ... + final configuration = DatadogConfiguration( + clientToken: '', + env: '', + site: DatadogSite.us1, + nativeCrashReportEnabled: true, + loggingConfiguration: DatadogLoggingConfiguration(), + rumConfiguration: DatadogRumConfiguration( + applicationId: '', + ) + ); + ``` + +For more information on available configuration options, see the [DatadogConfiguration object documentation][4]. + +To ensure the safety of your data, you must use a client token. You cannot use Datadog API keys to configure the Datadog [Flutter Plugin][5]. + +- If you are using RUM, set up a **Client Token** and **Application ID**. +- If you are only using Logs, initialize the library with a client token. + + +### Step 3 - Initialize the library + +You can initialize the library using one of two methods in your `main.dart` file. + +- Use `DatadogSdk.runApp` to automatically set up [Error Tracking][6]. + + ```dart + await DatadogSdk.runApp(configuration, TrackingConsent.granted, () async { + runApp(const MyApp()); + }) + ``` +**OR** +- You can also manually set up [Error Tracking][6] and resource tracking. `DatadogSdk.runApp` calls `WidgetsFlutterBinding.ensureInitialized`, so if you are not using `DatadogSdk.runApp`, you need to call this method prior to calling `DatadogSdk.instance.initialize`. + + ```dart + WidgetsFlutterBinding.ensureInitialized(); + 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; + }; + await DatadogSdk.instance.initialize(configuration, TrackingConsent.granted); + runApp(const MyApp()); + ``` + +#### Sample session rates + +To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while initializing the Flutter RUM SDK. The rate is a percentage between 0 and 100. By default, `sessionSamplingRate` is set to 100 (keep all sessions). + +For example, to keep only 50% of sessions, use: + +```dart +final config = DatadogConfiguration( + // other configuration... + rumConfiguration: DatadogRumConfiguration( + applicationId: '', + sessionSamplingRate: 50.0, + ), +); +``` + +#### Set tracking consent (GDPR compliance) + +To be compliant with the GDPR regulation, the Datadog Flutter SDK requires the `trackingConsent` value during initialization. + +Set `trackingConsent` to one of the following values: + +`TrackingConsent.pending` +: The Datadog Flutter SDK starts collecting and batching the data but does not send it to Datadog. It waits for the new tracking consent value to decide what to do with the batched data. + +`TrackingConsent.granted` +: The Datadog Flutter SDK starts collecting the data and sends it to Datadog. + +`TrackingConsent.notGranted` +: The Datadog Flutter SDK does not collect any data, which means no logs, traces, or events are sent to Datadog. + +To change the tracking consent value after the SDK is initialized, use the `DatadogSdk.setTrackingConsent` API call. + +The SDK changes its behavior according to the new value. For example, if the current tracking consent is `TrackingConsent.pending`: + +- You change it to `TrackingConsent.granted`, the SDK sends all current and future data to Datadog; +- You change it to `TrackingConsent.notGranted`, the SDK wipes all current data and does not collect any future data. + +## Automatically track views + +If you are using Flutter Navigator v2.0, your setup for automatic view tracking differs depending on your routing middleware. See [Flutter Integrated Libraries][12] for instructions on how to integrate with [go_router][7], [AutoRoute][9], and [Beamer][10]. + +### Flutter Navigators + +{{< tabs >}} +{{% tab "v1" %}} + +The Datadog Flutter Plugin can automatically track named routes using the `DatadogNavigationObserver` on your MaterialApp: + +```dart +MaterialApp( + home: HomeScreen(), + navigatorObservers: [ + DatadogNavigationObserver(DatadogSdk.instance), + ], +); +``` + +This works if you are using named routes or if you have supplied a name to the `settings` parameter of your `PageRoute`. + +If you are not using named routes, you can use `DatadogRouteAwareMixin` in conjunction with the `DatadogNavigationObserverProvider` widget to start and stop your RUM views automatically. With `DatadogRouteAwareMixin`, move any logic from `initState` to `didPush`. +{{% /tab %}} + +{{% tab "v2" %}} +If you are using Flutter Navigator v2.0, which uses the `MaterialApp.router` named constructor, the setup varies based on the routing middleware you are using, if any. Since [`go_router`][7] uses the same observer interface as Flutter Navigator v1, `DatadogNavigationObserver` can be added to other observers as a parameter to `GoRouter`. + +```dart +final _router = GoRouter( + routes: [ + // Your route information here + ], + observers: [ + DatadogNavigationObserver(datadogSdk: DatadogSdk.instance), + ], +); +MaterialApp.router( + routerConfig: _router, + // Your remaining setup +) +``` + +For examples that use routers other than `go_router`, see [Automatically track views](#automatically-track-views). + +{{% /tab %}} +{{< /tabs >}} + + +### Renaming Views + +For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][11] callback. This function can fall back to the default behavior of the observer by calling `defaultViewInfoExtractor`. For example: + +```dart +RumViewInfo? infoExtractor(Route route) { + var name = route.settings.name; + if (name == 'my_named_route') { + return RumViewInfo( + name: 'MyDifferentName', + attributes: {'extra_attribute': 'attribute_value'}, + ); + } + + return defaultViewInfoExtractor(route); +} + +var observer = DatadogNavigationObserver( + datadogSdk: DatadogSdk.instance, + viewInfoExtractor: infoExtractor, +); +``` + +## Automatically track actions + +Use [`RumUserActionDetector`][13] to track user taps that happen in a given Widget tree: + +```dart +RumUserActionDetector( + rum: DatadogSdk.instance.rum, + child: Scaffold( + appBar: AppBar( + title: const Text('RUM'), + ), + body: // Rest of your application + ), +); +``` + +`RumUserActionDetector` automatically detects tap user actions that occur in its tree and sends them to RUM. It detects interactions with several common Flutter widgets. + +For most Button types, the detector looks for a `Text` widget child, which it uses for the description of the action. In other cases it looks for a `Semantics` object child, or an `Icon` with its `Icon.semanticsLabel` property set. + +Alternatively, you can enclose any Widget tree with a [`RumUserActionAnnotation`][14], which uses the provided description when reporting user actions detected in the child tree, without changing the Semantics of the tree. + +```dart +Container( + margin: const EdgeInsets.all(8), + child: RumUserActionAnnotation( + description: 'My Image Button', + child: InkWell( + onTap: onTap, + child: Column( + children: [ + FadeInImage.memoryNetwork( + placeholder: kTransparentImage, + image: image, + ), + Center( + child: Text( + text, + style: theme.textTheme.headlineSmall, + ), + ) + ], + ), + ), + ), +); +``` + +## Sending data when device is offline + +The Flutter SDK ensures availability of data when your user device is offline. In cases of low-network areas, or when the device battery is too low, all events are first stored on the local device in batches. They are sent as soon as the network is available, and the battery is high enough to ensure the Flutter SDK does not impact the end user's experience. If the network is not available with your application running in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully. + +This means that even if users open your application while offline, no data is lost. + +**Note**: The data on the disk is automatically deleted if it gets too old to ensure the Flutter SDK does not use too much disk space. + +## Further reading + +{{< partial name="whats-next/whats-next.html" >}} + +[1]: /real_user_monitoring/ +[2]: /error_tracking/ +[3]: /account_management/api-app-keys/#client-tokens +[4]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/DatadogConfiguration-class.html +[5]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/ViewInfoExtractor.html +[6]: /real_user_monitoring/error_tracking/flutter +[7]: https://pub.dev/packages?q=go_router +[8]: /real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration/#automatic-view-tracking +[9]: https://pub.dev/packages/auto_route +[10]: https://pub.dev/packages/beamer +[11]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/ViewInfoExtractor.html +[12]: /real_user_monitoring/mobile_and_tv_monitoring/flutter/integrated_libraries/ +[13]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/RumUserActionAnnotation-class.html +[14]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/RumUserActionDetector-class.html +[15]: https://app.datadoghq.com/error-tracking/settings/setup/client +[16]: /real_user_monitoring/ios/data_collected/ \ No newline at end of file From 057ccc2b37576de03ec06223d7daaed7908d4b03 Mon Sep 17 00:00:00 2001 From: Ida Adjivon <65119712+iadjivon@users.noreply.github.com> Date: Fri, 16 May 2025 01:50:46 -0400 Subject: [PATCH 9/9] removed the Error Tracking content from the FLUTTER RUM docs --- .../mobile_and_tv_monitoring/flutter/setup.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/setup.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/setup.md index 1a1e23d41547b..1c5290239e862 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/setup.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/setup.md @@ -30,9 +30,6 @@ To start sending RUM or Error Tracking data from your Flutter application to Dat ### Step 1 - Specify application details in the UI -{{< tabs >}} -{{% tab "RUM" %}} - 1. In Datadog, navigate to [**Digital Experience** > **Add an Application**][1]. 2. Choose `Flutter` as the application type. 3. Provide an application name to generate a unique Datadog application ID and client token. @@ -43,21 +40,6 @@ To start sending RUM or Error Tracking data from your Flutter application to Dat [1]: https://app.datadoghq.com/rum/application/create [2]: /real_user_monitoring/ios/data_collected/ -{{% /tab %}} -{{% tab "Error Tracking" %}} - -1. Navigate to [**Error Tracking** > **Settings** > **Browser and Mobile** > **Add an Application**][1]. -2. Choose `Flutter` as the application type. -3. Provide an application name to generate a unique Datadog application ID and client token. -4. To disable automatic user data collection for either client IP or geolocation data, uncheck the boxes for those settings. For more information, see [Flutter Data Collected][2]. - - {{< img src="real_user_monitoring/error_tracking/mobile-new-application-1.png" alt="Create an application for Flutter in Datadog" style="width:90%;">}} - -[1]: https://app.datadoghq.com/error-tracking/settings/setup/client -[2]: /real_user_monitoring/ios/data_collected/ - -{{% /tab %}} -{{< /tabs >}} To ensure the safety of your data, you must use a client token. For more information about setting up a client token, see the [Client Token documentation][3].