Session Replay for mobile product docs

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

@@ -1,41 +1,12 @@
 ---
 title: "Session Replay"
 sidebar_order: 70
-description: "Use Session Replay to get video-like reproductions of user interactions to improve your website or app experience."
+description: "Use Session Replay to get reproductions of user sessions to improve your app experience."
 ---
 
-<Include name="feature-stage-beta-session-replay.mdx" />
+Sentry offers Session Replay for Web and Mobile. While Web support has been available and stable, Mobile Replay has recently been available in Beta.
 
-Session Replay allows you to see video-like reproductions of user sessions which can help you understand what happened before, during, and after an error or performance issue occurred. You'll be able to gain deeper debugging context into issues so that you can reproduce and resolve problems faster without the guesswork. As you play back each session, you'll be able to see every user interaction in relation to network requests, DOM events, and console messages. It’s effectively like having [DevTools](https://developer.chrome.com/docs/devtools/overview/) active in your production user sessions.
+See the specific documentation to learn more:
 
-Replays are integrated with other parts of the Sentry product so you can see how the user experience is impacted by errors and slow transactions. You'll see session replays associated with error events on the [Issue Details](/product/issues/issue-details/) page, and those associated with slow transactions on the [Transaction Summary](/product/performance/transaction-summary/) page. For [backend error replays](/product/explore/session-replay/getting-started#replays-for-backend-errors), any contributing backend errors will be included in the replay's timeline, [breadcrumbs](https://docs.sentry.io/product/issues/issue-details/breadcrumbs/), and errors.
-
-![Session Replay User Interface](./img/session-replay.png)
-
-## What Is a Session Replay?
-
-A session replay is **not** a video recording. It’s a video-like reproduction of a user session, built using the [rrweb recording library](https://www.rrweb.io/). Replays are created from snapshots of your web application’s DOM state (the browser’s in-memory representation of HTML). When each snapshot is played back, you will see a video-like recording of what the user did throughout their entire session. The user session includes any pageloads, refreshes, and navigations that happened while the user was on your site.
-
-![Session Replay User Interface](./img/session-replay-what-is-a-replay.png)
-
-The start of a session replay recording can be triggered by:
-
-- A user session being part of a sampling rate, as controlled by [`replaysSessionSampleRate`](/platforms/javascript/session-replay/#sampling). (When a user loads a page, a decision is made whether to sample it or not.)
-- An error occurring during a session that’s not being recorded. The session is then recorded based on [`replaysOnErrorSampleRate`](/platforms/javascript/session-replay/#sampling).
-- Manually calling the [`replay.start()`](/platforms/javascript/session-replay/understanding-sessions/#manually-starting-replay) method.
-
-The end of a session replay recording can be triggered by:
-
-- User inactivity within the tab or page that’s being recorded. (It's considered inactivity when a user doesn’t click or navigate around the site for more than 15 minutes. Mouse scrolls, mouse movements, and keyboard events don’t currently qualify as activity.)
-- A recording reaching the maximum replay duration limit. (Currently, this is 60 minutes.)
-- Manually calling the [`replay.stop()`](/platforms/javascript/session-replay/understanding-sessions/#manually-stopping-replay) method.
-
-<Note>
-
-Unlike [sessions](/product/releases/health/#session) on the **Releases** page, user sessions in Session Replay can span multiple page loads.
-
-</Note>
-
-## Learn More About Session Replay
-
-<PageGrid />
+* [Session Replay for Web](web/)
+* [Session Replay for Mobile - Beta](mobile/)

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

@@ -0,0 +1,88 @@
+---
+title: "Session Replay for Mobile"
+sidebar_order: 20
+description: "Use Session Replay for mobile to get video-like reproductions of user sessions to repro issues faster and understand user impact better."
+---
+
+<Note>
+
+Session Replay for mobile is currently in open beta for all plans except Enterprise. (If you’re on an Enterprise plan, please reach out to your Customer Success Manager for more information).
+
+Beta features are still in progress and may have bugs. We recognize the irony.  If you have any questions, feedback, or would like to report a bug, please open a GitHub issue with a link to a relevant replay ([Android](https://github.com/getsentry/sentry-java/issues/new/choose), [iOS](https://github.com/getsentry/sentry-cocoa/issues/new/choose) and [React Native](https://github.com/getsentry/sentry-react-native/issues/new/choose)).
+
+</Note>
+
+Session Replay allows you to see reproductions of user sessions, which can help you understand what happened before, during, and after an error or performance issue occurred. As you play back each session, you'll be able to see every user interaction in relation to network requests, frontend and backend errors, backend spans, and more.
+
+Replays help you see exactly how the user experience is impacted by errors. Because they're integrated with our Issues product, you'll be able to see session replays connected to error events on the [Issue Details](https://docs.sentry.io/product/issues/issue-details/) page in Sentry. To make sure backend errors are also included in the replay, see our [backend set up instructions](https://docs.sentry.io/product/explore/session-replay/getting-started/#replays-for-backend-errors).
+
+## What is Session Replay?
+
+Session Replay for mobile works by taking snapshots of the view hierarchy as well as a screenshot within the same frame, at the rate of one per second. These screenshots are then compressed into a video file representing a segment of the user’s session. All these small segments are then streamed into Sentry with additional trace identifiers, breadcrumbs, and other useful debugging information to compose the full user session.
+
+The user session (replay) lasts until the user closes the app, the app crashes, the user puts the app in the background for over 30 seconds, or the session reaches 60 minutes in duration. The result is a video playback that can help you reproduce bugs in your mobile app, including hard-to-debug issues related to backend APIs and microservices.
+
+To redact anything potentially sensitive and preserve maximum user privacy, the view hierarchy is used to find the position of controls such as text boxes, images, labels, and buttons. Redaction is done with a block that's drawn over these controls, using the most predominant color of the control.
+
+## 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, and when the user put the app in background or foreground. 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](https://docs.sentry.io/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 Network and Console 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, 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 happen 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.
+
+- **Errors:** All the errors that occurred in the replay (including backend), with links to the corresponding events and [issue(s)](https://docs.sentry.io/product/issues/issue-details/error-issues/), and the impact these issues have had holistically across all users on your application 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)](https://docs.sentry.io/product/sentry-basics/tracing/distributed-tracing/#traces-transactions-and-spans) that happened during the replay.
+
+## SDKs Supported
+
+Session Replay for mobile is currently available for Android, iOS, and React Native SDKs. Support for [Flutter](https://docs.sentry.io/platforms/flutter/) is being tracked on this [GitHub issue](https://github.com/getsentry/sentry-dart/issues/1193).
+
+We recommend updating to the latest, but the miminum versions supported are:
+
+- iOS, [8.31.1](https://github.com/getsentry/sentry-cocoa/releases)
+- Android, [7.12.0](https://github.com/getsentry/sentry-java/releases)
+- React Native, [5.26.0](https://github.com/getsentry/sentry-react-native/releases)
+
+## Frequently Asked Questions
+
+**How do you protect user data?**
+
+Sentry is privacy-focused so protecting user data is always top of mind. That’s why by default, our privacy configuration is very aggressive and redacts all text and images to ensure no sensitive user information is collected. We also provide server-side scrubbing on debugging context to additionally filter on the server as an added precaution.
+
+Additionally, we offer a self-serve deletion capability of individual replays in the UI.
+
+**What is the performance overhead of the Replay package?**
+
+For most mobile applications, the performance overhead of our client SDK will be imperceptible to end-users. In our own testing, the overhead was not noticeable by end-users. However, this testing was not exhaustive and you may discover the recording overhead may negatively impact your web application performance depending on your application complexity.
+
+To reduce the performance overhead, we only take screenshots when something changes on the screen. Our default frame rate is 1 frame (16ms) per second of the main thread time.
+If you experience any performance degradations after installing Session Replay, please open an issue on Github for your respective SDK: [Android](https://github.com/getsentry/sentry-java/issues/new/choose), [iOS](https://github.com/getsentry/sentry-cocoa/issues/new/choose) and [React Native](https://github.com/getsentry/sentry-react-native/issues/new/choose).
+
+**How much does it cost to use Session Replay for mobile?**
+
+Session Replay for mobile is currently in open beta and can be used **free of charge**. At some point in the future, it will becomes a paid solution (similar to [Session Replay for web](https://sentry.io/pricing/)). The exact release date and pricing have yet to be determined.
+
+**Are unhandled exceptions (for example, crashes) available as part of Session Replay for mobile?**
+
+Currently, only handled exceptions will include a replay. We’re actively working on covering replays for crashes and ANRs and plan to support them for mobile in the coming weeks. Please refer to the SDK release notes for updates.
+
+**How does Session Replay for mobile work if my app is offline?**
+
+Session Replay for mobile currently doesn’t work in offline mode. We plan on adding support for at least a few segments leading up to errors and crashes. Please subscribe to this [GitHub issue](https://github.com/getsentry/sentry/issues/68287) for updates.

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

@@ -0,0 +1,42 @@
+---
+title: "Session Replay for Web"
+sidebar_order: 10
+description: "Learn how the Session Replay feature can get video-like reproductions of user interactions so you can create a better web experience for your users."
+---
+
+<Include name="feature-stage-beta-session-replay.mdx" />
+
+Session Replay allows you to see video-like reproductions of user sessions which can help you understand what happened before, during, and after an error or performance issue occurred. You'll be able to gain deeper debugging context into issues so that you can reproduce and resolve problems faster without the guesswork. As you play back each session, you'll be able to see every user interaction in relation to network requests, DOM events, and console messages. It’s effectively like having [DevTools](https://developer.chrome.com/docs/devtools/overview/) active in your production user sessions.
+
+Replays are integrated with other parts of the Sentry product so you can see how the user experience is impacted by errors and slow transactions. You'll see session replays associated with error events on the [Issue Details](/product/issues/issue-details/) page, and those associated with slow transactions on the [Transaction Summary](/product/performance/transaction-summary/) page. For [backend error replays](/product/explore/session-replay/getting-started#replays-for-backend-errors), any contributing backend errors will be included in the replay's timeline, [breadcrumbs](https://docs.sentry.io/product/issues/issue-details/breadcrumbs/), and errors.
+
+![Session Replay User Interface](./img/session-replay.png)
+
+## What Is a Session Replay?
+
+A session replay is **not** a video recording. It’s a video-like reproduction of a user session, built using the [rrweb recording library](https://www.rrweb.io/). Replays are created from snapshots of your web application’s DOM state (the browser’s in-memory representation of HTML). When each snapshot is played back, you will see a video-like recording of what the user did throughout their entire session. The user session includes any pageloads, refreshes, and navigations that happened while the user was on your site.
+
+![Session Replay User Interface](./img/session-replay-what-is-a-replay.png)
+
+The start of a session replay recording can be triggered by:
+
+- A user session being part of a sampling rate, as controlled by [`replaysSessionSampleRate`](/platforms/javascript/session-replay/#sampling). (When a user loads a page, a decision is made whether to sample it or not.)
+- An error occurring during a session that’s not being recorded. The session is then recorded based on [`replaysOnErrorSampleRate`](/platforms/javascript/session-replay/#sampling).
+- Manually calling the [`replay.start()`](/platforms/javascript/session-replay/understanding-sessions/#manually-starting-replay) method.
+
+The end of a session replay recording can be triggered by:
+
+- User inactivity within the tab or page that’s being recorded. (It's considered inactivity when a user doesn’t click or navigate around the site for more than 15 minutes. Mouse scrolls, mouse movements, and keyboard events don’t currently qualify as activity.)
+- User closing the tab or page that's being recorded.
+- A recording reaching the maximum replay duration limit. (Currently, this is 60 minutes.)
+- Manually calling the [`replay.stop()`](/platforms/javascript/session-replay/understanding-sessions/#manually-stopping-replay) method.
+
+<Note>
+
+Unlike [sessions](/product/releases/health/#session) on the **Releases** page, user sessions in Session Replay can span multiple page loads.
+
+</Note>
+
+## Learn More About Session Replay
+
+<PageGrid />