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

Author: ryan953

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

@@ -8,9 +8,6 @@ Sentry supports Session Replay for Web and Mobile. This includes browser-based a
 
 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.
 
-To learn more about which SDKs we support, please visit our docs for [Web](web/getting-started/#supported-sdks) and [Mobile](mobile/#sdks-supported).
+To learn more about which SDKs we support, please visit our docs for [Web](web/#supported-sdks) and [Mobile](mobile/#sdks-supported).
 
-Learn more about Session Replay:
-
-* [Session Replay for Web](web/)
-* [Session Replay for Mobile](mobile/)
+<PageGrid />

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

@@ -20,33 +20,7 @@ To redact anything potentially sensitive and preserve maximum user privacy, the
 
 ![Session Replay Redacted](./img/session-replay-redacted.png)
 
-## Replay Details
-
-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 network requests, frontend and backend errors, backend spans, and more.  Almost every component on this page is connected through timestamps.
-
-The below list shows the breakdown of each component and why it’s valuable:
-
-- **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place, specifically: user taps with the relevant component, navigations, when the user put the app in background or foreground, and [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by your organization. Breadcrumbs also provide insight into the device of a given user session at particular timestamps:
-      - `device battery` (when battery level or charging status changes)
-      - `orientation` (when the user rotates the device)
-      - `connectivity` (when this status changes between wifi, cellular, and offline).
-
-These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in Issue Details are not 1:1 to the replay breadcrumbs list. On the Replay Details page, the trail of events typically seen in the Issue Details page are instead displayed in the Network and Console components.
-
-
-- **Timeline:** This is the section at the bottom of the Replay Details page that illustrates where significant events (such as errors, device battery, and user interactions) 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 happened close together.
-
-- **Network:** This is 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. When a request fails, it is highlighted in red. You can also click the timestamp on the far right of each request to bring yourself to that point in the replay player.
-
-- **Console:** Some debugging messages that don't belong in the breadcrumb list will show up here. For example, a custom `console.log` in React Native. Logs from [Logcat](https://docs.sentry.io/platforms/android/integrations/logcat/) and [Timber](https://docs.sentry.io/platforms/android/integrations/timber/) are also supported and will show up here.
-
-- **Errors:** 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, seen when you hover over the issue ID.
-
-- **Tags:** A complete list of built-in fields and custom tags associated with a replay, such as operating system version and name, device specs, release, and user details.
-
-- **Trace:** A view that connects all the [trace(s)](/product/sentry-basics/tracing/distributed-tracing/#traces-transactions-and-spans) that happened during the replay.
-
-## SDKs Supported
+## Supported SDKs
 
 Session Replay for mobile is currently available for Android and iOS on both native SDKs, as well as for React Native and Flutter.
 
@@ -57,6 +31,23 @@ 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
+
+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:
+
+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)
+
 ## Frequently Asked Questions
 
 **How do you protect user data?**

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

@@ -0,0 +1,76 @@
+---
+title: "Replay Details"
+sidebar_order: 72
+description: "Learn more about how information is organized on the Replay Details page and how to share and delete replays."
+---
+
+<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:
+
+![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](/platforms/javascript/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)
+  - augmented with surrounding HTML source code (web & react native) to help users understand which event was targeted.
+- user inputs
+- [navigations, page loads, view changes](/product/insights/overview/transaction-summary/#what-is-a-transaction)
+- app backgrounding and foregrounding (mobile)
+- [web vitals](/product/insights/web-vitals/) (web) 
+  - augmented with the selector to help users identify which elements are affecting their Web Vital scores.
+- [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs)
+  - To learn more about how custom breadcrumbs are rendered, [read the docs here](/platforms/javascript/session-replay/configuration/#custom-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.  
+
+- **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.
+
+* **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](https://docs.sentry.io/platforms/android/integrations/logcat/) and [Timber](https://docs.sentry.io/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](/platforms/javascript/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.
+
+- **Trace:** Connects all the [trace(s)](/product/sentry-basics/tracing/distributed-tracing/#traces-transactions-and-spans) that happened during the replay.
+  - Due to transaction sampling, this view may be missing traces.
+
+- **Memory (web):** The view shows a heap size chart displaying the total amount of memory being used by JavaScript objects.
+  - This view is only available when the replay was recorded on a Chromium-based browser.
+
+- **Tags:** A complete list of built-in fields and custom tags associated with a replay, such as operating system version and name, device specs, release, and user details.
+
+
+## Share Replays
+
+Share a replay at a specific timestamp with a Sentry member by clicking the “Share” button in the top-right corner of the **Replay Details** page. This allows you to share replays at the point of a critical event or user flow with other Sentry members in your organization.
+
+![Highlight the button to share a replay](./img/replay-details-share.png)
+
+## 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.
+
+## 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.
+
+![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.
+
+## Inbound Filtering
+
+If you've chosen not to capture certain errors by applying any of the below inbound filter rules, those same rules will also apply to Session Replays.
+
+- IP Addresses
+- Releases
+- Request URLs
+- User-Agents
+
+**Note**: Because filtered outcomes are emitted per **segment** whereas successful outcomes are emitted per **replay**  (a replay being a collection of segments), you may see a noticeable increase in filtered outcomes on your [Stats](https://sentry.io/orgredirect/organizations/:orgslug/stats) page. This is not an error.

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

@@ -1,6 +1,6 @@
 ---
 title: "Replays Page and Filters"
-sidebar_order: 12
+sidebar_order: 71
 description: "Learn how to navigate the Replays page and filter user sessions that meet specific conditions."
 ---