From 4be8f5a0ce47057c75ac3f4e7f0dcccdc4977914 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 20 Dec 2024 13:32:51 -0800 Subject: [PATCH 1/6] Move tracking stuff from setup to advanced config --- .../flutter/advanced_configuration.md | 91 +++++++++++++- .../mobile_and_tv_monitoring/flutter/setup.md | 85 -------------- .../ios/advanced_configuration.md | 20 ++++ .../mobile_and_tv_monitoring/ios/setup.md | 20 ---- .../advanced_configuration.md | 12 ++ .../kotlin_multiplatform/setup.md | 12 -- .../react_native/advanced_configuration.md | 111 +++++++++++++----- .../react_native/setup/expo.md | 45 ++----- .../react_native/setup/reactnative.md | 52 ++------ .../roku/advanced_configuration.md | 45 ++++++- .../mobile_and_tv_monitoring/roku/setup.md | 41 +------ 11 files changed, 268 insertions(+), 266 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md index 432d2758594..f4e84cec695 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md @@ -179,10 +179,92 @@ A custom endpoint for sending RUM data. **Default**: `20.0` The sampling rate for telemetry data, such as errors and debug logs. -## Automatic view tracking +## 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][18] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. +### Flutter Navigator 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`. + +### Flutter Navigator 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`][25] 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). + +### Renaming Views + +For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][26] 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 resources + +Use the [Datadog Tracking HTTP Client][12] package to enable automatic tracking of resources and HTTP calls from your views. + +Add the package to your `pubspec.yaml` and add the following to your initialization file: + +```dart +final configuration = DatadogConfiguration( + // configuration + firstPartyHosts: ['example.com'], +)..enableHttpTracking() +``` + +**Note**: The Datadog Tracking HTTP Client modifies [`HttpOverrides.global`][27]. If you are using your own custom `HttpOverrides`, you may need to inherit from [`DatadogHttpOverrides`][28]. In this case, you do not need to call `enableHttpTracking`. Versions of `datadog_tracking_http_client` >= 1.3 check the value of `HttpOverrides.current` and use this for client creation, so you only need to make sure to initialize `HttpOverrides.global` prior to initializing Datadog. + +In order to enable Datadog [Distributed Tracing][29], you must set the `DatadogConfiguration.firstPartyHosts` property in your configuration object to a domain that supports distributed tracing. You can also modify the sampling rate for distributed tracing by setting the `tracingSamplingRate` on your `DatadogRumConfiguration`. + +- `firstPartyHosts` does not allow wildcards, but matches any subdomains for a given domain. For example, `api.example.com` matches `staging.api.example.com` and `prod.api.example.com`, not `news.example.com`. + +- `DatadogRumConfiguration.traceSampleRate` sets a default sampling rate of 20%. If you want all resources requests to generate a full distributed trace, set this value to `100.0`. + ## Enrich user sessions Flutter RUM automatically tracks attributes such as user activity, views (using the `DatadogNavigationObserver`), errors, native crashes, and network requests (using the Datadog Tracking HTTP Client). See the [RUM Data Collection documentation][3] to learn about the RUM events and default attributes. You can further enrich user session information and gain finer control over the attributes collected by tracking custom events. @@ -457,4 +539,9 @@ if (DatadogSdk.instance.isFirstPartyHost(host)){ [21]: /real_user_monitoring/connect_rum_and_traces/?tab=browserrum#how-are-rum-resources-linked-to-traces [22]: https://github.com/openzipkin/b3-propagation#single-headers [23]: https://github.com/openzipkin/b3-propagation#multiple-headers -[24]: https://www.w3.org/TR/trace-context/#tracestate-header \ No newline at end of file +[24]: https://www.w3.org/TR/trace-context/#tracestate-header +[25]: https://pub.dev/packages/go_router +[26]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/ViewInfoExtractor.html +[27]: https://api.flutter.dev/flutter/dart-io/HttpOverrides/current.html +[28]: https://pub.dev/documentation/datadog_tracking_http_client/latest/datadog_tracking_http_client/DatadogTrackingHttpOverrides-class.html +[29]: /serverless/aws_lambda/distributed_tracing/ \ No newline at end of file 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 e574196e514..0aa5a245bc0 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 @@ -241,91 +241,6 @@ The SDK changes its behavior according to the new value. For example, if the cur - 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 - -### Flutter Navigator 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`. - -### Flutter Navigator 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`][6] 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 [Advanced Configuration - Automatic View Tracking][7]. - -### Renaming Views - -For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][8] 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 resources - -Use the [Datadog Tracking HTTP Client][9] package to enable automatic tracking of resources and HTTP calls from your views. - -Add the package to your `pubspec.yaml` and add the following to your initialization file: - -```dart -final configuration = DatadogConfiguration( - // configuration - firstPartyHosts: ['example.com'], -)..enableHttpTracking() -``` - -**Note**: The Datadog Tracking HTTP Client modifies [`HttpOverrides.global`][10]. If you are using your own custom `HttpOverrides`, you may need to inherit from [`DatadogHttpOverrides`][11]. In this case, you do not need to call `enableHttpTracking`. Versions of `datadog_tracking_http_client` >= 1.3 check the value of `HttpOverrides.current` and use this for client creation, so you only need to make sure to initialize `HttpOverrides.global` prior to initializing Datadog. - -In order to enable Datadog [Distributed Tracing][12], you must set the `DatadogConfiguration.firstPartyHosts` property in your configuration object to a domain that supports distributed tracing. You can also modify the sampling rate for distributed tracing by setting the `tracingSamplingRate` on your `DatadogRumConfiguration`. - -- `firstPartyHosts` does not allow wildcards, but matches any subdomains for a given domain. For example, `api.example.com` matches `staging.api.example.com` and `prod.api.example.com`, not `news.example.com`. - -- `DatadogRumConfiguration.traceSampleRate` sets a default sampling rate of 20%. If you want all resources requests to generate a full distributed trace, set this value to `100.0`. - - ## Automatically track actions Use [`RumUserActionDetector`][13] to track user taps that happen in a given Widget tree: diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/advanced_configuration.md index e00782a2216..76dbb24408e 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/advanced_configuration.md @@ -262,6 +262,26 @@ Datadog.setUserInfo(id: "1234", name: "John Doe", email: "john@doe.com") {{% /tab %}} {{< /tabs >}} +## 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, no active view is available). + +To track background events, add the following snippet during initialization in your Datadog configuration: + +```swift +import DatadogRUM + +RUM.enable( + with: RUM.Configuration( + ... + trackBackgroundEvents: true + ) +) +``` + ## Initialization Parameters You can use the following properties in `Datadog.Configuration` when creating the Datadog configuration to initialize the library: diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/setup.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/setup.md index 789ec4dc086..4cd6122483c 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/setup.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/ios/setup.md @@ -475,26 +475,6 @@ struct BarView: View { } ``` -## 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, no active view is available). - -Add the following snippet during initialization in your Datadog configuration: - -```swift -import DatadogRUM - -RUM.enable( - with: RUM.Configuration( - ... - trackBackgroundEvents: true - ) -) -``` - ## Track iOS errors [iOS Crash Reporting and Error Tracking][8] displays any issues in your application and the latest available errors. You can view error details and attributes including JSON in the [RUM Explorer][9]. diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/advanced_configuration.md index b6e63dca6c3..ecc13f61785 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/advanced_configuration.md @@ -158,6 +158,18 @@ GlobalRumMonitor.get().addAttribute(key, value) GlobalRumMonitor.get().removeAttribute(key) ``` +## Track background events + +You can track events such as crashes and network requests when your application is in the background (for example, no active view is available). + +Add the following snippet during RUM configuration: + +```kotlin +.trackBackgroundEvents(true) +``` +

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

+
+ ## Initialization parameters You can use the following methods in `Configuration.Builder` when creating the Datadog configuration to initialize the library: diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/setup.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/setup.md index f9bac092b90..a0751b02f99 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/setup.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/setup.md @@ -378,18 +378,6 @@ val ktorClient = HttpClient { This records each request processed by the `HttpClient` as a resource in RUM, with all the relevant information automatically filled (URL, method, status code, and error). Only the network requests that started when a view is active are tracked. To track requests when your application is in the background, [create a view manually][11] or enable [background view tracking](#track-background-events). -## Track background events - -You can track events such as crashes and network requests when your application is in the background (for example, no active view is available). - -Add the following snippet during RUM configuration: - -```kotlin -.trackBackgroundEvents(true) -``` -

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

-
- ## Track errors [Kotlin Multiplatform Crash Reporting and Error Tracking][12] displays any issues in your application and the latest available errors. You can view error details and attributes including JSON in the [RUM Explorer][13]. diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md index b231357f790..4037c6334dc 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md @@ -25,7 +25,7 @@ If you have not set up the SDK yet, follow the [in-app setup instructions][1] or Testing apps using `'@datadog/mobile-react-native'` might require completing extra steps, since Native Modules do not exist in testing environments. -Datadog provides mocks for the `'@datadog/mobile-react-native'` package. To use them with [Jest][4], add the following in your Jest setup file: +Datadog provides mocks for the `'@datadog/mobile-react-native'` package. To use them with [Jest][3], add the following in your Jest setup file: ```javascript jest.mock('@datadog/mobile-react-native', () => { @@ -57,12 +57,12 @@ You can specify the following parameters in your configuration when initializing `clientToken` : Required
**Type**: String
-A [Datadog client token][8]. +A [Datadog client token][4]. `env` : Required
**Type**: String
-The application's environment, for example: prod, pre-prod, and staging. Follows the [tag syntax requirements][15]. +The application's environment, for example: prod, pre-prod, and staging. Follows the [tag syntax requirements][5]. `applicationId` : Required
@@ -91,28 +91,28 @@ Enables collection of React Native crashes. : Optional
**Type**: String
**Default**: `US1`
-[The Datadog site parameter of your organization][9]. +[The Datadog site parameter of your organization][6]. `serviceName` : Optional
**Type**: String
-The service name for your application. Follows the [tag syntax requirements][15]. +The service name for your application. Follows the [tag syntax requirements][5]. `version` : Optional
**Type**: String
-The application's version. For example: 1.2.3, 6c44da20, and 2020.02.13. Follows the [tag syntax requirements][15]. +The application's version. For example: 1.2.3, 6c44da20, and 2020.02.13. Follows the [tag syntax requirements][5]. `versionSuffix` : Optional
**Type**: String
-Add a suffix to the reported version of the app. Accepted characters are alphanumerics and `_`, `-`, `:`, `.`, `/`. Other special characters are converted to underscores. A dash (`-`) is automatically added between the version and the suffix. Follows the [tag syntax requirements][15]. +Add a suffix to the reported version of the app. Accepted characters are alphanumerics and `_`, `-`, `:`, `.`, `/`. Other special characters are converted to underscores. A dash (`-`) is automatically added between the version and the suffix. Follows the [tag syntax requirements][5]. `trackFrustrations` : Optional
**Type**: Boolean
**Default**: `true`
-Enables [automatic collection of user frustrations][11]. Only error taps are supported. Implies `trackInteractions: true`. +Enables [automatic collection of user frustrations][7]. Only error taps are supported. Implies `trackInteractions: true`. `nativeCrashReportEnabled` : Optional
@@ -136,7 +136,7 @@ The percentage of sessions to track: `100` for all, `0` for none. Only tracked s : Optional
**Type**: Number
**Default**: `20`
-The percentage of requests to trace: `100` for all, `0` for none. For more information, see [Connect RUM and Traces][12]. +The percentage of requests to trace: `100` for all, `0` for none. For more information, see [Connect RUM and Traces][8]. `verbosity` : Optional
@@ -160,7 +160,7 @@ Enables native interaction tracking. Set to `true` if you want to track interact : Optional
**Type**: List
**Default**: `[]`
-List of your backends hosts to enable tracing with. For more information, see [Connect RUM and Traces][12]. +List of your backends hosts to enable tracing with. For more information, see [Connect RUM and Traces][8]. `telemetrySampleRate` : Optional
@@ -207,7 +207,7 @@ Enables tracking of RUM event when no RUM View is active. By default, background `proxyConfig` : Optional
**Type**: ProxyConfiguration
-Optional [proxy configuration][13]. +Optional [proxy configuration][9]. `useAccessibilityLabel` : Optional
@@ -340,6 +340,55 @@ DdSdkReactNative.setAttributes({ }); ``` +## Track view navigation + +Because React Native offers a wide range of libraries to create screen navigation, only manual view tracking is supported by default. To see RUM or Error tracking sessions populate in Datadog, you need to implement view tracking. + +You can manually start and stop a view using the following `startView()` and `stopView` methods. + +```js +import { + DdRum +} from '@datadog/mobile-react-native'; + +// Start a view with a unique view identifier, a custom view name, and an object to attach additional attributes to the view +DdRum.startView( + '', // has to be unique, for example it can be ViewName-unique-id + 'View Name', + { 'custom.foo': 'something' }, + Date.now() +); +// Stops a previously started view with the same unique view identifier, and an object to attach additional attributes to the view +DdRum.stopView('', { 'custom.bar': 42 }, Date.now()); +``` + +Use one of Datadog's integrations to automatically track views for the following libraries: + +- If you use the [`react-native-navigation`][10] library, then add the `@datadog/mobile-react-native-navigation` package and follow the [setup instructions][11]. +- If you use the [`react-navigation`][12] library, then add the `@datadog/mobile-react-navigation` package and follow the [setup instructions][11]. + +If you experience any issues setting up View tracking with `@datadog/mobile-react-navigation` you can see this Datadog [example application][13] as a reference. + +### Automatic tracking + +Automatic view tracking is supported for the following modules: + +- React Navigation: [@Datadog/mobile-react-navigation][14] +- React Native Navigation: [@Datadog/mobile-react-native-navigation][15] + +In this Datadog example project, View Tracking is achieved through `@datadog/mobile-react-navigation` and is configured using the `NavigationContainer`: + +```tsx + { + DdRumReactNavigationTracking.startTrackingViews( + navigationRef.current, + ); + }}> +``` + + ## Clear all data Use `clearAllData` to clear all data that has not been sent to Datadog. @@ -400,12 +449,12 @@ Events include additional context: | ------------- | ------------------------------------------------ | ----------------------------------------------------------------------- | | LogEvent | `logEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `logEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | -| ActionEvent | `actionEvent.actionContext` | [GestureResponderEvent][5] corresponding to the action or `undefined`. | +| ActionEvent | `actionEvent.actionContext` | [GestureResponderEvent][16] corresponding to the action or `undefined`. | | | `actionEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `actionEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | | ErrorEvent | `errorEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `errorEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | -| ResourceEvent | `resourceEvent.resourceContext` | [XMLHttpRequest][6] corresponding to the resource or `undefined`. | +| ResourceEvent | `resourceEvent.resourceContext` | [XMLHttpRequest][17] corresponding to the resource or `undefined`. | | | `resourceEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `resourceEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | @@ -456,13 +505,13 @@ export default function App() { } ``` -This uses React Native's [InteractionManager.runAfterInteractions][3] to delay the animations. +This uses React Native's [InteractionManager.runAfterInteractions][18] to delay the animations. All interactions with the RUM SDK (view tracking, actions, resources tracing, and so on) are still recorded and kept in a queue with a limit of 100 events. Logs are not recorded and calling a `DdLogs` method before the actual initialization might break logging. -If you experience any issue setting up the asynchronous initialization of Datadog, you can check out our [example application][7]. +If you experience any issue setting up the asynchronous initialization of Datadog, you can check out our [example application][19]. ## Delaying the initialization @@ -521,7 +570,7 @@ const configuration = { ## Monitoring hybrid React Native applications -See [Monitor hybrid React Native applications][16]. +See [Monitor hybrid React Native applications][20]. ## Further reading @@ -529,15 +578,21 @@ See [Monitor hybrid React Native applications][16]. [1]: https://app.datadoghq.com/rum/application/create [2]: /real_user_monitoring/mobile_and_tv_monitoring/react_native -[3]: https://reactnative.dev/docs/interactionmanager#runafterinteractions -[4]: https://jestjs.io/ -[5]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/v0.70/index.d.ts#L548 -[6]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest -[7]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-async -[8]: /account_management/api-app-keys/#client-tokens -[9]: /getting_started/site/ -[11]: /real_user_monitoring/browser/frustration_signals/ -[12]: /real_user_monitoring/platform/connect_rum_and_traces?tab=reactnativerum -[13]: /real_user_monitoring/guide/proxy-mobile-rum-data/ -[15]: /getting_started/tagging/#define-tags -[16]: /real_user_monitoring/guide/monitor-hybrid-react-native-applications \ No newline at end of file +[3]: https://jestjs.io/ +[4]: /account_management/api-app-keys/#client-tokens +[5]: /getting_started/tagging/#define-tags +[6]: /getting_started/site/ +[7]: /real_user_monitoring/browser/frustration_signals/ +[8]: /real_user_monitoring/platform/connect_rum_and_traces?tab=reactnativerum +[9]: /real_user_monitoring/guide/proxy-mobile-rum-data/ +[10]: https://github.com/wix/react-native-navigation +[11]: /real_user_monitoring/mobile_and_tv_monitoring/react_native/integrated_libraries/ +[12]: https://github.com/rmobile_and_tv_monitoring/eact-navigation/react-navigation +[13]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation +[14]: https://www.npmjs.com/package/@datadog/mobile-react-navigation +[15]: https://www.npmjs.com/package/@datadog/mobile-react-native-navigation +[16]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/v0.70/index.d.ts#L548 +[17]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest +[18]: https://reactnative.dev/docs/interactionmanager#runafterinteractions +[19]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-async +[20]: /real_user_monitoring/guide/monitor-hybrid-react-native-applications diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md index 9c8fed1751d..1dfc5d451de 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md @@ -72,25 +72,6 @@ DdRum.startView( DdRum.stopView('', { 'custom.bar': 42 }, Date.now()); ``` -#### Automatic tracking - -Automatic view tracking is supported for the following modules: - -- React Navigation: [@Datadog/mobile-react-navigation][4] -- React Native Navigation: [@Datadog/mobile-react-native-navigation][5] - -In this Datadog example project, View Tracking is achieved through `@datadog/mobile-react-navigation` and is configured using the `NavigationContainer`: - -```tsx - { - DdRumReactNavigationTracking.startTrackingViews( - navigationRef.current, - ); - }}> -``` - ## Usage ### Initialize the library with application context @@ -130,7 +111,7 @@ await DdSdkReactNative.initialize(config);
Configuring the session sample rate does not apply to Error Tracking.
-To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while [initializing the Expo SDK][6]. To set this rate, use the `config.sessionSamplingRate` parameter and specify a percentage between 0 and 100. +To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while [initializing the Expo SDK][4]. To set this rate, use the `config.sessionSamplingRate` parameter and specify a percentage between 0 and 100. ### Upload source maps on EAS builds @@ -162,11 +143,11 @@ yarn add -D @datadog/datadog-ci Run `eas secret:create` to set `DATADOG_API_KEY` to your Datadog API key, and `DATADOG_SITE` to the host of your Datadog site (for example, `datadoghq.com`). -For information about tracking Expo crashes, see [Expo Crash Reporting and Error Tracking][7]. +For information about tracking Expo crashes, see [Expo Crash Reporting and Error Tracking][5]. ## Tracking Expo Router screens -If you are using [Expo Router][8], track your screens in your `app/_layout.js` file: +If you are using [Expo Router][6], track your screens in your `app/_layout.js` file: ```javascript import { useEffect } from 'react'; @@ -192,10 +173,10 @@ If you are using Expo Go, switch to development builds (recommended), or keep us ### Switch from Expo Go to development builds -Your application's [development builds][9] are debug builds that contain the `expo-dev-client` package. +Your application's [development builds][7] are debug builds that contain the `expo-dev-client` package. -1. Enable the [custom native code to run][10] with `expo run:android` and `expo run:ios`. -2. To start using your development application, run `expo install expo-dev-client` and `expo start --dev-client`. This installs and starts the [`expo-dev-client` package][11] to execute the added native code in dev mode. +1. Enable the [custom native code to run][8] with `expo run:android` and `expo run:ios`. +2. To start using your development application, run `expo install expo-dev-client` and `expo start --dev-client`. This installs and starts the [`expo-dev-client` package][9] to execute the added native code in dev mode. ### Develop with Expo Go @@ -287,11 +268,9 @@ config.resourceEventMapper = event => { [1]: /real_user_monitoring/ [2]: /error_tracking/ [3]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-expo-react-navigation -[4]: https://www.npmjs.com/package/@datadog/mobile-react-navigation -[5]: https://www.npmjs.com/package/@datadog/mobile-react-native-navigation -[6]: /real_user_monitoring/mobile_and_tv_monitoring/setup/expo#initialize-the-library-with-application-context -[7]: /real_user_monitoring/error_tracking/mobile/expo/ -[8]: https://expo.github.io/router/docs/ -[9]: https://docs.expo.dev/development/introduction/ -[10]: https://docs.expo.dev/workflow/customizing/#releasing-apps-with-custom-native-code-to -[11]: https://docs.expo.dev/development/getting-started/ +[4]: /real_user_monitoring/mobile_and_tv_monitoring/setup/expo#initialize-the-library-with-application-context +[5]: /real_user_monitoring/error_tracking/mobile/expo/ +[6]: https://expo.github.io/router/docs/ +[7]: https://docs.expo.dev/development/introduction/ +[8]: https://docs.expo.dev/workflow/customizing/#releasing-apps-with-custom-native-code-to +[9]: https://docs.expo.dev/development/getting-started/ 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 f91fce13b25..587f74fdeb1 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 @@ -89,8 +89,8 @@ 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 +[1]: https://app.datadoghq.com/rum/application/create {{% /tab %}} {{% tab "Error Tracking" %}} @@ -101,8 +101,8 @@ The Datadog React Native SDK requires you to have `compileSdkVersion = 31` or hi {{< 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/ +[1]: https://app.datadoghq.com/error-tracking/settings/setup/client/ {{% /tab %}} {{< /tabs >}} @@ -374,35 +374,6 @@ If user interactions tracking is enabled as in the code example above, the Datad 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. -### Track view navigation - -Because React Native offers a wide range of libraries to create screen navigation, only manual view tracking is supported by default. To see RUM or Error tracking sessions populate in Datadog, you need to implement view tracking. - -You can manually start and stop a view using the following `startView()` and `stopView` methods. - -```js -import { - DdRum -} from '@datadog/mobile-react-native'; - -// Start a view with a unique view identifier, a custom view name, and an object to attach additional attributes to the view -DdRum.startView( - '', // has to be unique, for example it can be ViewName-unique-id - 'View Name', - { 'custom.foo': 'something' }, - Date.now() -); -// Stops a previously started view with the same unique view identifier, and an object to attach additional attributes to the view -DdRum.stopView('', { 'custom.bar': 42 }, Date.now()); -``` - -Use one of Datadog's integrations to automatically track views for the following libraries: - -- If you use the [`react-native-navigation`][11] library, then add the `@datadog/mobile-react-native-navigation` package and follow the [setup instructions][12]. -- If you use the [`react-navigation`][13] library, then add the `@datadog/mobile-react-navigation` package and follow the [setup instructions][12]. - -If you experience any issues setting up View tracking with `@datadog/mobile-react-navigation` you can see this Datadog [example application][14] as a reference. - ## 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. @@ -428,11 +399,11 @@ configuration.trackBackgroundEvents = true; ### Android -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][15], 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. +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. ### iOS -Before data is uploaded to Datadog, it is stored in cleartext in the cache directory (`Library/Caches`) of your [application sandbox][16], which can't be read by any other app installed on the device. +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. ## Development mode @@ -454,7 +425,7 @@ const config = new DatadogProviderConfiguration( ## New architecture support -The [React Native new architecture][15] is supported by the React Native SDK in version `>=1.8.0`. +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`. @@ -488,7 +459,7 @@ pre_install do |installer| end ``` -**Note**: This solution comes from this [StackOverflow][18] post. +**Note**: This solution comes from this [StackOverflow][13] post. ## Further Reading @@ -504,11 +475,6 @@ end [8]: /account_management/api-app-keys/#client-tokens [9]: /real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/reactnative/#initialize-the-library-with-application-context [10]: /getting_started/tagging/#define-tags -[11]: https://github.com/wix/react-native-navigation -[12]: /real_user_monitoring/mobile_and_tv_monitoring/react_native/integrated_libraries/ -[13]: https://github.com/rmobile_and_tv_monitoring/eact-navigation/react-navigation -[14]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation -[15]: https://source.android.com/security/app-sandbox -[16]: https://support.apple.com/guide/security/security-of-runtime-process-sec15bfe098e/web -[17]: https://reactnative.dev/docs/the-new-architecture/landing-page -[18]: https://stackoverflow.com/questions/37388126/use-frameworks-for-only-some-pods-or-swift-pods/60914505#60914505 +[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 diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md index 0539659b170..5cb4237da18 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md @@ -96,6 +96,43 @@ Whenever you use a `Video` or an `Audio` node to stream media, you can forward a end while ``` + +## 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][3] 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 +``` + ## Enrich user sessions After your Roku channel is instrumented with RUM, you can further enrich user session information and gain finer control over the attributes collected by tracking custom events. @@ -131,10 +168,12 @@ In addition to the default attributes captured by the SDK automatically, you can m.global.setField("datadogContext", { foo: "Some value", bar: 123}) ``` +## Further Reading + +{{< partial name="whats-next/whats-next.html" >}} + [1]: https://app.datadoghq.com/rum/application/create [2]: /real_user_monitoring/mobile_and_tv_monitoring/roku/setup +[3]: /real_user_monitoring/mobile_and_tv_monitoring/roku/data_collected -## Further Reading - -{{< partial name="whats-next/whats-next.html" >}} 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 a54f3e998b8..1bfeef56551 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 @@ -195,42 +195,6 @@ end sub 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). -### Step 4 - Instrument the channel - -See [**Track RUM Resources**][9] to enable automatic tracking of all your resources, and [**Enrich user sessions**][10] to add custom global or user information to your events. - -#### Track Views - -To split [user sessions][11] 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. @@ -250,7 +214,4 @@ This means that even if users open your application while offline, no data is lo [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/advanced_configuration/#track-rum-resources -[10]: /real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration/#enrich-user-sessions -[11]: /real_user_monitoring/mobile_and_tv_monitoring/roku/data_collected +[8]: /real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration/#enrich-user-sessions \ No newline at end of file From c42d9de3ceb72384572e1f663a817363ba3f580b Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Mon, 23 Dec 2024 09:30:11 -0800 Subject: [PATCH 2/6] flutter move views back but keep track resources --- .../flutter/advanced_configuration.md | 65 ------------------ .../mobile_and_tv_monitoring/flutter/setup.md | 66 +++++++++++++++++++ 2 files changed, 66 insertions(+), 65 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md index f4e84cec695..0e25dd060a6 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration.md @@ -179,71 +179,6 @@ A custom endpoint for sending RUM data. **Default**: `20.0` The sampling rate for telemetry data, such as errors and debug logs. -## 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][18] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. - -### Flutter Navigator 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`. - -### Flutter Navigator 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`][25] 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). - -### Renaming Views - -For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][26] 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 resources Use the [Datadog Tracking HTTP Client][12] package to enable automatic tracking of resources and HTTP calls from your views. 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 0aa5a245bc0..b1adeb1e263 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 @@ -241,6 +241,72 @@ The SDK changes its behavior according to the new value. For example, if the cur - 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][18] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. + +### Flutter Navigator 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`. + +### Flutter Navigator 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`][25] 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). + + +### Renaming Views + +For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][26] 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: From 16b8ed9bfd331b0580de2bcd6af9ce39ee42b875 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Mon, 23 Dec 2024 09:38:33 -0800 Subject: [PATCH 3/6] move tracking and instrument back expo and roku --- .../react_native/advanced_configuration.md | 42 +++++-------------- .../react_native/setup/expo.md | 21 ++++++++++ .../roku/advanced_configuration.md | 38 ----------------- .../mobile_and_tv_monitoring/roku/setup.md | 40 +++++++++++++++++- 4 files changed, 70 insertions(+), 71 deletions(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md index 4037c6334dc..283de5e1faf 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md @@ -369,26 +369,6 @@ Use one of Datadog's integrations to automatically track views for the following If you experience any issues setting up View tracking with `@datadog/mobile-react-navigation` you can see this Datadog [example application][13] as a reference. -### Automatic tracking - -Automatic view tracking is supported for the following modules: - -- React Navigation: [@Datadog/mobile-react-navigation][14] -- React Native Navigation: [@Datadog/mobile-react-native-navigation][15] - -In this Datadog example project, View Tracking is achieved through `@datadog/mobile-react-navigation` and is configured using the `NavigationContainer`: - -```tsx - { - DdRumReactNavigationTracking.startTrackingViews( - navigationRef.current, - ); - }}> -``` - - ## Clear all data Use `clearAllData` to clear all data that has not been sent to Datadog. @@ -449,12 +429,12 @@ Events include additional context: | ------------- | ------------------------------------------------ | ----------------------------------------------------------------------- | | LogEvent | `logEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `logEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | -| ActionEvent | `actionEvent.actionContext` | [GestureResponderEvent][16] corresponding to the action or `undefined`. | +| ActionEvent | `actionEvent.actionContext` | [GestureResponderEvent][14] corresponding to the action or `undefined`. | | | `actionEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `actionEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | | ErrorEvent | `errorEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `errorEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | -| ResourceEvent | `resourceEvent.resourceContext` | [XMLHttpRequest][17] corresponding to the resource or `undefined`. | +| ResourceEvent | `resourceEvent.resourceContext` | [XMLHttpRequest][15] corresponding to the resource or `undefined`. | | | `resourceEvent.additionalInformation.userInfo` | Contains the global user info set by `DdSdkReactNative.setUser`. | | | `resourceEvent.additionalInformation.attributes` | Contains the global attributes set by `DdSdkReactNative.setAttributes`. | @@ -505,13 +485,13 @@ export default function App() { } ``` -This uses React Native's [InteractionManager.runAfterInteractions][18] to delay the animations. +This uses React Native's [InteractionManager.runAfterInteractions][16] to delay the animations. All interactions with the RUM SDK (view tracking, actions, resources tracing, and so on) are still recorded and kept in a queue with a limit of 100 events. Logs are not recorded and calling a `DdLogs` method before the actual initialization might break logging. -If you experience any issue setting up the asynchronous initialization of Datadog, you can check out our [example application][19]. +If you experience any issue setting up the asynchronous initialization of Datadog, you can check out our [example application][17]. ## Delaying the initialization @@ -570,7 +550,7 @@ const configuration = { ## Monitoring hybrid React Native applications -See [Monitor hybrid React Native applications][20]. +See [Monitor hybrid React Native applications][18]. ## Further reading @@ -589,10 +569,8 @@ See [Monitor hybrid React Native applications][20]. [11]: /real_user_monitoring/mobile_and_tv_monitoring/react_native/integrated_libraries/ [12]: https://github.com/rmobile_and_tv_monitoring/eact-navigation/react-navigation [13]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation -[14]: https://www.npmjs.com/package/@datadog/mobile-react-navigation -[15]: https://www.npmjs.com/package/@datadog/mobile-react-native-navigation -[16]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/v0.70/index.d.ts#L548 -[17]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest -[18]: https://reactnative.dev/docs/interactionmanager#runafterinteractions -[19]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-async -[20]: /real_user_monitoring/guide/monitor-hybrid-react-native-applications +[14]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/v0.70/index.d.ts#L548 +[15]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest +[16]: https://reactnative.dev/docs/interactionmanager#runafterinteractions +[17]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-async +[18]: /real_user_monitoring/guide/monitor-hybrid-react-native-applications diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md index 1dfc5d451de..c17b6b6c7ca 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo.md @@ -72,6 +72,25 @@ DdRum.startView( DdRum.stopView('', { 'custom.bar': 42 }, Date.now()); ``` +### Automatic tracking + +Automatic view tracking is supported for the following modules: + +- React Navigation: [@Datadog/mobile-react-navigation][10] +- React Native Navigation: [@Datadog/mobile-react-native-navigation][11] + +In this Datadog example project, View Tracking is achieved through `@datadog/mobile-react-navigation` and is configured using the `NavigationContainer`: + +```tsx + { + DdRumReactNavigationTracking.startTrackingViews( + navigationRef.current, + ); + }}> +``` + ## Usage ### Initialize the library with application context @@ -274,3 +293,5 @@ config.resourceEventMapper = event => { [7]: https://docs.expo.dev/development/introduction/ [8]: https://docs.expo.dev/workflow/customizing/#releasing-apps-with-custom-native-code-to [9]: https://docs.expo.dev/development/getting-started/ +[10]: https://www.npmjs.com/package/@datadog/mobile-react-navigation +[11]: https://www.npmjs.com/package/@datadog/mobile-react-native-navigation \ No newline at end of file diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md index 5cb4237da18..13b03f9c9d6 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/roku/advanced_configuration.md @@ -96,43 +96,6 @@ Whenever you use a `Video` or an `Audio` node to stream media, you can forward a end while ``` - -## 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][3] 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 -``` - ## Enrich user sessions After your Roku channel is instrumented with RUM, you can further enrich user session information and gain finer control over the attributes collected by tracking custom events. @@ -174,6 +137,5 @@ In addition to the default attributes captured by the SDK automatically, you can [1]: https://app.datadoghq.com/rum/application/create [2]: /real_user_monitoring/mobile_and_tv_monitoring/roku/setup -[3]: /real_user_monitoring/mobile_and_tv_monitoring/roku/data_collected 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 1bfeef56551..a8e3d50c65f 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 @@ -195,6 +195,43 @@ end sub 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. @@ -214,4 +251,5 @@ This means that even if users open your application while offline, no data is lo [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 \ No newline at end of file +[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 \ No newline at end of file From 85849c55783bd779fda81b660c5ff08afe56e6c5 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 27 Dec 2024 08:24:54 -0800 Subject: [PATCH 4/6] fix links --- .../mobile_and_tv_monitoring/flutter/setup.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 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 b1adeb1e263..251aee8613a 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 @@ -166,7 +166,7 @@ This loads the CDN-delivered Datadog Browser SDKs for Logs and RUM. The synchron 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. +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. @@ -176,7 +176,7 @@ To ensure the safety of your data, you must use a client token. You cannot use D You can initialize the library using one of two methods in your `main.dart` file. -- Use `DatadogSdk.runApp` to automatically set up [Error Tracking][5]. +- Use `DatadogSdk.runApp` to automatically set up [Error Tracking][6]. ```dart await DatadogSdk.runApp(configuration, TrackingConsent.granted, () async { @@ -184,7 +184,7 @@ You can initialize the library using one of two methods in your `main.dart` file }) ``` -- You can also manually set up [Error Tracking][5] 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`. +- 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(); @@ -243,7 +243,7 @@ The SDK changes its behavior according to the new value. For example, if the cur ## 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][18] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. +If you are using Flutter Navigator v2.0, your setup for automatic view tracking differs depending on your routing middleware. See [Flutter Integrated Libraries][7] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. ### Flutter Navigator v1 @@ -264,7 +264,7 @@ If you are not using named routes, you can use `DatadogRouteAwareMixin` in conju ### Flutter Navigator 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`][25] uses the same observer interface as Flutter Navigator v1, `DatadogNavigationObserver` can be added to other observers as a parameter to `GoRouter`. +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`][8] 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( @@ -281,12 +281,12 @@ MaterialApp.router( ) ``` -For examples that use routers other than `go_router`, see [Automatically track views](#automatically-track-views). +For examples that use routers other than `go_router`, see [Automatically track views][11]. ### Renaming Views -For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][26] callback. This function can fall back to the default behavior of the observer by calling `defaultViewInfoExtractor`. For example: +For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][12] callback. This function can fall back to the default behavior of the observer by calling `defaultViewInfoExtractor`. For example: ```dart RumViewInfo? infoExtractor(Route route) { @@ -371,13 +371,13 @@ This means that even if users open your application while offline, no data is lo [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]: /real_user_monitoring/error_tracking/flutter -[6]: https://pub.dev/packages/go_router -[7]: /real_user_monitoring/mobile_and_tv_monitoring/flutter/advanced_configuration/#automatic-view-tracking -[8]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/ViewInfoExtractor.html -[9]: https://pub.dev/packages/datadog_tracking_http_client -[10]: https://api.flutter.dev/flutter/dart-io/HttpOverrides/current.html -[11]: https://pub.dev/documentation/datadog_tracking_http_client/latest/datadog_tracking_http_client/DatadogTrackingHttpOverrides-class.html -[12]: /serverless/distributed_tracing -[13]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/RumUserActionDetector-class.html -[14]: https://pub.dev/documentation/datadog_flutter_plugin/latest/datadog_flutter_plugin/RumUserActionAnnotation-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 \ No newline at end of file From b1540b616f61bcac01221d1c22f4e04d256c994b Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Fri, 27 Dec 2024 08:33:23 -0800 Subject: [PATCH 5/6] update GestureResponderEvent link for RN --- .../react_native/advanced_configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md index 283de5e1faf..25399afd5a0 100644 --- a/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md +++ b/content/en/real_user_monitoring/mobile_and_tv_monitoring/react_native/advanced_configuration.md @@ -569,7 +569,7 @@ See [Monitor hybrid React Native applications][18]. [11]: /real_user_monitoring/mobile_and_tv_monitoring/react_native/integrated_libraries/ [12]: https://github.com/rmobile_and_tv_monitoring/eact-navigation/react-navigation [13]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation -[14]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/v0.70/index.d.ts#L548 +[14]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/683ec4a2b420ff6bd3873a7338416ad3ec0b6595/types/react-native-side-menu/index.d.ts#L2 [15]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest [16]: https://reactnative.dev/docs/interactionmanager#runafterinteractions [17]: https://github.com/DataDog/dd-sdk-reactnative-examples/tree/main/rum-react-navigation-async From 2b9b1b79c8261288fed58ed2b834b6ba53bc0044 Mon Sep 17 00:00:00 2001 From: Rosa Trieu Date: Thu, 2 Jan 2025 14:01:58 -0800 Subject: [PATCH 6/6] fix links --- .../mobile_and_tv_monitoring/flutter/setup.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 251aee8613a..8ab7d1cf24e 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 @@ -243,7 +243,7 @@ The SDK changes its behavior according to the new value. For example, if the cur ## 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][7] for instructions on how to integrate with [go_router][8], [AutoRoute][9], and [Beamer][10]. +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 Navigator v1 @@ -264,7 +264,7 @@ If you are not using named routes, you can use `DatadogRouteAwareMixin` in conju ### Flutter Navigator 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`][8] uses the same observer interface as Flutter Navigator v1, `DatadogNavigationObserver` can be added to other observers as a parameter to `GoRouter`. +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( @@ -281,12 +281,12 @@ MaterialApp.router( ) ``` -For examples that use routers other than `go_router`, see [Automatically track views][11]. +For examples that use routers other than `go_router`, see [Automatically track views](#automatically-track-views). ### Renaming Views -For all setups, you can rename views or supply custom paths by providing a [`viewInfoExtractor`][12] callback. This function can fall back to the default behavior of the observer by calling `defaultViewInfoExtractor`. For example: +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) {