diff --git a/content/.gitignore b/content/.gitignore index fdb635d0123b2..1d6878967ab3a 100644 --- a/content/.gitignore +++ b/content/.gitignore @@ -1,3 +1,6 @@ # GENERATED FILE: DO NOT EDIT # Ignore .md files compiled from Markdoc /en/real_user_monitoring/guide/proxy-mobile-rum-data.md + +/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.md +/en/product_analytics/session_replay/mobile/setup_and_configuration.md \ No newline at end of file diff --git a/content/en/product_analytics/session_replay/mobile/setup_and_configuration.md b/content/en/product_analytics/session_replay/mobile/setup_and_configuration.mdoc.md similarity index 81% rename from content/en/product_analytics/session_replay/mobile/setup_and_configuration.md rename to content/en/product_analytics/session_replay/mobile/setup_and_configuration.mdoc.md index 3a1e317777785..49ffd60bf2e10 100644 --- a/content/en/product_analytics/session_replay/mobile/setup_and_configuration.md +++ b/content/en/product_analytics/session_replay/mobile/setup_and_configuration.mdoc.md @@ -1,7 +1,10 @@ --- title: Mobile Session Replay Setup and Configuration description: Setting up and configuring Mobile Session Replay. -aliases: +content_filters: + - trait_id: platform + option_group_id: rum_session_replay_sdk_options + label: "SDK" further_reading: - link: '/product_analytics/session_replay/mobile' tag: Documentation @@ -20,4 +23,4 @@ further_reading: text: Session Replay --- -{{< include-markdown "real_user_monitoring/session_replay/mobile/setup_and_configuration" >}} +{% partial file="rum/session_replay/setup_and_configuration.mdoc.md" /%} diff --git a/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.md b/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.md deleted file mode 100644 index 017d2bc84d19f..0000000000000 --- a/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -title: Mobile Session Replay Setup and Configuration -description: Setting up and configuring Mobile Session Replay. -aliases: -further_reading: - - link: '/real_user_monitoring/session_replay/mobile' - tag: Documentation - text: Mobile Session Replay - - link: '/real_user_monitoring/session_replay/mobile/app_performance' - tag: Documentation - text: How Mobile Session Replay Impacts App Performance - - link: '/real_user_monitoring/session_replay/mobile/privacy_options' - tag: Documentation - text: Mobile Session Replay Privacy Options - - link: '/real_user_monitoring/session_replay/mobile/troubleshooting' - tag: Documentation - text: Troubleshoot Mobile Session Replay - - link: '/real_user_monitoring/session_replay' - tag: Documentation - text: Session Replay - - link: '/real_user_monitoring/mobile_and_tv_monitoring/android/web_view_tracking' - tag: Documentation - text: Web View Tracking ---- - -## Setup - -{{< tabs >}} -{{% tab "Android" %}} - -All Session Replay SDK versions can be found in the [Maven Central Repository][1]. - -To set up Mobile Session Replay for Android: - -1. Make sure you've [setup and initialized the Datadog Android RUM SDK][2] with views instrumentation enabled. - -2. Declare the Datadog Session Replay as a dependency: - {{< code-block lang="kotlin" filename="build.gradle.kts" disable_copy="false" collapsible="true" >}} - implementation("com.datadoghq:dd-sdk-android-rum:[datadog_version]") - implementation("com.datadoghq:dd-sdk-android-session-replay:[datadog_version]") - // in case you need Material support - implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]") - // in case you need Jetpack Compose support - implementation("com.datadoghq:dd-sdk-android-session-replay-compose:[datadog_version]") - {{< /code-block >}} - -3. Enable Session Replay in your app: - - {{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} - val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - // in case you need Material extension support - .addExtensionSupport(MaterialExtensionSupport()) - // in case you need Jetpack Compose support - .addExtensionSupport(ComposeExtensionSupport()) - .build() - SessionReplay.enable(sessionReplayConfig) - {{< /code-block >}} - -[1]: https://central.sonatype.com/artifact/com.datadoghq/dd-sdk-android-session-replay/versions -[2]: /real_user_monitoring/android/?tab=kotlin - -{{% /tab %}} -{{% tab "iOS" %}} - -To set up Mobile Session Replay for iOS: - -1. Make sure you've [set up and initialized the Datadog iOS RUM SDK][1] with views instrumentation enabled. - -2. Link the Datadog Session Replay library to your project based on your package manager: - - | Package manager | Installation step | - |----------------------------|---------------------------------------------------------------------------------------------| - | [CocoaPods][2] | Add `pod 'DatadogSessionReplay'` to your `Podfile`. | - | [Swift Package Manager][3] | Add `DatadogSessionReplay` library as a dependency to your app target. | - | [Carthage][4] | Add `DatadogSessionReplay.xcframework` as a dependency to your app target. | - -3. Enable Session Replay in your app: - - {{< code-block lang="swift" filename="AppDelegate.swift" disable_copy="false" collapsible="true" >}} - import DatadogSessionReplay - - SessionReplay.enable( - with: SessionReplay.Configuration( - replaySampleRate: sampleRate, - // Enable the experimental SwiftUI recording - featureFlags: [.swiftui: true] - ) - ) - {{< /code-block >}} - -[1]: /real_user_monitoring/ios/?tab=swift -[2]: https://cocoapods.org/ -[3]: https://www.swift.org/package-manager/ -[4]: https://github.com/Carthage/Carthage - -{{% /tab %}} -{{% tab "Kotlin Multiplatform" %}} - -All Session Replay SDK versions can be found in the [Maven Central Repository][1]. - -To set up Mobile Session Replay for Kotlin Multiplatform: - -1. Make sure you've [setup and initialized the Datadog Kotlin Multiplatform RUM SDK][2] with views instrumentation enabled. - -2. Add the `DatadogSessionReplay` iOS library as a link-only dependency. For instructions, see the [guide][3]. - -2. Declare Datadog Session Replay as a dependency: - {{< code-block lang="kotlin" filename="build.gradle.kts" disable_copy="false" collapsible="true" >}} - kotlin { - sourceSets { - commonMain.dependencies { - implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-rum:[datadog_version]") - implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-session-replay:[datadog_version]") - } - - // in case you need Material support on Android - androidMain.dependencies { - implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]") - } - } - } - {{< /code-block >}} - -3. Enable Session Replay in your app: - - {{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} - // in common source set - val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - .build() - SessionReplay.enable(sessionReplayConfig) - {{< /code-block >}} - -4. In case you need Material support on Android, call the `SessionReplayConfiguration.Builder.addExtensionSupport(MaterialExtensionSupport())` method, available in the Android source set. - -[1]: https://central.sonatype.com/artifact/com.datadoghq/dd-sdk-kotlin-multiplatform-session-replay/versions -[2]: /real_user_monitoring/kotlin_multiplatform/ -[3]: /real_user_monitoring/kotlin_multiplatform/#add-native-dependencies-for-ios - -{{% /tab %}} - -{{% tab "React Native" %}} - -
To enable Session Replay, you must use at least version 2.0.4 of the Datadog React Native SDK, and ensure that the Session Replay SDK version matches the React Native SDK version you are using.
- -All Session Replay SDK versions can be found in the [npmjs repository][1]. - -To set up Mobile Session Replay for React Native: - -1. Make sure you've [setup and initialized the Datadog React Native SDK][2] with views instrumentation enabled. - -2. Add the `@datadog/mobile-react-native-session-replay` dependency, and make sure it matches the `@datadog/mobile-react-native` version, either through [yarn][3] or [npm][4]. - - ```shell - yarn add @datadog/mobile-react-native-session-replay - ``` - - ```shell - npm install @datadog/mobile-react-native-session-replay - ``` - -2. After the Datadog React Native SDK and Session Replay SDK dependencies are imported, you can enable the feature when configuring the SDK: - - - If you use the `DatadogProvider` component: - - {{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} - - import { DatadogProvider, DatadogProviderConfiguration } from "@datadog/mobile-react-native"; - import { - ImagePrivacyLevel, - SessionReplay, - TextAndInputPrivacyLevel, - TouchPrivacyLevel, - } from "@datadog/mobile-react-native-session-replay"; - - const configuration = new DatadogProviderConfiguration(/* ... */) - - // Add this function as onInitialization prop to DatadogProvider - const onSDKInitialized = async () => { - await SessionReplay.enable({ - replaySampleRate: 100, - textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS, - imagePrivacyLevel: ImagePrivacyLevel.MASK_NONE, - touchPrivacyLevel: TouchPrivacyLevel.SHOW, - }); - }; - - const App = () => { - const navigationRef = React.useRef(null); - return ( - - {/* App */} - - ); - }; - - export default App; - {{< /code-block >}} - - - If you use the `DdSdkReactNative.initialize` method: - - {{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} - - import { DdSdkReactNative, DdSdkReactNativeConfiguration } from "@datadog/mobile-react-native"; - import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; - - const configuration = new DdSdkReactNativeConfiguration(/* ... */) - -DdSdkReactNative.initialize(configuration) - .then(() => SessionReplay.enable()) - .catch((error) => { /* handle error */ }); - {{< /code-block >}} - -3. Enable Session Replay in your app, after initializing the Datadog SDK: - {{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} - - import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; - - SessionReplay.enable(); - - {{< /code-block >}} - -4. Define the configuration for Session Replay: - - {{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} - - SessionReplay.enable({ - replaySampleRate: 100, // Session Replay will be available for all sessions already captured by the SDK - }); - - {{< /code-block >}} - - During this step, you can also configure multiple [privacy levels][5] that apply to Session Replays. - -5. (iOS only) Update your iOS pods. - ```shell - cd ios && pod install - ``` -6. Rebuild your iOS and Android apps. - -[1]: https://www.npmjs.com/package/@datadog/mobile-react-native-session-replay?activeTab=versions\ -[2]: /real_user_monitoring/mobile_and_tv_monitoring/setup/reactnative/ -[3]: https://yarnpkg.com/package?q=datadog%20react%20native%20ses&name=%40datadog%2Fmobile-react-native-session-replay -[4]: https://www.npmjs.com/package/@datadog/mobile-react-native-session-replay?activeTab=versions -[5]: /real_user_monitoring/session_replay/mobile/privacy_options/?tab=reactnative - - -{{% /tab %}} - -{{< /tabs >}} - -## Web view instrumentation - -You can record the entire user journey across both [web and native views][1] on iOS or Android and watch it in a single Session Replay. - -The Session Replay is recorded through the Browser SDK, then the Mobile SDK handles the batching and uploading of the webview recording. - -{{< tabs >}} -{{% tab "Android" %}} - -To instrument your consolidated web and native Session Replay views for Android: - -1. Ensure you are using version [`2.8.0`][2] or higher of the Android SDK. -2. Enable [webview tracking][3] for your mobile application. -3. Enable [Session Replay][4] for your web application. -4. Enable Session Replay for your mobile application (see setup instructions above). - -[1]: /real_user_monitoring/mobile_and_tv_monitoring/android/web_view_tracking/ -[2]: https://github.com/DataDog/dd-sdk-android/releases/tag/2.8.0 -[3]: /real_user_monitoring/mobile_and_tv_monitoring/android/web_view_tracking/?tab=android#instrument-your-web-views -[4]: /real_user_monitoring/session_replay/browser/#setup - -{{% /tab %}} -{{% tab "iOS" %}} - -To instrument your consolidated web and native Session Replay views for iOS: - -1. Ensure you are using version [`2.13.0`][1] or higher of the iOS SDK. -2. Enable [webview tracking][2] for your mobile application. -3. Enable [Session Replay][3] for your web application. -4. Enable Session Replay for your mobile application (see setup instructions above). - -[1]: https://github.com/DataDog/dd-sdk-ios/releases/tag/2.13.0 -[2]: /real_user_monitoring/mobile_and_tv_monitoring/ios/web_view_tracking/?tab=ios#instrument-your-web-views -[3]: /real_user_monitoring/session_replay/browser/#setup - -{{% /tab %}} -{{% tab "Kotlin Multiplatform" %}} - -To instrument your consolidated web and native Session Replay views for Kotlin Multiplatform: - -1. Enable [webview tracking][1] for your mobile application. -2. Enable [Session Replay][2] for your web application. -3. Enable Session Replay for your mobile application (see setup instructions above). - -[1]: /real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/web_view_tracking/?tab=kotlinmultiplatform#instrument-your-web-views -[2]: /real_user_monitoring/session_replay/browser/#setup - -{{% /tab %}} -{{% tab "React Native" %}} - -To instrument your consolidated web and native Session Replay views for React Native: - -1. Enable [webview tracking][1] for your React Native application. -2. Enable [Session Replay][2] for your web application. -3. Enable Session Replay for your mobile application (see setup instructions above). - -**Note**: This feature is not compatible with React Native's [New Architecture][3] for Android. - -[1]: /real_user_monitoring/mobile_and_tv_monitoring/web_view_tracking/?tab=reactnative#instrument-your-web-views -[2]: /real_user_monitoring/session_replay/browser/#setup - -{{% /tab %}} -{{< /tabs >}} - -## Additional configuration -### Set the sample rate for recorded sessions to appear - -The sample rate is an optional parameter in the Session Replay configuration. It must be a number between 0.0 and 100.0, where 0 indicates that no replays are recorded and 100 means that all RUM sessions include a replay. If the sample rate is not specified in the configuration, the default value of 100 is applied. - -This sample rate is applied in addition to the RUM sample rate. For example, if RUM uses a sample rate of 80% and Session Replay uses a sample rate of 20%, it means that out of all user sessions, 80% are included in RUM, and within those sessions, only 20% have replays. - -{{< tabs >}} -{{% tab "Android" %}} - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} -val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - ... - .build() -{{< /code-block >}} - -{{% /tab %}} -{{% tab "iOS" %}} - -{{< code-block lang="swift" filename="AppDelegate.swift" disable_copy="false" collapsible="true" >}} -var sessionReplayConfig = SessionReplay.Configuration( - replaySampleRate: sampleRate -) -{{< /code-block >}} - -{{% /tab %}} -{{% tab "Kotlin Multiplatform" %}} - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} -val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - ... - .build() -{{< /code-block >}} - -{{% /tab %}} -{{% tab "React Native" %}} -{{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} -import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; - -SessionReplay.enable({ - replaySampleRate: [sampleRate] -}); -{{< /code-block >}} -{{% /tab %}} -{{< /tabs >}} - -### Start or stop the recording manually - -By default, Session Replay starts recording automatically. However, if you prefer to manually start recording at a specific point in your application, you can use the optional `startRecordingImmediately` parameter as shown below, and later call `SessionReplay.startRecording()`. You can also use `SessionReplay.stopRecording()` to stop the recording anytime. - -{{< tabs >}} -{{% tab "Android" %}} - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} - val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - .startRecordingImmediately(false) - .build() - // Do something - SessionReplay.startRecording() - SessionReplay.stopRecording() -{{< /code-block >}} - -{{% /tab %}} - -{{% tab "iOS" %}} - -{{< code-block lang="swift" filename="AppDelegate.swift" disable_copy="false" collapsible="true" >}} - let sessionReplayConfig = SessionReplay.Configuration( - replaySampleRate: sampleRate, - startRecordingImmediately: false - ) - // Do something - SessionReplay.startRecording() - SessionReplay.stopRecording() -{{< /code-block >}} - -{{% /tab %}} - -{{% tab "Kotlin Multiplatform" %}} - - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} - val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) - .startRecordingImmediately(false) - .build() - // Do something - SessionReplay.startRecording() - SessionReplay.stopRecording() -{{< /code-block >}} -{{% /tab %}} - -{{% tab "React Native" %}} -{{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} -import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; - -SessionReplay.enable({ - replaySampleRate: sampleRate, - startRecordingImmediately: false -}); -// Do something -SessionReplay.startRecording(); -SessionReplay.stopRecording(); -{{< /code-block >}} -{{% /tab %}} -{{< /tabs >}} - -### Validate whether Session Replay data is being sent - -To validate whether Session Replay data is being sent from the app, you can enable debug option in Datadog SDK: - -{{< tabs >}} -{{% tab "Android" %}} - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} -Datadog.setVerbosity(Log.DEBUG) -{{< /code-block >}} - -{{% /tab %}} -{{% tab "iOS" %}} - -{{< code-block lang="swift" filename="AppDelegate.swift" disable_copy="false" collapsible="true" >}} -Datadog.verbosityLevel = .debug -{{< /code-block >}} - -If everything is fine, following logs should appear in the Xcode debug console in about 30 seconds after launching the app: - -{{< code-block lang="bash" filename="Xcode console" disable_copy="true" >}} - -[DATADOG SDK] 🐶 → 10:21:29.812 ⏳ (session-replay) Uploading batch... -[DATADOG SDK] 🐶 → 10:21:30.442 → (session-replay) accepted, won't be retransmitted: [response code: 202 (accepted), request ID: BD445EA-...-8AFCD3F3D16] - -{{< /code-block >}} - -{{% /tab %}} -{{% tab "Kotlin Multiplatform" %}} - -{{< code-block lang="kotlin" filename="Application.kt" disable_copy="false" collapsible="true" >}} -Datadog.setVerbosity(SdkLogVerbosity.DEBUG) -{{< /code-block >}} - -{{% /tab %}} -{{% tab "React Native" %}} - -Set the verbosity to `DEBUG` when you initialize the SDK: - -{{< code-block lang="typescript" filename="App.tsx" disable_copy="false" collapsible="true" >}} - -import { SdkVerbosity } from "@datadog/mobile-react-native"; - -... - -config.verbosity = SdkVerbosity.DEBUG; - -{{< /code-block >}} - -{{% /tab %}} -{{< /tabs >}} - -### Privacy options - -See [Privacy Options][2]. - -## Further reading - -{{< partial name="whats-next/whats-next.html" >}} - -[1]: /real_user_monitoring/mobile_and_tv_monitoring/ios/web_view_tracking -[2]: /real_user_monitoring/session_replay/mobile/privacy_options -[3]: https://reactnative.dev/architecture/landing-page diff --git a/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.mdoc.md b/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.mdoc.md new file mode 100644 index 0000000000000..caa8ae551ca8a --- /dev/null +++ b/content/en/real_user_monitoring/session_replay/mobile/setup_and_configuration.mdoc.md @@ -0,0 +1,29 @@ +--- +title: Mobile Session Replay Setup and Configuration +description: Setting up and configuring Mobile Session Replay. +content_filters: + - trait_id: platform + option_group_id: rum_session_replay_sdk_options + label: "SDK" +further_reading: + - link: '/real_user_monitoring/session_replay/mobile' + tag: Documentation + text: Mobile Session Replay + - link: '/real_user_monitoring/session_replay/mobile/app_performance' + tag: Documentation + text: How Mobile Session Replay Impacts App Performance + - link: '/real_user_monitoring/session_replay/mobile/privacy_options' + tag: Documentation + text: Mobile Session Replay Privacy Options + - link: '/real_user_monitoring/session_replay/mobile/troubleshooting' + tag: Documentation + text: Troubleshoot Mobile Session Replay + - link: '/real_user_monitoring/session_replay' + tag: Documentation + text: Session Replay + - link: '/real_user_monitoring/mobile_and_tv_monitoring/android/web_view_tracking' + tag: Documentation + text: Web View Tracking +--- + +{% partial file="rum/session_replay/setup_and_configuration.mdoc.md" /%} \ No newline at end of file diff --git a/customization_config/en/option_groups/real_user_monitoring/sdk.yaml b/customization_config/en/option_groups/real_user_monitoring.yaml similarity index 58% rename from customization_config/en/option_groups/real_user_monitoring/sdk.yaml rename to customization_config/en/option_groups/real_user_monitoring.yaml index 7f2759d6fadb7..160355427055f 100644 --- a/customization_config/en/option_groups/real_user_monitoring/sdk.yaml +++ b/customization_config/en/option_groups/real_user_monitoring.yaml @@ -4,6 +4,13 @@ rum_sdk_platform_options: - id: ios - id: react_native +rum_session_replay_sdk_options: + - id: android + default: true + - id: ios + - id: kotlin_multiplatform + - id: react_native + rum_mobile_proxy_protocol_options: - id: http_https default: true diff --git a/customization_config/en/options/options.yaml b/customization_config/en/options/options.yaml index 40007fa83f874..1805692bc3ad9 100644 --- a/customization_config/en/options/options.yaml +++ b/customization_config/en/options/options.yaml @@ -222,6 +222,9 @@ options: - label: Kotlin id: kotlin +- label: Kotlin Multiplatform + id: kotlin_multiplatform + - label: Kubernetes id: kubernetes diff --git a/layouts/shortcodes/rum/session_replay/setup_and_configuration.mdoc.md b/layouts/shortcodes/rum/session_replay/setup_and_configuration.mdoc.md new file mode 100644 index 0000000000000..2081495dca18d --- /dev/null +++ b/layouts/shortcodes/rum/session_replay/setup_and_configuration.mdoc.md @@ -0,0 +1,451 @@ + +## Setup + + +{% if equals($platform, "android") %} +All Session Replay SDK versions can be found in the [Maven Central Repository][4]. + +To set up Mobile Session Replay for Android: + +1. Make sure you've [set up and initialized the Datadog Android RUM SDK][5] with views instrumentation enabled. + +2. Declare the Datadog Session Replay as a dependency: + ```kotlin {% filename="build.gradle.kts" %} + implementation("com.datadoghq:dd-sdk-android-rum:[datadog_version]") + implementation("com.datadoghq:dd-sdk-android-session-replay:[datadog_version]") + // in case you need Material support + implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]") + // in case you need Jetpack Compose support + implementation("com.datadoghq:dd-sdk-android-session-replay-compose:[datadog_version]") + ``` + +3. Enable Session Replay in your app: + ```kotlin {% filename="Application.kt" %} + val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) + // in case you need Material extension support + .addExtensionSupport(MaterialExtensionSupport()) + // in case you need Jetpack Compose support + .addExtensionSupport(ComposeExtensionSupport()) + .build() + + SessionReplay.enable(sessionReplayConfig) + ``` +{% /if %} + + + +{% if equals($platform, "ios") %} +To set up Mobile Session Replay for iOS: + +1. Make sure you've [set up and initialized the Datadog iOS RUM SDK][6] with views instrumentation enabled. + +2. Link the Datadog Session Replay library to your project based on your package manager: + + | Package manager | Installation step | + |----------------------------|---------------------------------------------------------------------------------------------| + | [CocoaPods][7] | Add `pod 'DatadogSessionReplay'` to your `Podfile`. | + | [Swift Package Manager][8] | Add `DatadogSessionReplay` library as a dependency to your app target. | + | [Carthage][9] | Add `DatadogSessionReplay.xcframework` as a dependency to your app target. | + +3. Enable Session Replay in your app: + + ```swift {% filename="AppDelegate.swift" %} + import DatadogSessionReplay + + SessionReplay.enable( + with: SessionReplay.Configuration( + replaySampleRate: sampleRate, + // Enable the experimental SwiftUI recording + featureFlags: [.swiftui: true] + ) + ) + ``` +{% /if %} + + + +{% if equals($platform, "kotlin_multiplatform") %} +All Session Replay SDK versions can be found in the [Maven Central Repository][10]. + +To set up Mobile Session Replay for Kotlin Multiplatform: + +1. Make sure you've [setup and initialized the Datadog Kotlin Multiplatform RUM SDK][11] with views instrumentation enabled. + +2. Add the `DatadogSessionReplay` iOS library as a link-only dependency. For instructions, see the [guide][12]. + +2. Declare Datadog Session Replay as a dependency: + ```kotlin {% filename="build.gradle.kts" %} + kotlin { + sourceSets { + commonMain.dependencies { + implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-rum:[datadog_version]") + implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-session-replay:[datadog_version]") + } + + // in case you need Material support on Android + androidMain.dependencies { + implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]") + } + } + } + ``` + +3. Enable Session Replay in your app: + + ```kotlin {% filename="Application.kt" %} + // in common source set + val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate]) + .build() + SessionReplay.enable(sessionReplayConfig) + ``` + +4. In case you need Material support on Android, call the `SessionReplayConfiguration.Builder.addExtensionSupport(MaterialExtensionSupport())` method, available in the Android source set. +{% /if %} + + + +{% if equals($platform, "react_native") %} + +{% alert level="warning" %} +To enable Session Replay, you must use at least version `2.0.4` of the Datadog [React Native SDK][18], and ensure that the Session Replay SDK version matches the React Native SDK version you are using. +{% /alert %} + +All Session Replay SDK versions can be found in the [npmjs repository][13]. + +To set up Mobile Session Replay for React Native: + +1. Make sure you've [set up and initialized the Datadog React Native SDK][14] with views instrumentation enabled. + +2. Add the `@datadog/mobile-react-native-session-replay` dependency, and make sure it matches the `@datadog/mobile-react-native` version, either through [yarn][15] or [npm][16]. + + ```shell + yarn add @datadog/mobile-react-native-session-replay + ``` + + ```shell + npm install @datadog/mobile-react-native-session-replay + ``` + +2. After the Datadog React Native SDK and Session Replay SDK dependencies are imported, you can enable the feature when configuring the SDK: + + - If you use the `DatadogProvider` component: + + ```typescript {% filename="App.tsx" %} + import { DatadogProvider, DatadogProviderConfiguration } from "@datadog/mobile-react-native"; + import { + ImagePrivacyLevel, + SessionReplay, + TextAndInputPrivacyLevel, + TouchPrivacyLevel, + } from "@datadog/mobile-react-native-session-replay"; + + const configuration = new DatadogProviderConfiguration(/* ... */) + + // Add this function as onInitialization prop to DatadogProvider + const onSDKInitialized = async () => { + await SessionReplay.enable({ + replaySampleRate: 100, + textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS, + imagePrivacyLevel: ImagePrivacyLevel.MASK_NONE, + touchPrivacyLevel: TouchPrivacyLevel.SHOW, + }); + }; + + const App = () => { + const navigationRef = React.useRef(null); + return ( + + {/* App */} + + ); + }; + + export default App; + ``` + + - If you use the `DdSdkReactNative.initialize` method: + + ```typescript {% filename="App.tsx" %} + import { DdSdkReactNative, DdSdkReactNativeConfiguration } from "@datadog/mobile-react-native"; + import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; + + const configuration = new DdSdkReactNativeConfiguration(/* ... */) + + DdSdkReactNative.initialize(configuration) + .then(() => SessionReplay.enable()) + .catch((error) => { /* handle error */ }); + ``` + +3. Enable Session Replay in your app, after initializing the Datadog SDK: + ```typescript {% filename="App.tsx" %} + import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; + + SessionReplay.enable(); + ``` + +4. Define the configuration for Session Replay: + + ```typescript {% filename="App.tsx" %} + SessionReplay.enable({ + replaySampleRate: 100, // Session Replay will be available for all sessions already captured by the SDK + }); + ``` + + During this step, you can also configure multiple [privacy levels][17] that apply to Session Replays. + +5. (iOS only) Update your iOS pods. + ```shell + cd ios && pod install + ``` +6. Rebuild your iOS and Android apps. +{% /if %} + + +## Web view instrumentation + +You can record the entire user journey across both [web and native views][1] on iOS or Android and watch it in a single Session Replay. + +The Session Replay is recorded through the Browser SDK, then the Mobile SDK handles the batching and uploading of the webview recording. + + +{% if equals($platform, "android") %} +To instrument your consolidated web and native Session Replay views for Android: + +1. Ensure you are using version [`2.8.0`][19] or higher of the Android SDK. +2. Enable [webview tracking][20] for your mobile application. +3. Enable [Session Replay][21] for your web application. +4. Enable Session Replay for your mobile application (see setup instructions above). +{% /if %} + + + +{% if equals($platform, "ios") %} +To instrument your consolidated web and native Session Replay views for iOS: + +1. Ensure you are using version [`2.13.0`][22] or higher of the iOS SDK. +2. Enable [webview tracking][23] for your mobile application. +3. Enable [Session Replay][21] for your web application. +4. Enable Session Replay for your mobile application (see setup instructions above). +{% /if %} + + + +{% if equals($platform, "kotlin_multiplatform") %} +To instrument your consolidated web and native Session Replay views for Kotlin Multiplatform: + +1. Enable [webview tracking][24] for your mobile application. +2. Enable [Session Replay][21] for your web application. +3. Enable Session Replay for your mobile application (see setup instructions above). +{% /if %} + + + +{% if equals($platform, "react_native") %} +To instrument your consolidated web and native Session Replay views for React Native: + +1. Enable [webview tracking][25] for your React Native application. +2. Enable [Session Replay][26] for your web application. +3. Enable Session Replay for your mobile application (see setup instructions above). + +**Note**: This feature is not compatible with React Native's [New Architecture][27] for Android. +{% /if %} + + +## Additional configuration +### Set the sample rate for recorded sessions to appear + +The sample rate is an optional parameter in the Session Replay configuration. It must be a number between 0.0 and 100.0, where 0 indicates that no replays are recorded and 100 means that all RUM sessions include a replay. If the sample rate is not specified in the configuration, the default value of 100 is applied. + +This sample rate is applied in addition to the RUM sample rate. For example, if RUM uses a sample rate of 80% and Session Replay uses a sample rate of 20%, it means that out of all user sessions, 80% are included in RUM, and within those sessions, only 20% have replays. + + +{% if equals($platform, "android") %} +```kotlin {% filename="Application.kt" %} +val sessionReplayConfig = SessionReplayConfiguration.Builder() + ... + .build() +``` +{% /if %} + + + +{% if equals($platform, "ios") %} +```swift {% filename="AppDelegate.swift" %} +var sessionReplayConfig = SessionReplay.Configuration( + replaySampleRate: +) +``` +{% /if %} + + + +{% if equals($platform, "kotlin_multiplatform") %} +```kotlin {% filename="Application.kt" %} +val sessionReplayConfig = SessionReplayConfiguration.Builder() + ... + .build() +``` +{% /if %} + + + +{% if equals($platform, "react_native") %} +```typescript {% filename="App.tsx" %} +import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; + +SessionReplay.enable({ + replaySampleRate: +}); +``` +{% /if %} + + +### Start or stop the recording manually + +By default, Session Replay starts recording automatically. However, if you prefer to manually start recording at a specific point in your application, you can use the optional `startRecordingImmediately` parameter as shown below, and later call `SessionReplay.startRecording()`. You can also use `SessionReplay.stopRecording()` to stop the recording anytime. + + +{% if equals($platform, "android") %} +```kotlin {% filename="Application.kt" %} +val sessionReplayConfig = SessionReplayConfiguration.Builder() + .startRecordingImmediately(false) + .build() +// Do something +SessionReplay.startRecording() +SessionReplay.stopRecording() +``` +{% /if %} + + + +{% if equals($platform, "ios") %} +```swift {% filename="AppDelegate.swift" %} +let sessionReplayConfig = SessionReplay.Configuration( + replaySampleRate: , + startRecordingImmediately: false + ) + +// Do something +SessionReplay.startRecording() +SessionReplay.stopRecording() +``` +{% /if %} + + + +{% if equals($platform, "kotlin_multiplatform") %} +```kotlin {% filename="Application.kt" %} +val sessionReplayConfig = SessionReplayConfiguration.Builder() + .startRecordingImmediately(false) + .build() + +// Do something +SessionReplay.startRecording() +SessionReplay.stopRecording() +``` +{% /if %} + + + +{% if equals($platform, "react_native") %} +```typescript {% filename="App.tsx" %} +import { SessionReplay } from "@datadog/mobile-react-native-session-replay"; + +SessionReplay.enable({ + replaySampleRate: sampleRate, + startRecordingImmediately: false +}); +// Do something +SessionReplay.startRecording(); +SessionReplay.stopRecording(); +``` +{% /if %} + + +### Validate whether Session Replay data is being sent + +To validate whether Session Replay data is being sent from the app, you can enable debug option in Datadog SDK: + + +{% if equals($platform, "android") %} +```kotlin {% filename="Application.kt" %} +Datadog.setVerbosity(Log.DEBUG) +``` +{% /if %} + + + +{% if equals($platform, "ios") %} +```swift {% filename="AppDelegate.swift" %} +Datadog.verbosityLevel = .debug +``` + +If everything is fine, following logs should appear in the Xcode debug console in about 30 seconds after launching the app: + +```bash {% filename="Xcode console" %} +[DATADOG SDK] 🐶 → 10:21:29.812 ⏳ (session-replay) Uploading batch... +[DATADOG SDK] 🐶 → 10:21:30.442 → (session-replay) accepted, won't be retransmitted: [response code: 202 (accepted), request ID: BD445EA-...-8AFCD3F3D16] +``` +{% /if %} + + + +{% if equals($platform, "kotlin_multiplatform") %} +```kotlin {% filename="Application.kt" %} +Datadog.setVerbosity(SdkLogVerbosity.DEBUG) +``` +{% /if %} + + + +{% if equals($platform, "react_native") %} +Set the verbosity to `DEBUG` when you initialize the SDK: + +```typescript {% filename="App.tsx" %} +import { SdkVerbosity } from "@datadog/mobile-react-native"; + +... + +config.verbosity = SdkVerbosity.DEBUG; +``` +{% /if %} + + +### Privacy options + +See [Privacy Options][2]. + +[1]: /real_user_monitoring/mobile_and_tv_monitoring/ios/web_view_tracking +[2]: /real_user_monitoring/session_replay/mobile/privacy_options +[3]: https://reactnative.dev/architecture/landing-page +[4]: https://central.sonatype.com/artifact/com.datadoghq/dd-sdk-kotlin-multiplatform-session-replay/versions +[5]: /real_user_monitoring/android/?tab=kotlin +[6]: /real_user_monitoring/ios/?tab=swift +[7]: https://cocoapods.org/ +[8]: https://www.swift.org/package-manager/ +[9]: https://github.com/Carthage/Carthage +[10]: https://central.sonatype.com/artifact/com.datadoghq/dd-sdk-android-session-replay/versions +[11]: /real_user_monitoring/kotlin_multiplatform/ +[12]: /real_user_monitoring/kotlin_multiplatform/#add-native-dependencies-for-ios +[13]: https://www.npmjs.com/package/@datadog/mobile-react-native-session-replay?activeTab=versions +[14]: /real_user_monitoring/mobile_and_tv_monitoring/setup/reactnative/ +[15]: https://yarnpkg.com/package?q=datadog%20react%20native%20ses&name=%40datadog%2Fmobile-react-native-session-replay +[16]: https://www.npmjs.com/package/@datadog/mobile-react-native-session-replay?activeTab=versions +[17]: /real_user_monitoring/session_replay/mobile/privacy_options/?tab=reactnative +[18]: https://github.com/DataDog/dd-sdk-reactnative +[19]: https://github.com/DataDog/dd-sdk-android/releases/tag/2.8.0 +[20]: /real_user_monitoring/mobile_and_tv_monitoring/android/web_view_tracking/?tab=android#instrument-your-web-views +[21]: /real_user_monitoring/session_replay/browser/#setup +[22]: https://github.com/DataDog/dd-sdk-ios/releases/tag/2.13.0 +[23]: /real_user_monitoring/mobile_and_tv_monitoring/ios/web_view_tracking/?tab=ios#instrument-your-web-views +[24]: /real_user_monitoring/mobile_and_tv_monitoring/kotlin_multiplatform/web_view_tracking/?tab=kotlinmultiplatform#instrument-your-web-views +[25]: /real_user_monitoring/mobile_and_tv_monitoring/web_view_tracking/?tab=reactnative#instrument-your-web-views +[26]: /real_user_monitoring/session_replay/browser/#setup +[27]: https://reactnative.dev/architecture/landing-page \ No newline at end of file diff --git a/package.json b/package.json index 763d5396d3be1..012a098e3dee0 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@popperjs/core": "^2.11.8", "alpinejs": "^3.13.7", "bootstrap": "^5.2", - "cdocs-hugo-integration": "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.5.tgz", + "cdocs-hugo-integration": "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.6.tgz", "del": "4.1.1", "fancy-log": "^1.3.3", "geo-locate": "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/geo-locate-v1.0.1.tgz", diff --git a/yarn.lock b/yarn.lock index 898a8b3d7a3e1..8224a6d5bd21e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6536,9 +6536,9 @@ __metadata: languageName: node linkType: hard -"cdocs-hugo-integration@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.5.tgz": - version: 1.1.5 - resolution: "cdocs-hugo-integration@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.5.tgz" +"cdocs-hugo-integration@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.6.tgz": + version: 1.1.6 + resolution: "cdocs-hugo-integration@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.6.tgz" dependencies: "@prettier/sync": ^0.5.2 "@types/markdown-it": ^14.1.2 @@ -6562,7 +6562,7 @@ __metadata: vite: ^5.4.10 vite-plugin-singlefile: ^2.0.2 zod: ^3.22.4 - checksum: 371991f1c07385f3b781317f590e05c6dd8f323f5575a7b8e6d9e70627a357d76574bfaead52cfcbea8b5fe3c18cb1830ebf2d77ac285685a449e401859b7df0 + checksum: 9a2ae0bf70038b97f11c29ced2f9a13751792b4f247eea6ef59dcd20ae811a35174cf4ceb9d773736935a0a4a9a22d4c8355651873ff4126ebfd89ae2fabd5d9 languageName: node linkType: hard @@ -7595,7 +7595,7 @@ __metadata: acorn: ^7.4.1 alpinejs: ^3.13.7 bootstrap: ^5.2 - cdocs-hugo-integration: "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.5.tgz" + cdocs-hugo-integration: "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/cdocs-hugo-integration-v1.1.6.tgz" cross-env: ^5.2.1 del: 4.1.1 eslint: ^6.8.0