ref(replay): Refactor pages inside the Product Walkthrough > Replay area

docs/product/explore/session-replay/index.mdx

@@ -6,7 +6,7 @@ description: "Use Session Replay to get reproductions of user sessions to improv
 
 Sentry supports Session Replay for Web and Mobile. This includes browser-based applications and certain native mobile platforms, such as Android, iOS, and React Native. Both versions of Replay (Web and Mobile) are generally available and stable.
 
-For browser-based applications (Web replay), this includes static websites, single-page applications, and also server-side rendered applications -- for example, platforms such as Electron, Next.js, and Remix.
+For browser-based applications, this includes static websites, single-page applications, and also server-side rendered applications -- for example, platforms such as Electron, Next.js, and Remix.
 
 To learn more about which SDKs we support, please visit our docs for [Web](web/#supported-sdks) and [Mobile](mobile/#supported-sdks).
 

docs/product/explore/session-replay/mobile/index.mdx

@@ -31,22 +31,36 @@ We recommend updating to the latest version, but the minimum versions supported
 - [React Native](/platforms/react-native/session-replay/), [6.5.0](https://github.com/getsentry/sentry-react-native/releases)
 - [Flutter](/platforms/dart/guides/flutter/session-replay/), [8.12.0](https://github.com/getsentry/sentry-dart/releases)
 
-## Replays for Backend Errors
+<Include name="session-replay-for-backend-errors.mdx" />
 
-Replays are integrated with Sentry's tracing data model, enabling you to see replays associated with backend errors. For these replays, you'll be able to view backend errors in the Timeline, Breadcrumbs, Errors tab, and other places when you go to the **Replay Details** view. You'll also see a Replays tab and replay previews in the **Issue Details** page for any backend error that has a linked replay.
+Make sure you've set up [trace propagation](/product/sentry-basics/concepts/tracing/#trace-propagation) in your backend projects. For example:
 
-To see replays for backend errors, you need to have Sentry set up for both your frontend and backend, along with [distributed tracing](/product/sentry-basics/concepts/tracing/). This provides end-to-end data connectivity on your APIs, allowing Sentry to link replays to backend endpoints. Make sure you've set up trace propagation in your backend projects. For example:
+```swift {tabTitle:Swift}
+import Sentry
 
-Currently, replays for backend errors is supported for the following SDK versions or newer:
+SentrySDK.start { options in
+    options.dsn = "___PUBLIC_DSN___"
+    options.tracePropagationTargets = ["MyAppDomain.com"]
+}
+```
 
-- JavaScript (or related framework) [7.51.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.51.0)
-- Python [1.26.0](https://github.com/getsentry/sentry-python/releases/tag/1.26.0)
-- Node [7.48.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.48.0)
-- PHP [3.18.0](https://github.com/getsentry/sentry-php/releases/tag/3.18.0)
-- .NET [3.31.0](https://github.com/getsentry/sentry-dotnet/releases/tag/3.31.0)
-- Java [6.17.0](https://github.com/getsentry/sentry-java/releases/tag/6.17.0)
-- Ruby [5.9.0](https://github.com/getsentry/sentry-ruby/releases/tag/5.9.0)
-- Go [0.21.0](https://github.com/getsentry/sentry-go/releases/tag/v0.21.0)
+```objc {tabTitle:Objective-C}
+@import Sentry;
+
+[SentrySDK startWithConfigureOptions:^(SentryOptions *options) {
+    options.dsn = @"___PUBLIC_DSN___";
+    options.tracePropagationTargets = @[@"MyAppDomain.com"]
+}];
+```
+
+```javascript {tabTitle:JavaScript}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___";
+  tracePropagationTargets: ["https://myproject.org", /^\/api\//],
+});
+```
+
+<Include name="session-replay-for-backend-support.mdx" />
 
 ## Frequently Asked Questions
 

docs/product/explore/session-replay/replay-details.mdx

@@ -6,29 +6,28 @@ description: "Learn more about how information is organized on the Replay Detail
 
 <Include name="session-replay-web-report-bug.mdx" />
 
-Every replay has a detailed view that contains the embedded video player and rich debugging context. Playing back the video will allow you to see every user interaction in relation to frontend and backend errors,console messages, DOM events, and network requests and more. It’s like having [DevTools](https://developer.chrome.com/docs/devtools/overview/) active for your production user sessions. Almost every component on this page is connected through timestamps. See the breakdown of each component and why it’s valuable:
+Every replay has a detailed view that contains the embedded video player and rich debugging context. Playing back the video will allow you to see every user interaction in relation to frontend and backend errors, console messages, DOM events, network requests and more depending on your platform. It’s like having [DevTools](https://developer.chrome.com/docs/devtools/overview/) active for your production user sessions. Almost every component on this page is connected through timestamps. See the breakdown of each component and why it’s valuable:
 
 ![Session Replay details user interface](./img/replay-details.png)
 
-- **Replay Player:** Video-like reproduction of a user session. This is where you can visualize exactly what actions the user took during a user session, and how the application behaved within this specific user’s environment: including device, OS, latency, settings, and so on. Most importantly, you can see which actions lead to an error and take the guesswork out of debugging.
-  - By default, the Session Replay SDK is configured to redact all text, user input and media elements. See all privacy configuration options [here](/platform-redirect/?next=/session-replay/privacy/).
+- **Replay Player:** Video-like reproduction of a user session. This is where you can visualize exactly what actions the user took during a user session and how the application behaved within this specific user’s environment, including device, OS, latency, settings, and so on. Most importantly, you can see which actions led to an error, which takes the guesswork out of debugging.
+  - By default, the Session Replay SDK is configured to redact all text, user input, and media elements. See all privacy configuration options [here](/platform-redirect/?next=/session-replay/privacy/).
 
 * **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place. Breadcrumbs are synced with the replay player and will auto-scroll as the video plays. 
 Specifically:
-  - **User Clicks or Taps:** including rage and dead clicks on web and react native.
-  - **User Inputs:** except password fields which are always redacted.
+  - **User Clicks or Taps:** including rage and dead clicks on Web.
   - **Navigations, Page Loads & View Changes:** [Learn more about spans](/product/sentry-basics/distributed-tracing/)
-  - **Mobile specific:** Backgrounding and Foregrounding, Network connectivity and battery usage
-  - **Web Vitals:** With links to [Web Vitals Insights](/product/insights/web-vitals/)
-  - **Custom Breadcrumbs:** Learn more about configuring [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs)
+  - **Mobile specific:** Backgrounding as well as foregrounding, network connectivity, and battery usage.
+  - **Web Vitals:** and an overall Performance Score [Learn more](/product/insights/web-vitals/)
+  - **Custom Breadcrumbs:** Learn more about configuring [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs).
 
-Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page.  
+  Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page.  
 
-- **Timeline:** This is the section at the bottom of the **Replay Details** page that illustrates where significant events (such as errors, user interactions, and more) happen over the course of the replay. This allows users to easily scrub to key events by dragging across the timeline. It also visually conveys the amount of time that took place between events and has a zoom functionality so you can easily zoom-in to distinguish between events that happen close together.
+- **Timeline:** This section at the bottom of the **Replay Details** page illustrates where significant events (such as errors, user interactions, and more) happen over the course of the replay. This allows users to easily scrub to key events by dragging across the timeline. It also visually conveys the amount of time that took place between events and has a zoom functionality, so you can easily zoom in to distinguish between events that happen close together.
 
-* **Console:** A list of debugging messages that don't belong in the breadcrumbs list will appear here. For web this includes `console.log` statements, and browser-generated messages to the developer. For React Native custom `console.log` will appear here, or in Android logs from [Logcat](/platforms/android/integrations/logcat/) and [Timber](/platforms/android/integrations/timber/) are also supported.
+* **Console:** A list of debugging messages that don't belong in the breadcrumbs list will appear here. For web, this includes `console.log` statements and browser-generated messages to the developer. For React Native, custom `console.log` will appear here, and in Android, logs from [Logcat](/platforms/android/integrations/logcat/) and [Timber](/platforms/android/integrations/timber/) are also supported.
 
-- **Network:** A list of all network requests that were initiated by the app while the replay recording was active. As the video plays, there’s a visual indicator that tracks through the table of network requests, highlighting which requests happened prior to, or next to this point in the video. You can also click the timestamp on the far right of each request to bring yourself to that point in the replay player. If configured for web, Sentry can also show the actual [HTTP request body and headers](/platform-redirect/?next=/session-replay/configuration/#network-details).
+- **Network:** A list of all network requests that were initiated by the app while the replay recording was active. As the video plays, there is a visual indicator that tracks through the table of network requests, highlighting which requests happened prior to or next to this point in the video. You can also click the timestamp on the far right of each request to bring yourself to that point in the replay player. If configured for web, Sentry can also show the actual [HTTP request body and headers](/platform-redirect/?next=/session-replay/configuration/#network-details).
 
 - **Errors:** See all the errors that occurred in the replay (including in your backend), with links to the corresponding events and [issue(s)](/product/issues/issue-details/error-issues/), as well as the impact these issues have had holistically across all users on your application.
 
@@ -49,17 +48,17 @@ Share a replay at a specific timestamp with a Sentry member by clicking the “S
 
 ## Delete Replays
 
-Delete an individual replay by clicking the “Delete” button in the top-right corner of **the Replay Details** page. You can’t delete replays that are in-progress. Please note that deleting replays do not affect your quota.
+Delete an individual replay by clicking the “Delete” button in the top-right corner of **the Replay Details** page. You cannot delete replays that are in progress. Please note that deleting replays does not affect your quota.
 
 ## Tags
 
-Find a complete list of built-in fields and custom tags associated with a replay under the “Tags” tab next to Breadcrumbs for additional context around the replay you’re viewing.
+Find a complete list of built-in fields and custom tags associated with a replay under the “Tags” tab for additional context around the replay you’re viewing.
 
 ![Highlight the button to share a replay](./img/replay-details-tags.png)
 
 ## Retention
 
-Replays are retained for 90 days in sentry.io for paid plans (the same retention period as other event types, such as Errors and Transactions). For free plans, replays are retained for 30 days in sentry.io. The retention period is not configurable.
+Replays are retained for 90 days in Sentry for paid plans (the same retention period as other event types, such as Errors and Transactions). For free plans, replays are retained for 30 days in Sentry. The retention period is not configurable.
 
 ## Inbound Filtering
 

docs/product/explore/session-replay/replay-page-and-filters.mdx

@@ -18,15 +18,15 @@ You can search for or browse replays of user sessions on the **Replay** page, wh
 
 The **Replay** page also has two widgets titled "Most Dead Clicks" and "Most Rage Clicks" that show the selectors with the most rage or dead clicks. Expanding the selector will show example replays where that selector was clicked. You can also click the "See all selectors" button to view all selectors that have gotten rage or dead clicks. SDK version `7.60.1` or higher is required to see rage and dead click data on the **Replay** page.
 
-By default, the IP address is used to identify each replay on this page. This can be changed in your organization and project settings. If you’d like to set an email or a username instead, call [Sentry.setUser()](/platform-redirect/?next=/enriching-events/identify-user) in your client-side configuration.If you’ve enabled the option to “Prevent Storing of IP Addresses” in either your project-level or organization-wide settings, the IP address will appear redacted on the **Replay** page. For more information, read about [several data scrubbing options](/security-legal-pii/scrubbing/server-side-scrubbing/) in the Sentry app on either an organization-wide or a project level.
+By default, the IP address is used to identify each replay on this page. This can be changed in your organization and project settings. If you’d like to set an email or a username instead, call [Sentry.setUser()](/platform-redirect/?next=/enriching-events/identify-user) in your client-side configuration. If you’ve enabled the option to prevent storing of IP addresses in either your project-level or organization-wide settings, the IP address will appear redacted on the **Replay** page. For more information, read about [several data scrubbing options](/security-legal-pii/scrubbing/server-side-scrubbing/) in the Sentry app on either an organization or a project level.
 
 Replays can appear on this page while they’re still in progress. You can’t delete in-progress replays.
 
 Each replay will bring users to the [**Replay Details**](/product/explore/session-replay/web/replay-details/) page.
 
 ## Filtering Replays
 
-All replays have built-in key fields, and may have [custom tags](/platform-redirect/?next=/enriching-events/tags/) if you have them set up. The search bar operates similarly to the one in the Discover [Query Builder](/product/explore/discover-queries/query-builder/#filter-by-search-conditions). Use it to enter these keys and assign them values. This will filter down your list of replays so you can quickly find the ones with the criteria you care about. For example, you can refine your replays search to a specific browser by using `browser.version:` as a key field and assigning the version as a value. For a list of all the built-in key fields/replay properties, check out our [Searchable Properties](/concepts/search/searchable-properties/session-replay/) documentation.
+All replays have built-in key fields, and may have [custom tags](/platform-redirect/?next=/enriching-events/tags/) if you have them set up. The search bar operates similarly to the one in the Discover [Query Builder](/product/explore/discover-queries/query-builder/#filter-by-search-conditions). Use it to enter search for keys and specific values. This will filter down your list of replays so you can quickly find the ones with the criteria you care about. For example, you can refine your replays search to a specific browser by using `browser.version:` as a key field and assigning the version as a value. For a list of all the built-in key fields and replay properties, check out our [Searchable Properties](/concepts/search/searchable-properties/session-replay/) documentation.
 
 ![Highlight the Search Filters input on the Session Replay Index Page](./img/replay-index-filtering.png)
 

docs/product/explore/session-replay/web/index.mdx

@@ -38,7 +38,7 @@ Unlike [sessions](/product/releases/health/#session) on the **Releases** page, u
 ## Supported SDKs
 
 Session Replay supports all browser-based applications.
-This includes static websites, single-page-aplications and also server-side-rendered, that includes frameworks such as:
+This includes static websites, single-page aplications, and also server-side-rendered. This includes frameworks such as:
 [Django](/platforms/python/integrations/django/),
 [Spring](/platforms/java/guides/spring-boot/),
 [ASP.NET](/platforms/dotnet/guides/aspnetcore/),
@@ -63,28 +63,15 @@ The Sentry SDK that records the replay runs on the client's browser, and it’s
 - [SvelteKit](/platforms/javascript/guides/sveltekit/session-replay/)
 - [Vue](/platforms/javascript/guides/vue/session-replay/)
 
-## Replays for Backend Errors
+<Include name="session-replay-for-backend-errors.mdx" />
 
-Replays are integrated with Sentry's tracing data model, enabling you to see replays associated with backend errors. For these replays, you'll be able to view backend errors in the Timeline, Breadcrumbs, Errors tab, and other places when you go to the **Replay Details** view. You'll also see a Replays tab and replay previews in the **Issue Details** page for any backend error that has a linked replay.
-
-To see replays for backend errors, you need to have Sentry set up for both your frontend and backend, along with [distributed tracing](/product/sentry-basics/concepts/tracing/). This provides end-to-end data connectivity on your APIs, allowing Sentry to link replays to backend endpoints. Make sure you've set up trace propagation in your backend projects. For example:
+Make sure you've set up [trace propagation](/product/sentry-basics/concepts/tracing/#trace-propagation) in your backend projects. For example:
 
 ```javascript
 Sentry.init({
-  tracePropagationTargets: [
-    "third-party-site.com",
-    /^https:\/\/yourserver\.io\/api/,
-  ],
+  dsn: "___PUBLIC_DSN___";
+  tracePropagationTargets: ["https://myproject.org", /^\/api\//],
 });
 ```
 
-Currently, replays for backend errors is supported for the following SDK versions or newer:
-
-- JavaScript (or related framework) [7.51.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.51.0)
-- Python [1.26.0](https://github.com/getsentry/sentry-python/releases/tag/1.26.0)
-- Node [7.48.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.48.0)
-- PHP [3.18.0](https://github.com/getsentry/sentry-php/releases/tag/3.18.0)
-- .NET [3.31.0](https://github.com/getsentry/sentry-dotnet/releases/tag/3.31.0)
-- Java [6.17.0](https://github.com/getsentry/sentry-java/releases/tag/6.17.0)
-- Ruby [5.9.0](https://github.com/getsentry/sentry-ruby/releases/tag/5.9.0)
-- Go [0.21.0](https://github.com/getsentry/sentry-go/releases/tag/v0.21.0)
+<Include name="session-replay-for-backend-support.mdx" />

includes/session-replay-for-backend-errors.mdx

@@ -0,0 +1,5 @@
+## Replays for Backend Errors
+
+Replays are integrated with Sentry's tracing data model, enabling you to see replays associated with backend errors. For these replays, you can view backend errors in the Timeline, the Breadcrumbs and Errors tabs, and other places when you go to the **Replay Details** view. You'll also see a Replays tab and replay previews in the **Issue Details** page for any backend error that has a linked replay.
+
+To see replays for backend errors, you need to have Sentry set up for both your frontend and backend, along with [distributed tracing](/product/sentry-basics/concepts/tracing/). This provides end-to-end data connectivity on your APIs, allowing Sentry to link replays to backend endpoints.