diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 2ba12358bc0..2bb8dfcfeab 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -9983,76 +9983,46 @@ menu: identifier: session_replay parent: digital_experience_heading weight: 50000 - - name: Browser - url: /session_replay/browser + - name: Setup + url: /session_replay/setup_and_configuration parent: session_replay - identifier: session_replay_browser + identifier: session_replay_setup weight: 1 - - name: Setup - url: /session_replay/browser/setup_and_configuration - parent: session_replay_browser - identifier: session_replay_browser_setup - weight: 101 - name: Privacy Options - url: /session_replay/browser/privacy_options - parent: session_replay_browser - identifier: session_replay_browser_privacy_options - weight: 102 - - name: Developer Tools - url: /session_replay/browser/dev_tools - parent: session_replay_browser - identifier: session_replay_browser_developer_tools - weight: 103 - - name: Troubleshooting - url: /session_replay/browser/troubleshooting - parent: session_replay_browser - identifier: session_replay_browser_troubleshooting - weight: 104 - - name: Mobile - url: /session_replay/mobile + url: /session_replay/privacy_options parent: session_replay - identifier: session_replay_mobile + identifier: session_replay_privacy_options weight: 2 - - name: Setup and Configuration - url: /session_replay/mobile/setup_and_configuration - parent: session_replay_mobile - identifier: session_replay_mobile_setup_and_configuration - weight: 101 - - name: Privacy Options - url: /session_replay/mobile/privacy_options - parent: session_replay_mobile - identifier: session_replay_mobile_privacy_options - weight: 102 - name: Developer Tools - url: /session_replay/mobile/dev_tools - parent: session_replay_mobile - identifier: session_replay_mobile_developer_tools - weight: 103 - - name: Impact on App Performance - url: /session_replay/mobile/app_performance - parent: session_replay_mobile - identifier: session_replay_mobile_app_performance - weight: 104 - - name: Troubleshooting - url: /session_replay/mobile/troubleshooting - parent: session_replay_mobile - identifier: session_replay_mobile_troubleshooting - weight: 105 + url: /session_replay/dev_tools + parent: session_replay + identifier: session_replay_developer_tools + weight: 3 - name: Playlists url: /session_replay/playlists parent: session_replay identifier: session_replay_playlists - weight: 3 + weight: 4 - name: Heatmaps url: /session_replay/heatmaps parent: session_replay identifier: session_replay_heatmaps - weight: 4 + weight: 5 + - name: Impact on App Performance + url: /session_replay/app_performance + parent: session_replay + identifier: session_replay_app_performance + weight: 6 + - name: Troubleshooting + url: /session_replay/troubleshooting + parent: session_replay + identifier: session_replay_troubleshooting + weight: 7 - name: Guides url: /session_replay/guide parent: session_replay identifier: session_replay_guide - weight: 5 + weight: 8 - name: Account Management url: account_management/ pre: cog-2 diff --git a/content/.gitignore b/content/.gitignore index f10b1ea255a..47fa9a76372 100644 --- a/content/.gitignore +++ b/content/.gitignore @@ -114,3 +114,6 @@ /*/real_user_monitoring/application_monitoring/cpp/setup.md /*/real_user_monitoring/application_monitoring/cpp/troubleshooting.md /*/observability_pipelines/configuration/install_the_worker/_index.md +/*/session_replay/privacy_options.md +/*/session_replay/setup_and_configuration.md +/*/session_replay/troubleshooting.md diff --git a/content/en/data_security/_index.md b/content/en/data_security/_index.md index 653596a39d1..502e1d798be 100644 --- a/content/en/data_security/_index.md +++ b/content/en/data_security/_index.md @@ -16,7 +16,7 @@ further_reading: - link: "/data_security/real_user_monitoring/" tag: "Documentation" text: "RUM Data Security" -- link: "/session_replay/browser/privacy_options" +- link: "/session_replay/privacy_options?platform=browser" tag: "Documentation" text: "Session Replay Privacy Options" - link: "/security/sensitive_data_scanner/" @@ -162,7 +162,7 @@ Continuous Integration pipelines and tests [19]: /serverless/distributed_tracing/collect_lambda_payloads#obfuscating-payload-contents [20]: /data_security/synthetics/ [21]: /real_user_monitoring/application_monitoring/browser/advanced_configuration/ -[22]: /session_replay/browser/privacy_options +[22]: /session_replay/privacy_options?platform=browser [23]: /database_monitoring/data_collected/#sensitive-information [24]: /getting_started/tagging/ [25]: /tracing/glossary/ diff --git a/content/en/data_security/real_user_monitoring.md b/content/en/data_security/real_user_monitoring.md index effcd1bec1d..476c063399d 100644 --- a/content/en/data_security/real_user_monitoring.md +++ b/content/en/data_security/real_user_monitoring.md @@ -9,7 +9,7 @@ further_reading: - link: "/data_security/synthetics/" tag: "Documentation" text: "Synthetic Monitoring Data Security" -- link: "/session_replay/browser/privacy_options/" +- link: "/session_replay/privacy_options?platform=browser" tag: "Documentation" text: "Session Replay Privacy Options" - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" @@ -153,8 +153,8 @@ See [privacy options specific to Session Replay][19]. [13]: /real_user_monitoring/application_monitoring/browser/advanced_configuration/?tab=npm#user-session [14]: /help/ [15]: /account_management/rbac/permissions/#real-user-monitoring -[16]: /session_replay/browser/privacy_options/#override-an-html-element +[16]: /session_replay/privacy_options?platform=browser#override-an-html-element [17]: /security/sensitive_data_scanner/ [18]: https://app.datadoghq.com/organization-settings/sensitive-data-scanner/configuration -[19]: /session_replay/browser/privacy_options +[19]: /session_replay/privacy_options?platform=browser [20]: https://www.datadoghq.com/private-beta/product-analytics/ diff --git a/content/en/error_tracking/frontend/browser.md b/content/en/error_tracking/frontend/browser.md index 84170f781df..f6cb756cffe 100644 --- a/content/en/error_tracking/frontend/browser.md +++ b/content/en/error_tracking/frontend/browser.md @@ -219,7 +219,7 @@ You can monitor unhandled exceptions, unhandled promise rejections, handled exce [7]: /real_user_monitoring/application_monitoring/browser/data_collected/ [8]: /real_user_monitoring/platform/dashboards/errors/ [9]: https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.RumInitConfiguration.html -[10]: /session_replay/browser/privacy_options#mask-action-names +[10]: /session_replay/privacy_options?platform=browser#mask-action-names [11]: https://github.com/DataDog/datadog-ci/tree/master/packages/datadog-ci/src/commands/sourcemaps#sourcemaps-command [12]: https://github.com [13]: https://about.gitlab.com diff --git a/content/en/error_tracking/frontend/replay_errors.md b/content/en/error_tracking/frontend/replay_errors.md index 2f9c22b04ef..1e1d9ce3ede 100644 --- a/content/en/error_tracking/frontend/replay_errors.md +++ b/content/en/error_tracking/frontend/replay_errors.md @@ -50,22 +50,22 @@ Error Tracking Replay Snippets allows you to view a pixel-perfect recreation of {{% tab "iOS" %}} Follow [these steps][4] to setup and configure your mobile application's error replay for this platform. - [4]: /session_replay/mobile/setup_and_configuration/?tab=ios + [4]: /session_replay/setup_and_configuration/?platform=ios {{% /tab %}} {{% tab "Android" %}} Follow [these steps][5] to setup and configure your mobile application's error replay for this platform. - [5]: /session_replay/mobile/setup_and_configuration/?tab=android + [5]: /session_replay/setup_and_configuration/?platform=android {{% /tab %}} {{% tab "Kotlin Multiplatform" %}} Follow [these steps][6] to setup and configure your mobile application's error replay for this platform. - [6]: /session_replay/mobile/setup_and_configuration/?tab=kotlinmultiplatform + [6]: /session_replay/setup_and_configuration/?platform=kotlin_multiplatform {{% /tab %}} {{% tab "React Native" %}} Follow [these steps][7] to setup and configure your mobile application's error replay for this platform. - [7]: /session_replay/mobile/setup_and_configuration/?tab=reactnative + [7]: /session_replay/setup_and_configuration/?platform=react_native {{% /tab %}} {{}} diff --git a/content/en/getting_started/session_replay/_index.md b/content/en/getting_started/session_replay/_index.md index 6cbccb90496..31c2a53a875 100644 --- a/content/en/getting_started/session_replay/_index.md +++ b/content/en/getting_started/session_replay/_index.md @@ -137,7 +137,7 @@ You can share the replay with your team by selecting the {{< ui >}}Share{{< /ui [5]: /real_user_monitoring/explorer/search/#facets [6]: /real_user_monitoring/explorer/saved_views/ [7]: /real_user_monitoring/application_monitoring/browser/setup/ -[8]: /session_replay/browser/dev_tools +[8]: /session_replay/dev_tools [9]: /real_user_monitoring/connect_rum_and_traces [10]: /real_user_monitoring/error_tracking/ [11]: /synthetics/guide/rum-to-synthetics/ diff --git a/content/en/real_user_monitoring/_index.md b/content/en/real_user_monitoring/_index.md index faefc7468b0..a1974eb861c 100644 --- a/content/en/real_user_monitoring/_index.md +++ b/content/en/real_user_monitoring/_index.md @@ -294,8 +294,8 @@ You must have edit access to restore general access to a restricted application. [10]: /real_user_monitoring/application_monitoring/ios/web_view_tracking/ [11]: /real_user_monitoring/application_monitoring/android/web_view_tracking/ [12]: /session_replay/browser/ -[13]: /session_replay/browser/privacy_options/ -[14]: /session_replay/browser/dev_tools/ +[13]: /session_replay/privacy_options?platform=browser +[14]: /session_replay/dev_tools [15]: /real_user_monitoring/application_monitoring/browser/setup/ [16]: /real_user_monitoring/application_monitoring/ [17]: https://app.datadoghq.com/rum/optimization/inspect diff --git a/content/en/real_user_monitoring/application_monitoring/web_view_tracking/_index.md b/content/en/real_user_monitoring/application_monitoring/web_view_tracking/_index.md index 5d01dc3035e..41c8f7f8763 100644 --- a/content/en/real_user_monitoring/application_monitoring/web_view_tracking/_index.md +++ b/content/en/real_user_monitoring/application_monitoring/web_view_tracking/_index.md @@ -28,7 +28,7 @@ further_reading: - link: /real_user_monitoring tag: Documentation text: Explore Datadog RUM - - link: /session_replay/mobile/setup_and_configuration#web-view-instrumentation + - link: /session_replay/setup_and_configuration#web-view-instrumentation tag: Documentation text: Web View Instrumentation --- @@ -379,7 +379,7 @@ See [RUM & Session Replay Billing][6] for details on how web views in mobile app {{< partial name="whats-next/whats-next.html" >}} -[1]: /session_replay/mobile/setup_and_configuration/#web-view-instrumentation +[1]: /session_replay/setup_and_configuration/#web-view-instrumentation [2]: /real_user_monitoring/application_monitoring/browser/setup/#npm [3]: /real_user_monitoring/application_monitoring/ios/setup [4]: /logs/log_collection/ios diff --git a/content/en/real_user_monitoring/guide/browser-sdk-upgrade.md b/content/en/real_user_monitoring/guide/browser-sdk-upgrade.md index 383f20f6952..8d00fef62cb 100644 --- a/content/en/real_user_monitoring/guide/browser-sdk-upgrade.md +++ b/content/en/real_user_monitoring/guide/browser-sdk-upgrade.md @@ -567,7 +567,7 @@ The RUM Browser SDK no longer lets you specify the source of an error collected [17]: /api/latest/rum/ [18]: /integrations/content_security_policy_logs/?tab=firefox#use-csp-with-real-user-monitoring-and-session-replay [19]: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted -[20]: /session_replay/browser/privacy_options/#configuration +[20]: /session_replay/privacy_options?platform=browser#configuration [21]: /real_user_monitoring/guide/sampling-browser-plans/#setup [22]: /session_replay/browser/#usage [23]: /real_user_monitoring/application_monitoring/browser/advanced_configuration/?tab=npm#enrich-and-control-rum-data diff --git a/content/en/real_user_monitoring/guide/mobile-sdk-upgrade.md b/content/en/real_user_monitoring/guide/mobile-sdk-upgrade.md index 634e7608355..686c3c8076a 100644 --- a/content/en/real_user_monitoring/guide/mobile-sdk-upgrade.md +++ b/content/en/real_user_monitoring/guide/mobile-sdk-upgrade.md @@ -459,7 +459,7 @@ Legacy delegate types have been replaced by a unified instrumentation API: |`DDURLSessionDelegate()`|`URLSessionInstrumentation.enable(with:)`| |`DDNSURLSessionDelegate()`|`URLSessionInstrumentation.enable(with:)`| -[1]: /session_replay/mobile/privacy_options?platform=ios +[1]: /session_replay/privacy_options?platform=ios {{% /tab %}} @@ -1077,7 +1077,7 @@ To improve granularity for the Datadog SDKs used, the `dd-sdk-android-ktx` modul For instructions on setting up Mobile Session Replay, see [Mobile Session Replay Setup and Configuration][6]. -[6]: /session_replay/mobile/setup_and_configuration/?tab=android +[6]: /session_replay/setup_and_configuration/?platform=android {{% /tab %}} {{% tab "iOS" %}} @@ -1272,7 +1272,7 @@ WebViewTracking.enable(webView: webView) For instructions on setting up Mobile Session Replay, see [Mobile Session Replay Setup and Configuration][7]. -[7]: /session_replay/mobile/setup_and_configuration/?tab=ios +[7]: /session_replay/setup_and_configuration/?platform=ios {{% /tab %}} {{% tab "React Native" %}} diff --git a/content/en/real_user_monitoring/guide/session-replay-for-solutions.md b/content/en/real_user_monitoring/guide/session-replay-for-solutions.md index cb23af39400..0e1d35f079c 100644 --- a/content/en/real_user_monitoring/guide/session-replay-for-solutions.md +++ b/content/en/real_user_monitoring/guide/session-replay-for-solutions.md @@ -9,7 +9,7 @@ further_reading: - link: '/session_replay/browser/' tag: 'Documentation' text: 'Learn about Session Replay' -- link: '/session_replay/browser/dev_tools' +- link: '/session_replay/dev_tools' tag: 'Documentation' text: 'Learn about Browser Dev Tools' --- @@ -71,6 +71,6 @@ The Frontend team may also be encouraged to implement an error message in the UI {{< partial name="whats-next/whats-next.html" >}} [1]: /session_replay/browser/ -[2]: /session_replay/browser/dev_tools/ +[2]: /session_replay/dev_tools [3]: /real_user_monitoring/connect_rum_and_traces [4]: https://app.datadoghq.com/rum/explorer diff --git a/content/en/session_replay/_index.md b/content/en/session_replay/_index.md index 89c8852587f..32b65a7b1c3 100644 --- a/content/en/session_replay/_index.md +++ b/content/en/session_replay/_index.md @@ -117,7 +117,7 @@ You can create a playlist of Session Replays to organize them by any patterns yo Dev Tools is a built-in debugging panel in Session Replay that exposes key information during playback. Use it to identify issues, trace requests, and understand performance bottlenecks—all without reproducing the issue yourself. Dev Tools are available for [RUM][1] sessions. -Learn more about Dev Tools for [browser][11] and [mobile][12]. +Learn more about [Dev Tools][11]. ## Further reading @@ -133,5 +133,4 @@ Learn more about Dev Tools for [browser][11] and [mobile][12]. [8]: /notebooks/ [9]: /account_management/audit_trail/ [10]: /rum/replay/playlists/my-watch-history -[11]: /session_replay/browser/dev_tools/ -[12]: /session_replay/mobile/dev_tools/ \ No newline at end of file +[11]: /session_replay/dev_tools \ No newline at end of file diff --git a/content/en/session_replay/mobile/app_performance.md b/content/en/session_replay/app_performance.md similarity index 88% rename from content/en/session_replay/mobile/app_performance.md rename to content/en/session_replay/app_performance.md index 2fe9f3a0c86..9f13d9651a8 100644 --- a/content/en/session_replay/mobile/app_performance.md +++ b/content/en/session_replay/app_performance.md @@ -2,21 +2,19 @@ title: How Mobile Session Replay Impacts App Performance description: Performance benchmarking for Mobile Session Replay. aliases: + - /session_replay/mobile/app_performance - /real_user_monitoring/session_replay/mobile/app_performance - /product_analytics/session_replay/mobile/app_performance further_reading: - - link: '/session_replay/mobile' + - link: '/session_replay/privacy_options' tag: Documentation - text: Mobile Session Replay - - link: '/session_replay/mobile/privacy_options' + text: Session Replay Privacy Options + - link: '/session_replay/setup_and_configuration' tag: Documentation - text: Mobile Session Replay Privacy Options - - link: '/session_replay/mobile/setup_and_configuration' + text: Setup and Configure Session Replay + - link: '/session_replay/troubleshooting' tag: Documentation - text: Setup and Configure Mobile Session Replay - - link: '/session_replay/mobile/troubleshooting' - tag: Documentation - text: Troubleshoot Mobile Session Replay + text: Troubleshoot Session Replay - link: '/session_replay' tag: Documentation text: Session Replay diff --git a/content/en/session_replay/browser/_index.md b/content/en/session_replay/browser/_index.md index a1eaf742426..8aa4c30276b 100644 --- a/content/en/session_replay/browser/_index.md +++ b/content/en/session_replay/browser/_index.md @@ -69,8 +69,8 @@ Learn more about [Session Replay for Mobile][8]. [1]: https://github.com/DataDog/browser-sdk [2]: https://www.rrweb.io/ [3]: https://github.com/DataDog/browser-sdk/blob/main/packages/rum/BROWSER_SUPPORT.md -[4]: /session_replay/browser/setup_and_configuration -[5]: /session_replay/browser/privacy_options -[6]: /session_replay/#dev-tools -[7]: /session_replay/browser/troubleshooting +[4]: /session_replay/setup_and_configuration?platform=browser +[5]: /session_replay/privacy_options?platform=browser +[6]: /session_replay/dev_tools +[7]: /session_replay/troubleshooting?platform=browser [8]: /session_replay/mobile/ \ No newline at end of file diff --git a/content/en/session_replay/browser/privacy_options.md b/content/en/session_replay/browser/privacy_options.md deleted file mode 100644 index 1b0cfd2746e..00000000000 --- a/content/en/session_replay/browser/privacy_options.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Session Replay Browser Privacy Options -description: Describes privacy controls available in Session Replay and how to set privacy options -aliases: -- /real_user_monitoring/session_replay/privacy_options -- /real_user_monitoring/session_replay/browser/privacy_options -- /product_analytics/session_replay/browser/privacy_options -further_reading: - - link: '/session_replay/' - tag: Documentation - text: Session Replay - - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" - tag: "Blog" - text: "Obfuscate user data with Session Replay default privacy settings" ---- - -## Overview - -Session Replay provides privacy controls to ensure organizations of any scale do not expose sensitive or personal data. Data is stored on Datadog-managed cloud instances and encrypted at rest. - -Default privacy options for Session Replay are designed to protect end user privacy and prevent sensitive organizational information from being collected. - -By enabling Session Replay, you can automatically mask sensitive elements from being recorded through the RUM Browser SDK. When data is masked, that data is not collected in its original form by Datadog's SDKs and thus is not sent to the backend. - -## Configuration - -
defaultPrivacyLevel and mask-user-input are available in the SDK v3.6.0+.
- -To enable your privacy settings, set `defaultPrivacyLevel` to `mask`, `mask-user-input`, or `allow` in your JavaScript configuration. - -**Note:** If the privacy setting is not specified when enabling Session Replay, `mask` is enabled by default. - -```javascript -import { datadogRum } from '@datadog/browser-rum'; - -datadogRum.init({ - applicationId: '', - clientToken: '', - site: '', - // service: 'my-web-application', - // env: 'production', - // version: '1.0.0', - sessionSampleRate: 100, - sessionReplaySampleRate: 100, - trackResources: true, - trackLongTasks: true, - trackUserInteractions: true, - defaultPrivacyLevel: 'mask' | 'mask-user-input' | 'allow' -}); -``` - -After updating your configuration, you can override elements of your HTML documents with the below privacy options. - -### Mask mode - -Setting `defaultPrivacyLevel` to `mask` mode masks all HTML text, user input, images, links and [`data-*` attributes][1]. Text on your application is replaced with `X`, rendering the page into a wireframe. - -{{< img src="real_user_monitoring/session_replay/browser-privacy-mask-all.png" alt="Mask mode" style="width:100%;">}} - -**Note**: Masked data is not stored on Datadog servers. - -### Mask user input mode - -Masks most form fields such as inputs, text areas, and checkbox values while recording all other text as is. Inputs are replaced with three asterisks (`***`) and text areas are obfuscated with space-preserving `x` characters. - -{{< img src="real_user_monitoring/session_replay/browser-privacy-mask-input.png" alt="Mask user input mode" style="width:100%;">}} - -### Allow mode - -Records everything unmasked. - -{{< img src="real_user_monitoring/session_replay/browser-privacy-allow-all.png" alt="Allow mode" style="width:100%;">}} - -## Privacy options - -### Override an HTML element - -You can set an application-wide default and tag the privacy level of an individual HTML element using one of two methods: - -1. An HTML attribute such as `data-dd-privacy="allow" | "mask" | "hidden" | "mask-user-input"` or -2. An HTML class name such as `class="dd-privacy-allow" | "dd-privacy-mask-user-input" | "dd-privacy-mask" | "dd-privacy-hidden"`. - -The example below demonstrates how you can override certain elements in your HTML to customize your obfuscation: - -``` -
-
Order Value
-
- $50.00 -
-
-``` - -The dollar amount in the cart is replaced with asterisks. - -{{< img src="real_user_monitoring/session_replay/example-mask.png" alt="Example of mask mode obfuscating dollar amount" style="width:70%;">}} - -## Privacy restrictions - -In order to protect end-user privacy, regardless of your privacy configuration, the following HTML elements are **always masked**: -- Input elements of type `password`, `email`, and `tel` -- Elements with `autocomplete` attributes such as credit card numbers, expiration dates, and security codes - -## Advanced privacy options - -### Completely hide an element - - -`hidden` is an advanced privacy setting that completely hides specific elements instead of obscuring the text. - -If you are concerned about the number of visible elements in sensitive fields, enable `hidden` for your specific elements. These HTML elements are replaced with a gray block at the time of recording. - -In this example replay session, the username in the Datadog navigation is obfuscated. - -{{< img src="real_user_monitoring/session_replay/hidden.png" alt="Example of hidden mode obfuscating a username" style="width:60%;">}} - -### Override the action name - -To obscure the default action name and update the naming convention for individual actions, set the override for your individual action names. - -You can rename the default action name by overriding the name of a specific HTML element with a more general name. By default, Datadog displays the custom override name. - -For example, override the following name with `
→ Action: "Click on Address"`. - -Additional use cases to override the default action name include masking sensitive data in the RUM Explorer and streamlining your analytics and search with custom naming conventions. - -### Mask action names -By default, if you wish to mask all action names, you can use the `enablePrivacyForActionName` option in conjunction with the `mask` privacy setting. This operation automatically substitutes all non-overridden action names with the placeholder `Masked Element`. This setting is also designed to be compatible with existing [HTML override attributes](#override-an-html-element). - -
- -Datadog is working to add more privacy features to RUM & Session Replay. Have something in mind that you would like to see? Contact Datadog support. - -
- -## Further Reading - -{{< partial name="whats-next/whats-next.html" >}} - -[1]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes diff --git a/content/en/session_replay/browser/setup_and_configuration.md b/content/en/session_replay/browser/setup_and_configuration.md deleted file mode 100644 index 1a5009e3cea..00000000000 --- a/content/en/session_replay/browser/setup_and_configuration.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Browser Session Replay Setup and Configuration -description: Capture and visually replay your users' web browsing experience with Session Replay. -aliases: -- /real_user_monitoring/session_replay/browser/setup_and_configuration -- /product_analytics/session_replay/browser/setup_and_configuration -further_reading: -- link: 'https://www.datadoghq.com/blog/session-replay-datadog/' - tag: 'Blog' - text: 'Use Datadog Session Replay to view real-time user journeys' -- link: 'https://www.datadoghq.com/blog/reduce-customer-friction-funnel-analysis/' - tag: 'Blog' - text: 'Use funnel analysis to understand and optimize key user flows' -- link: 'https://www.datadoghq.com/blog/zendesk-session-replay-integration/' - tag: 'Blog' - text: 'Visually replay user-facing issues with Zendesk and Datadog Session Replay' -- link: '/product_analytics/analytics_explorer' - tag: 'Documentation' - text: 'Visualize your Product Analytics data in the Analytics Explorer' -- link: '/integrations/content_security_policy_logs' - tag: 'Documentation' - text: 'Detect and aggregate CSP violations with Datadog' ---- - - -## Setup - -To set up Session Replay for Browser: - -### Step 1 - Set up the Browser SDK - -Make sure you've set up the [RUM Browser SDK][1]. - -### Step 2 - Enable Session Replay - -To enable Session Replay you have to specify the session replay sample rate. It must be a number between 0.0 and 100.0, where 0 indicates that no replays are recorded and 100 means that all sessions include a replay. - -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. -See [Browser RUM & Session Replay sessions][2] for more information. - -{{< tabs >}} -{{% tab "NPM" %}} - -```javascript -import { datadogRum } from '@datadog/browser-rum'; - -datadogRum.init({ - ... - sessionReplaySampleRate: 100, - ... -}); - -``` - -{{% /tab %}} -{{% tab "CDN async" %}} - -```javascript - -``` - -{{% /tab %}} -{{% tab "CDN sync" %}} - -```javascript - -``` - -**Note**: Bellow version v5.0.0, Session Replay does not start automatically and you need to call [`startSessionReplayRecording()`][3] API - -{{% /tab %}} -{{< /tabs >}} - -## Additional configuration - -### 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 option `startSessionReplayRecordingManually` parameter as shown below, and later call [`startSessionReplayRecording()`][3]. -You can also use [`stopSessionReplayRecording()`][4] to stop the recording at any time. - -{{< tabs >}} -{{% tab "NPM" %}} - -```javascript -import { datadogRum } from '@datadog/browser-rum'; - -datadogRum.init({ - ... - startSessionReplayRecordingManually: true, - ... -}); - -datadogRum.startSessionReplayRecording() -// Do something -datadogRum.stopSessionReplayRecording() -``` - -{{% /tab %}} -{{% tab "CDN async" %}} - -```javascript - -``` - -{{% /tab %}} -{{% tab "CDN sync" %}} - -```javascript - -``` - -{{% /tab %}} -{{< /tabs >}} - -**Note**: In some scenarios, you may want to begin recording, even if it was initially sampled out of replay. To force Session Replay recording for the rest of the current session, call [`startSessionReplayRecording({ force: true })`][3] - -### Privacy options - -Session Replay provides privacy controls to ensure organizations of any scale do not expose sensitive or personal data. -See [Privacy Options][5]. - -### Connect Session Replay to your third-party tools - -You can access the Session Replay URL to use in integrations, live from the browser where the session is taking place. -See [Connect Session Replay to your third-party tools][6]. - -## Further reading - -{{< partial name="whats-next/whats-next.html" >}} - -[1]: /real_user_monitoring/browser/setup/ -[2]: /real_user_monitoring/guide/sampling-browser-plans/ -[3]: https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.DatadogRum.html#startsessionreplayrecording -[4]: https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.DatadogRum.html#stopsessionreplayrecording -[5]: /session_replay/browser/privacy_options -[6]: /real_user_monitoring/guide/connect-session-replay-to-your-third-party-tools diff --git a/content/en/session_replay/browser/troubleshooting.md b/content/en/session_replay/browser/troubleshooting.md deleted file mode 100644 index 142525781c4..00000000000 --- a/content/en/session_replay/browser/troubleshooting.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Session Replay Browser Troubleshooting -description: Learn how to troubleshoot issues with Session Replay. -aliases: -- /real_user_monitoring/session_replay/troubleshooting -- /real_user_monitoring/session_replay/browser/troubleshooting -- /product_analytics/session_replay/browser/troubleshooting -further_reading: -- link: 'https://github.com/DataDog/browser-sdk' - tag: "Source Code" - text: 'browser-sdk Source code' -- link: '/session_replay/' - tag: 'Documentation' - text: 'Learn about Session Replay' -- link: '/integrations/content_security_policy_logs' - tag: 'Documentation' - text: 'Detect and aggregate CSP violations with Datadog' ---- - -## Overview - -If you experience unexpected behavior with Datadog Session Replay, use this page to help resolve issues. If you continue to have trouble, contact [Datadog Support][1] for further assistance. Regularly update to the latest version of the [RUM Browser SDK][2], as each release contains improvements and fixes. - -## Session Replay Recorder - -### Some HTML elements are not visible at replay - -Session Replay does not support: - -- The following HTML elements: `iframe`, `video`, `audio`, or `canvas` - - To render iframes in Session Replay, you can separately instrument the iframe code. For iframes that span across subdomains, use `trackSessionAcrossSubdomains: true`. After correct instrumentation, iframes and their parent windows appear as separate pages within the same session. Embedding iframe replays directly into their parent windows is not supported. -- The [Web Animations API][7] - -Session Replay requires you to use an HTTPS connection. If you aren't using a secure connection, the resources time out and you can't see images and some page elements. - -### Fonts or images do not render properly - -A Session Replay is not a video, but an actual iframe rebuilt based on snapshots of the DOM. The replay thus depends on the various assets of the page: fonts and images. - -Assets may not be available at the time of replay for the following reasons: - -- The resource no longer exists. For example, it was part of a previous deployment. -- The resource is inaccessible. For example, authentication might be required, or the resource might only be accessible from an internal network. -- The resource is blocked by the browser due to CORS (typically web-fonts). - - The replay rendered on the `session-replay-datadoghq.com` sandbox domain and the asset requests are subject to cross-origin security checks by your browser. If the given asset is not authorized for the domain, your browser blocks the request. - - Allow `session-replay-datadoghq.com` through the [`Access-Control-Allow-Origin`][3] header for any font or image assets your website depends on to ensure these resources are accessible for the replay. For more information, see [Cross Origin Resource Sharing][4]. - -### CSS rules not properly applied/mouse hover not replayed - -Unlike fonts and images, the recorder tries to bundle the various CSS rules applied as part of the recording data, leveraging the [CSSStyleSheet][5] interface. If this is not possible, it falls back to recording the links to the CSS files. - -For proper mouse hover support, the CSS rules must be accessible through the CSSStyleSheet interface. - -If the stylesheets are hosted on a different domain than the web page, access to the CSS rules is subject to cross-origin security checks by the browser, and the browser must be instructed to load the stylesheet leveraging CORS using the [crossorigin][6] attribute. - -For example, if your application is on the `example.com` domain and depends on a CSS file on `assets.example.com` through a link element, the `crossorigin` attribute should be set to `anonymous`, unless credentials are required: - -```html - -``` - -Additionally, authorize the `example.com` domain in the `assets.example.com`. This allows the assets file to load the resource by setting the [`Access-Control-Allow-Origin`][3] header. - -## Further Reading - -{{< partial name="whats-next/whats-next.html" >}} - -[1]: /help -[2]: https://github.com/DataDog/browser-sdk/blob/main/CHANGELOG.md -[3]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin -[4]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS -[5]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet -[6]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin -[7]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API diff --git a/content/en/session_replay/browser/dev_tools.md b/content/en/session_replay/dev_tools.md similarity index 79% rename from content/en/session_replay/browser/dev_tools.md rename to content/en/session_replay/dev_tools.md index e313e9dd6be..e8b3d10cffa 100644 --- a/content/en/session_replay/browser/dev_tools.md +++ b/content/en/session_replay/dev_tools.md @@ -1,15 +1,19 @@ --- -title: Session Replay Browser Dev Tools -description: +title: Session Replay Dev Tools +description: Use Session Replay Dev Tools to debug and inspect session recordings. aliases: -- /real_user_monitoring/session_replay/dev_tools + - /session_replay/browser/dev_tools + - /session_replay/mobile/dev_tools + - /real_user_monitoring/session_replay/dev_tools + - /real_user_monitoring/session_replay/mobile/dev_tools + - /product_analytics/session_replay/mobile/dev_tools further_reading: - - link: '/session_replay/' - tag: Documentation - text: Session Replay - - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" - tag: "Blog" - text: "Obfuscate user data with Session Replay default privacy settings" + - link: '/session_replay/' + tag: Documentation + text: Session Replay + - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" + tag: "Blog" + text: "Obfuscate user data with Session Replay default privacy settings" --- ## Overview @@ -30,13 +34,13 @@ Select and apply filters such as {{< ui >}}Action Name{{< /ui >}} and {{< ui >}} ### Console -The {{< ui >}}Console{{< /ui >}} tab displays all [logs collected from the web browser][2] and errors for each view. +The {{< ui >}}Console{{< /ui >}} tab displays all [logs collected from the web browser][2] and errors for each view. Click {{< ui >}}Error{{< /ui >}}, {{< ui >}}Warn{{< /ui >}}, {{< ui >}}Info{{< /ui >}}, and {{< ui >}}Debug{{< /ui >}} to filter your logs based on severity. To search for these logs in the [Log Explorer][3], click {{< ui >}}View in Log Explorer{{< /ui >}}. {{< img src="real_user_monitoring/session_replay/dev_tools/dev-tools-console-1.png" alt="Console View in Log Explorer button" style="width:50%;">}} -The Log Explorer opens in a separate tab with a pre-filled search query. +The Log Explorer opens in a separate tab with a pre-filled search query. ### Errors @@ -57,4 +61,4 @@ The {{< ui >}}Attributes{{< /ui >}} tab displays all attributes related to the s [3]: /logs/explorer/ [4]: /real_user_monitoring/application_monitoring/browser/collecting_browser_errors/ [5]: /real_user_monitoring/error_tracking/ -[6]: /real_user_monitoring/application_monitoring/browser/data_collected/#default-attributes \ No newline at end of file +[6]: /real_user_monitoring/application_monitoring/browser/data_collected/#default-attributes diff --git a/content/en/session_replay/heatmaps.md b/content/en/session_replay/heatmaps.md index b0cea9fddc0..33c60f52d0b 100644 --- a/content/en/session_replay/heatmaps.md +++ b/content/en/session_replay/heatmaps.md @@ -220,5 +220,5 @@ User information is not collected by default. Heatmaps use the user information [2]: https://github.com/DataDog/browser-sdk/blob/main/packages/rum/package.json [3]: /real_user_monitoring/explorer/ [4]: /product_analytics/charts/analytics_explorer/ -[5]: /session_replay/browser/privacy_options/#privacy-options +[5]: /session_replay/privacy_options?platform=browser#privacy-options [6]: https://chromewebstore.google.com/detail/datadog-test-recorder/kkbncfpddhdmkfmalecgnphegacgejoa diff --git a/content/en/session_replay/mobile/_index.md b/content/en/session_replay/mobile/_index.md index 29df2836a3e..819f13b9280 100644 --- a/content/en/session_replay/mobile/_index.md +++ b/content/en/session_replay/mobile/_index.md @@ -107,8 +107,8 @@ Learn how to [troubleshoot Mobile Session Replay][6]. {{< partial name="whats-next/whats-next.html" >}} [1]: /session_replay/browser/#how-it-works -[2]: /session_replay/mobile/setup_and_configuration -[3]: /session_replay/mobile/privacy_options -[4]: /session_replay/mobile/app_performance -[5]: /session_replay/#dev-tools -[6]: /session_replay/mobile/troubleshooting \ No newline at end of file +[2]: /session_replay/setup_and_configuration?platform=android +[3]: /session_replay/privacy_options?platform=android +[4]: /session_replay/app_performance +[5]: /session_replay/dev_tools +[6]: /session_replay/troubleshooting?platform=mobile \ No newline at end of file diff --git a/content/en/session_replay/mobile/dev_tools.md b/content/en/session_replay/mobile/dev_tools.md deleted file mode 100644 index b44538f517a..00000000000 --- a/content/en/session_replay/mobile/dev_tools.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Session Replay Mobile Dev Tools -description: Use Session Replay Dev Tools to debug and inspect mobile session recordings. -aliases: - - /real_user_monitoring/session_replay/dev_tools - - /real_user_monitoring/session_replay/mobile/dev_tools - - /product_analytics/session_replay/mobile/dev_tools -further_reading: - - link: '/session_replay/' - tag: Documentation - text: Session Replay - - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" - tag: "Blog" - text: "Obfuscate user data with Session Replay default privacy settings" ---- - -{{< include-markdown "session_replay/browser/dev_tools" >}} \ No newline at end of file diff --git a/content/en/session_replay/mobile/privacy_options.mdoc.md b/content/en/session_replay/mobile/privacy_options.mdoc.md deleted file mode 100644 index 7d51c570498..00000000000 --- a/content/en/session_replay/mobile/privacy_options.mdoc.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mobile Session Replay Privacy Options -description: Configure privacy options for Mobile Session Replay. -aliases: - - /real_user_monitoring/session_replay/mobile/privacy_options - - /product_analytics/session_replay/mobile/privacy_options -content_filters: - - trait_id: platform - option_group_id: rum_sdk_platform_options_v2 - label: "SDK" -further_reading: - - link: '/session_replay/mobile' - tag: Documentation - text: Mobile Session Replay - - link: '/session_replay/mobile/app_performance' - tag: Documentation - text: How Mobile Session Replay Impacts App Performance - - link: '/session_replay/mobile/setup_and_configuration' - tag: Documentation - text: Setup and Configure Mobile Session Replay - - link: '/session_replay/mobile/troubleshooting' - tag: Documentation - text: Troubleshoot Mobile Session Replay - - link: '/session_replay' - tag: Documentation - text: Session Replay ---- - -{% partial file="real_user_monitoring/session_replay/mobile/privacy_options.mdoc.md" /%} - diff --git a/content/en/session_replay/mobile/setup_and_configuration.mdoc.md b/content/en/session_replay/mobile/setup_and_configuration.mdoc.md deleted file mode 100644 index e3730370353..00000000000 --- a/content/en/session_replay/mobile/setup_and_configuration.mdoc.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Mobile Session Replay Setup and Configuration -description: Setting up and configuring Mobile Session Replay. -aliases: - - /real_user_monitoring/session_replay/mobile/setup_and_configuration - - /product_analytics/session_replay/mobile/setup_and_configuration -content_filters: - - trait_id: platform - option_group_id: rum_session_replay_sdk_options - label: "SDK" -further_reading: - - link: '/session_replay/mobile/' - tag: Documentation - text: Mobile Session Replay - - link: '/session_replay/mobile/app_performance' - tag: Documentation - text: How Mobile Session Replay Impacts App Performance - - link: '/session_replay/mobile/privacy_options' - tag: Documentation - text: Mobile Session Replay Privacy Options - - link: '/session_replay/mobile/troubleshooting' - tag: Documentation - text: Troubleshoot Mobile Session Replay - - link: '/session_replay/' - tag: Documentation - text: Session Replay - - link: '/real_user_monitoring/application_monitoring/android/web_view_tracking' - tag: Documentation - text: Web View Tracking ---- - -{% partial file="real_user_monitoring/session_replay/setup_and_configuration.mdoc.md" /%} \ No newline at end of file diff --git a/content/en/session_replay/mobile/troubleshooting.md b/content/en/session_replay/mobile/troubleshooting.md deleted file mode 100644 index 2fadb08111c..00000000000 --- a/content/en/session_replay/mobile/troubleshooting.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Troubleshooting Mobile Session Replay -description: How to troubleshoot Mobile Session Replay. -aliases: - - /real_user_monitoring/session_replay/mobile/troubleshooting - - /product_analytics/session_replay/mobile/troubleshooting -further_reading: - - link: '/session_replay/mobile' - tag: Documentation - text: Mobile Session Replay - - link: '/session_replay/mobile/setup_and_configuration' - tag: Documentation - text: Setup and Configure Mobile Session Replay - - link: '/session_replay/mobile/app_performance' - tag: Documentation - text: How Mobile Session Replay Impacts App Performance - - link: '/session_replay/mobile/privacy_options' - tag: Documentation - text: Mobile Session Replay Privacy Options - - link: '/session_replay/' - tag: Documentation - text: Session Replay ---- -## Session replays -### Some parts of the application are blank or not visible in the player - -Mobile Session Replay only supports native frameworks. Within these frameworks, there may be certain components or screens missing, such as: - -- SwiftUI is supported through an **experimental** feature. If this experimental support is **not enabled**, SwiftUI screens may appear blank or incomplete. -- Certain system elements, such as actionBar in Android, progress bars, and spinners -- Rich system contents, such as video players, music player, and map widgets -- Views that use direct canvas drawing -- Advanced text styling - -### Images do not render properly -Depending on the SDK configuration of Mobile Session Replay, images may not always be displayed. - -Image visibility depends on your SDK privacy configuration: -- On iOS, if `maskNonBundledOnly` is enabled, only bundled images with UIKit and images up to 100x100 pts on SwiftUI are captured. -- On Android, if `mask_large_only` is used, only images up to 100x100dp are captured. - -All other images are replaced by a "Content Image" placeholder in the UI. - -Learn more about [image privacy settings][1]. - -Images follow a separate processing pipeline, which may introduce a small delay between uploading a replay and the image being available for rendering in the web player. -In this case, wait a few minutes and then reload the replay. - -On iOS, vector images are not supported in Session Replay and appear as "Unsupported image type" placeholders in the replay. To work around this, disable the "Preserve Vector Data" option in your asset catalog so that Xcode rasterizes the images, allowing them to be captured correctly. SF Symbols are also not supported. - -### The session replay rendering looks does not exactly mirror my application -Mobile Session Replay's approach combines performance with usability. To achieve this, it's not a pixel-perfect recreation of your app, but instead it takes a hybrid approach to the visual: it displays a scaffold of the screen that can later be enriched with styling and contextual images. - -### For sessions that are very short, I see a replay attached, but I'm unable to view the replay -When sessions are 1 nanosecond long, Datadog is unable to process the record, so there is no replay attached. - -## Data security -### I need to account for mobile app consent when collecting mobile session replays -Before data is uploaded to Datadog, it is stored in cleartext in your application's cache directory. Upon starting the SDK, a tracking consent value needs to be set to one of the following: - -- If the value is **not granted**, then no data is ever written on disk. -- If the value is **pending**, the data is written in a temporary folder which cannot be uploaded to Datadog. -- If the value is **granted**, data is written in an "upload" folder, which is processed in the background, and eventually uploaded to Datadog. - -At any time during the lifetime of the host app, it's possible to change the tracking consent. When the consent changes from pending to granted, the data in the temporary folder is moved to the "upload" folder. - -## Further reading - -{{< partial name="whats-next/whats-next.html" >}} - -[1]: /session_replay/mobile/privacy_options/?platform=ios&tab=as-wrappers#image-masking diff --git a/content/en/session_replay/privacy_options.mdoc.md b/content/en/session_replay/privacy_options.mdoc.md new file mode 100644 index 00000000000..5b358de6125 --- /dev/null +++ b/content/en/session_replay/privacy_options.mdoc.md @@ -0,0 +1,34 @@ +--- +title: Session Replay Privacy Options +description: Configure privacy options for Session Replay. +aliases: + - /session_replay/browser/privacy_options + - /session_replay/mobile/privacy_options + - /real_user_monitoring/session_replay/privacy_options + - /real_user_monitoring/session_replay/browser/privacy_options + - /real_user_monitoring/session_replay/mobile/privacy_options + - /product_analytics/session_replay/browser/privacy_options + - /product_analytics/session_replay/mobile/privacy_options +content_filters: + - trait_id: platform + option_group_id: rum_sdk_platform_options_v2 + label: "SDK" +further_reading: + - link: '/session_replay/' + tag: Documentation + text: Session Replay + - link: "https://www.datadoghq.com/blog/default-privacy-session-replay/" + tag: "Blog" + text: "Obfuscate user data with Session Replay default privacy settings" + - link: '/session_replay/app_performance' + tag: Documentation + text: How Session Replay Impacts App Performance + - link: '/session_replay/setup_and_configuration' + tag: Documentation + text: Setup and Configure Session Replay + - link: '/session_replay/troubleshooting' + tag: Documentation + text: Troubleshoot Session Replay +--- + +{% partial file="real_user_monitoring/session_replay/privacy_options.mdoc.md" /%} diff --git a/content/en/session_replay/setup_and_configuration.mdoc.md b/content/en/session_replay/setup_and_configuration.mdoc.md new file mode 100644 index 00000000000..121383d34a9 --- /dev/null +++ b/content/en/session_replay/setup_and_configuration.mdoc.md @@ -0,0 +1,45 @@ +--- +title: Session Replay Setup and Configuration +description: Setting up and configuring Session Replay. +aliases: + - /session_replay/browser/setup_and_configuration + - /session_replay/mobile/setup_and_configuration + - /real_user_monitoring/session_replay/browser/setup_and_configuration + - /real_user_monitoring/session_replay/mobile/setup_and_configuration + - /product_analytics/session_replay/browser/setup_and_configuration + - /product_analytics/session_replay/mobile/setup_and_configuration +content_filters: + - trait_id: platform + option_group_id: rum_session_replay_sdk_options + label: "SDK" +further_reading: + - link: 'https://www.datadoghq.com/blog/session-replay-datadog/' + tag: 'Blog' + text: 'Use Datadog Session Replay to view real-time user journeys' + - link: 'https://www.datadoghq.com/blog/reduce-customer-friction-funnel-analysis/' + tag: 'Blog' + text: 'Use funnel analysis to understand and optimize key user flows' + - link: 'https://www.datadoghq.com/blog/zendesk-session-replay-integration/' + tag: 'Blog' + text: 'Visually replay user-facing issues with Zendesk and Datadog Session Replay' + - link: '/product_analytics/analytics_explorer' + tag: Documentation + text: 'Visualize your Product Analytics data in the Analytics Explorer' + - link: '/integrations/content_security_policy_logs' + tag: Documentation + text: 'Detect and aggregate CSP violations with Datadog' + - link: '/session_replay/app_performance' + tag: Documentation + text: How Session Replay Impacts App Performance + - link: '/session_replay/privacy_options' + tag: Documentation + text: Session Replay Privacy Options + - link: '/session_replay/troubleshooting' + tag: Documentation + text: Troubleshoot Session Replay + - link: '/real_user_monitoring/application_monitoring/android/web_view_tracking' + tag: Documentation + text: Web View Tracking +--- + +{% partial file="real_user_monitoring/session_replay/setup_and_configuration.mdoc.md" /%} diff --git a/content/en/session_replay/troubleshooting.mdoc.md b/content/en/session_replay/troubleshooting.mdoc.md new file mode 100644 index 00000000000..894ffc89770 --- /dev/null +++ b/content/en/session_replay/troubleshooting.mdoc.md @@ -0,0 +1,37 @@ +--- +title: Session Replay Troubleshooting +description: Learn how to troubleshoot issues with Session Replay. +aliases: + - /session_replay/browser/troubleshooting + - /session_replay/mobile/troubleshooting + - /real_user_monitoring/session_replay/troubleshooting + - /real_user_monitoring/session_replay/browser/troubleshooting + - /real_user_monitoring/session_replay/mobile/troubleshooting + - /product_analytics/session_replay/browser/troubleshooting + - /product_analytics/session_replay/mobile/troubleshooting +content_filters: + - trait_id: platform + option_group_id: rum_session_replay_platform_options + label: "SDK" +further_reading: + - link: 'https://github.com/DataDog/browser-sdk' + tag: "Source Code" + text: 'browser-sdk Source code' + - link: '/session_replay/' + tag: Documentation + text: 'Learn about Session Replay' + - link: '/integrations/content_security_policy_logs' + tag: Documentation + text: 'Detect and aggregate CSP violations with Datadog' + - link: '/session_replay/setup_and_configuration' + tag: Documentation + text: Setup and Configure Session Replay + - link: '/session_replay/app_performance' + tag: Documentation + text: How Session Replay Impacts App Performance + - link: '/session_replay/privacy_options' + tag: Documentation + text: Session Replay Privacy Options +--- + +{% partial file="real_user_monitoring/session_replay/troubleshooting.mdoc.md" /%} diff --git a/content/en/synthetics/guide/explore-rum-through-synthetics.md b/content/en/synthetics/guide/explore-rum-through-synthetics.md index 17118667727..58cc7eab571 100644 --- a/content/en/synthetics/guide/explore-rum-through-synthetics.md +++ b/content/en/synthetics/guide/explore-rum-through-synthetics.md @@ -68,7 +68,7 @@ To navigate back to Synthetic Monitoring and your test's results, click {{< ui > {{< partial name="whats-next/whats-next.html" >}} [1]: /session_replay/browser/ -[2]: /session_replay/browser/dev_tools/ +[2]: /session_replay/dev_tools [3]: /real_user_monitoring/explorer/ [4]: /real_user_monitoring/error_tracking/ [5]: https://app.datadoghq.com/synthetics/settings/integrations diff --git a/customization_config/en/option_groups/real_user_monitoring.yaml b/customization_config/en/option_groups/real_user_monitoring.yaml index 535be7fa8c3..bc96740d86e 100644 --- a/customization_config/en/option_groups/real_user_monitoring.yaml +++ b/customization_config/en/option_groups/real_user_monitoring.yaml @@ -5,6 +5,7 @@ rum_sdk_platform_options: - id: react_native rum_sdk_platform_options_v2: + - id: browser - id: android default: true - id: ios @@ -18,6 +19,7 @@ rum_sdk_profiling_options: - id: ios rum_session_replay_sdk_options: + - id: browser - id: android default: true - id: ios @@ -26,6 +28,11 @@ rum_session_replay_sdk_options: - id: react_native - id: flutter +rum_session_replay_platform_options: + - id: browser + default: true + - id: mobile + rum_mobile_proxy_protocol_options: - id: http_https default: true diff --git a/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/mobile/privacy_options.mdoc.md b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/privacy_options.mdoc.md similarity index 89% rename from layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/mobile/privacy_options.mdoc.md rename to layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/privacy_options.mdoc.md index 1f8c44b7c12..f0d9f84ac3d 100644 --- a/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/mobile/privacy_options.mdoc.md +++ b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/privacy_options.mdoc.md @@ -13,8 +13,129 @@ Session Replay provides privacy controls to help ensure organizations of any sca Default privacy options for Session Replay protect end user privacy and prevent sensitive organizational information from being collected. +{% if equals($platform, "browser") %} +By enabling Session Replay, you can automatically mask sensitive elements from being recorded through the RUM Browser SDK. When data is masked, that data is not collected in its original form by Datadog's SDKs and thus is not sent to the backend. +{% /if %} +{% if includes($platform, ["android", "ios", "react_native", "flutter"]) %} By enabling Mobile Session Replay, you can automatically mask sensitive elements from being recorded through the RUM Mobile SDK. When data is masked, that data is not collected in its original form by Datadog's SDKs and thus is not sent to the backend. +{% /if %} + + +{% if equals($platform, "browser") %} +## Configuration + +{% alert level="danger" %} +`defaultPrivacyLevel` and `mask-user-input` are available in the SDK v3.6.0+. +{% /alert %} + +To enable your privacy settings, set `defaultPrivacyLevel` to `mask`, `mask-user-input`, or `allow` in your JavaScript configuration. + +**Note**: If the privacy setting is not specified when enabling Session Replay, `mask` is enabled by default. + +```javascript +import { datadogRum } from '@datadog/browser-rum'; + +datadogRum.init({ + applicationId: '', + clientToken: '', + site: '', + // service: 'my-web-application', + // env: 'production', + // version: '1.0.0', + sessionSampleRate: 100, + sessionReplaySampleRate: 100, + trackResources: true, + trackLongTasks: true, + trackUserInteractions: true, + defaultPrivacyLevel: 'mask' | 'mask-user-input' | 'allow' +}); +``` + +After updating your configuration, you can override elements of your HTML documents with the below privacy options. + +### Mask mode + +Setting `defaultPrivacyLevel` to `mask` mode masks all HTML text, user input, images, links and [`data-*` attributes][3]. Text on your application is replaced with `X`, rendering the page into a wireframe. + +{% img src="real_user_monitoring/session_replay/browser-privacy-mask-all.png" alt="Mask mode" style="width:100%;" /%} + +**Note**: Masked data is not stored on Datadog servers. + +### Mask user input mode + +Masks most form fields such as inputs, text areas, and checkbox values while recording all other text as is. Inputs are replaced with three asterisks (`***`) and text areas are obfuscated with space-preserving `x` characters. + +{% img src="real_user_monitoring/session_replay/browser-privacy-mask-input.png" alt="Mask user input mode" style="width:100%;" /%} + +### Allow mode + +Records everything unmasked. + +{% img src="real_user_monitoring/session_replay/browser-privacy-allow-all.png" alt="Allow mode" style="width:100%;" /%} + +## Privacy options + +### Override an HTML element + +You can set an application-wide default and tag the privacy level of an individual HTML element using one of two methods: +1. An HTML attribute such as `data-dd-privacy="allow" | "mask" | "hidden" | "mask-user-input"` or +2. An HTML class name such as `class="dd-privacy-allow" | "dd-privacy-mask-user-input" | "dd-privacy-mask" | "dd-privacy-hidden"`. + +The example below demonstrates how you can override certain elements in your HTML to customize your obfuscation: + +```html +
+
Order Value
+
+ $50.00 +
+
+``` + +The dollar amount in the cart is replaced with asterisks. + +{% img src="real_user_monitoring/session_replay/example-mask.png" alt="Example of mask mode obfuscating dollar amount" style="width:70%;" /%} + +## Privacy restrictions + +To protect end-user privacy, regardless of your privacy configuration, the following HTML elements are **always masked**: +- Input elements of type `password`, `email`, and `tel` +- Elements with `autocomplete` attributes such as credit card numbers, expiration dates, and security codes + +## Advanced privacy options + +### Completely hide an element + +`hidden` is an advanced privacy setting that completely hides specific elements instead of obscuring the text. + +If you are concerned about the number of visible elements in sensitive fields, enable `hidden` for your specific elements. These HTML elements are replaced with a gray block at the time of recording. + +In this example replay session, the username in the Datadog navigation is obfuscated. + +{% img src="real_user_monitoring/session_replay/hidden.png" alt="Example of hidden mode obfuscating a username" style="width:60%;" /%} + +### Override the action name + +To obscure the default action name and update the naming convention for individual actions, set the override for your individual action names. + +You can rename the default action name by overriding the name of a specific HTML element with a more general name. By default, Datadog displays the custom override name. + +For example, override the following name with `
→ Action: "Click on Address"`. + +Additional use cases to override the default action name include masking sensitive data in the RUM Explorer and streamlining your analytics and search with custom naming conventions. + +### Mask action names +By default, if you wish to mask all action names, you can use the `enablePrivacyForActionName` option in conjunction with the `mask` privacy setting. This operation automatically substitutes all non-overridden action names with the placeholder `Masked Element`. This setting is also designed to be compatible with existing [HTML override attributes](#override-an-html-element). + +{% alert level="info" %} +Datadog is working to add more privacy features to RUM & Session Replay. Have something in mind that you would like to see? [Contact Datadog support][4]. +{% /alert %} +{% /if %} + + + +{% if includes($platform, ["android", "ios", "react_native", "flutter"]) %} ## Fine-grained masking Using the masking modes below, you can override the default setup on a per-application basis. Masking is fine-grained, which means you can override masking for text and inputs, images, and touches individually to create a custom configuration that suits your needs. @@ -1484,6 +1605,10 @@ The following chart shows how we apply different image masking strategies: - Shown - Masked {% /table %} +{% /if %} + -[1]: /session_replay/browser/privacy_options +[1]: /session_replay/privacy_options/?platform=browser [2]: https://github.com/DataDog/dd-sdk-reactnative +[3]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes +[4]: /help diff --git a/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/setup_and_configuration.mdoc.md b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/setup_and_configuration.mdoc.md index 4ef4b106b1f..e41be550fa1 100644 --- a/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/setup_and_configuration.mdoc.md +++ b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/setup_and_configuration.mdoc.md @@ -8,6 +8,63 @@ content_filters: --> ## Setup + +{% if equals($platform, "browser") %} +To set up Session Replay for Browser: + +### Step 1 - Set up the Browser SDK + +Make sure you've set up the [RUM Browser SDK][30]. + +### Step 2 - Enable Session Replay + +To enable Session Replay you have to specify the session replay sample rate. It must be a number between 0.0 and 100.0, where 0 indicates that no replays are recorded and 100 means that all sessions include a replay. + +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. +See [Browser RUM & Session Replay sessions][31] for more information. + +{% tabs %} +{% tab label="NPM" %} +```javascript +import { datadogRum } from '@datadog/browser-rum'; + +datadogRum.init({ + ... + sessionReplaySampleRate: 100, + ... +}); +``` +{% /tab %} +{% tab label="CDN async" %} +```javascript + +``` +{% /tab %} +{% tab label="CDN sync" %} +```javascript + +``` + +**Note**: Below version v5.0.0, Session Replay does not start automatically and you need to call [`startSessionReplayRecording()`][32] API. +{% /tab %} +{% /tabs %} +{% /if %} + + {% if equals($platform, "android") %} All Session Replay SDK versions can be found in the [Maven Central Repository][4]. @@ -413,6 +470,12 @@ The sample rate is an optional parameter in the Session Replay configuration. It 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, "browser") %} +The sample rate is set through the `sessionReplaySampleRate` parameter passed to `datadogRum.init()`. See [Step 2 - Enable Session Replay](#step-2-enable-session-replay) above. +{% /if %} + + {% if equals($platform, "android") %} ```kotlin {% filename="Application.kt" %} @@ -480,6 +543,64 @@ final configuration = DatadogConfiguration( 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, "browser") %} +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 `startSessionReplayRecordingManually` parameter as shown below, and later call [`startSessionReplayRecording()`][32]. You can also use [`stopSessionReplayRecording()`][33] to stop the recording at any time. + +{% tabs %} +{% tab label="NPM" %} +```javascript +import { datadogRum } from '@datadog/browser-rum'; + +datadogRum.init({ + ... + startSessionReplayRecordingManually: true, + ... +}); + +datadogRum.startSessionReplayRecording() +// Do something +datadogRum.stopSessionReplayRecording() +``` +{% /tab %} +{% tab label="CDN async" %} +```javascript + +``` +{% /tab %} +{% tab label="CDN sync" %} +```javascript + +``` +{% /tab %} +{% /tabs %} + +**Note**: In some scenarios, you may want to begin recording, even if it was initially sampled out of replay. To force Session Replay recording for the rest of the current session, call [`startSessionReplayRecording({ force: true })`][32]. +{% /if %} + + {% if equals($platform, "android") %} ```kotlin {% filename="Application.kt" %} @@ -614,7 +735,7 @@ DatadogSdk.instance.sdkVerbosity = CoreLoggerLevel.debug; See [Privacy Options][2]. [1]: /real_user_monitoring/application_monitoring/ios/web_view_tracking -[2]: /session_replay/mobile/privacy_options +[2]: /session_replay/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 @@ -629,16 +750,20 @@ See [Privacy Options][2]. [14]: /real_user_monitoring/application_monitoring/react_native/setup [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]: /session_replay/mobile/privacy_options/?tab=reactnative +[17]: /session_replay/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/application_monitoring/android/web_view_tracking/?tab=android#instrument-your-web-views -[21]: /session_replay/browser/#setup +[21]: /session_replay/setup_and_configuration/?platform=browser#setup [22]: https://github.com/DataDog/dd-sdk-ios/releases/tag/2.13.0 [23]: /real_user_monitoring/application_monitoring/ios/web_view_tracking/?tab=ios#instrument-your-web-views [24]: /real_user_monitoring/application_monitoring/kotlin_multiplatform/web_view_tracking/?tab=kotlinmultiplatform#instrument-your-web-views [25]: /real_user_monitoring/application_monitoring/web_view_tracking/?tab=reactnative#instrument-your-web-views -[26]: /session_replay/browser/#setup +[26]: /session_replay/setup_and_configuration/?platform=browser#setup [27]: https://reactnative.dev/architecture/landing-page [28]: https://docs.datadoghq.com/real_user_monitoring/application_monitoring/flutter/setup?tab=rum [29]: https://pub.dev/packages/datadog_session_replay +[30]: /real_user_monitoring/browser/setup/ +[31]: /real_user_monitoring/guide/sampling-browser-plans/ +[32]: https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.DatadogRum.html#startsessionreplayrecording +[33]: https://datadoghq.dev/browser-sdk/interfaces/_datadog_browser-rum.DatadogRum.html#stopsessionreplayrecording diff --git a/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/troubleshooting.mdoc.md b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/troubleshooting.mdoc.md new file mode 100644 index 00000000000..cd3bb1cf5d0 --- /dev/null +++ b/layouts/shortcodes/mdoc/en/real_user_monitoring/session_replay/troubleshooting.mdoc.md @@ -0,0 +1,120 @@ + + + +{% if equals($platform, "browser") %} +## Overview + +If you experience unexpected behavior with Datadog Session Replay, use this page to help resolve issues. If you continue to have trouble, contact [Datadog Support][1] for further assistance. Regularly update to the latest version of the [RUM Browser SDK][2], as each release contains improvements and fixes. + +## Session Replay recorder + +### Some HTML elements are not visible at replay + +Session Replay does not support: + +- The following HTML elements: `iframe`, `video`, `audio`, or `canvas` + - To render iframes in Session Replay, you can separately instrument the iframe code. For iframes that span across subdomains, use `trackSessionAcrossSubdomains: true`. After correct instrumentation, iframes and their parent windows appear as separate pages within the same session. Embedding iframe replays directly into their parent windows is not supported. +- The [Web Animations API][7] + +Session Replay requires you to use an HTTPS connection. If you aren't using a secure connection, the resources time out and you can't see images and some page elements. + +### Fonts or images do not render properly + +A Session Replay is not a video, but an actual iframe rebuilt based on snapshots of the DOM. The replay thus depends on the various assets of the page: fonts and images. + +Assets may not be available at the time of replay for the following reasons: + +- The resource no longer exists. For example, it was part of a previous deployment. +- The resource is inaccessible. For example, authentication might be required, or the resource might only be accessible from an internal network. +- The resource is blocked by the browser due to CORS (typically web-fonts). + - The replay rendered on the `session-replay-datadoghq.com` sandbox domain and the asset requests are subject to cross-origin security checks by your browser. If the given asset is not authorized for the domain, your browser blocks the request. + - Allow `session-replay-datadoghq.com` through the [`Access-Control-Allow-Origin`][3] header for any font or image assets your website depends on to ensure these resources are accessible for the replay. For more information, see [Cross Origin Resource Sharing][4]. + +### CSS rules not properly applied/mouse hover not replayed + +Unlike fonts and images, the recorder tries to bundle the various CSS rules applied as part of the recording data, using the [CSSStyleSheet][5] interface. If this is not possible, it falls back to recording the links to the CSS files. + +For proper mouse hover support, the CSS rules must be accessible through the CSSStyleSheet interface. + +If the stylesheets are hosted on a different domain than the web page, access to the CSS rules is subject to cross-origin security checks by the browser, and the browser must be instructed to load the stylesheet using CORS with the [crossorigin][6] attribute. + +For example, if your application is on the `example.com` domain and depends on a CSS file on `assets.example.com` through a link element, the `crossorigin` attribute should be set to `anonymous`, unless credentials are required: + +```html + +``` + +Additionally, authorize the `example.com` domain in the `assets.example.com`. This allows the assets file to load the resource by setting the [`Access-Control-Allow-Origin`][3] header. + +[1]: /help +[2]: https://github.com/DataDog/browser-sdk/blob/main/CHANGELOG.md +[3]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin +[4]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS +[5]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet +[6]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin +[7]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API +{% /if %} + + + +{% if equals($platform, "mobile") %} +## Overview + +If you experience unexpected behavior with Datadog Mobile Session Replay, use this page to help resolve issues. If you continue to have trouble, contact [Datadog Support][9] for further assistance. Regularly update to the latest version of the RUM Mobile SDK, as each release contains improvements and fixes. + +## Session Replay recorder + +### Some parts of the application are blank or not visible in the player + +Mobile Session Replay only supports native frameworks. Within these frameworks, there may be certain components or screens missing, such as: + +- SwiftUI is supported through an **experimental** feature. If this experimental support is **not enabled**, SwiftUI screens may appear blank or incomplete. +- Certain system elements, such as actionBar in Android, progress bars, and spinners +- Rich system contents, such as video players, music player, and map widgets +- Views that use direct canvas drawing +- Advanced text styling + +### Images do not render properly +Depending on the SDK configuration of Mobile Session Replay, images may not always be displayed. + +Image visibility depends on your SDK privacy configuration: +- On iOS, if `maskNonBundledOnly` is enabled, only bundled images with UIKit and images up to 100x100 pts on SwiftUI are captured. +- On Android, if `mask_large_only` is used, only images up to 100x100dp are captured. + +All other images are replaced by a "Content Image" placeholder in the UI. + +Learn more about [image privacy settings][8]. + +Images follow a separate processing pipeline, which may introduce a small delay between uploading a replay and the image being available for rendering in the web player. +In this case, wait a few minutes and then reload the replay. + +On iOS, vector images are not supported in Session Replay and appear as "Unsupported image type" placeholders in the replay. To work around this, disable the "Preserve Vector Data" option in your asset catalog so that Xcode rasterizes the images, allowing them to be captured correctly. SF Symbols are also not supported. + +### The session replay rendering looks does not exactly mirror my application +Mobile Session Replay's approach combines performance with usability. To achieve this, it's not a pixel-perfect recreation of your app, but instead it takes a hybrid approach to the visual: it displays a scaffold of the screen that can later be enriched with styling and contextual images. + +### For sessions that are very short, I see a replay attached, but I'm unable to view the replay +When sessions are 1 nanosecond long, Datadog is unable to process the record, so there is no replay attached. + +## Data security +### I need to account for mobile app consent when collecting mobile session replays +Before data is uploaded to Datadog, it is stored in cleartext in your application's cache directory. Upon starting the SDK, a tracking consent value needs to be set to one of the following: + +- If the value is **not granted**, then no data is ever written on disk. +- If the value is **pending**, the data is written in a temporary folder which cannot be uploaded to Datadog. +- If the value is **granted**, data is written in an "upload" folder, which is processed in the background, and eventually uploaded to Datadog. + +At any time during the lifetime of the host app, it's possible to change the tracking consent. When the consent changes from pending to granted, the data in the temporary folder is moved to the "upload" folder. + +[8]: /session_replay/privacy_options/?platform=ios#image-masking +[9]: /help +{% /if %} +