session replay product docs

src/docs/product/issues/issue-details/error-issues/index.mdx

@@ -79,6 +79,8 @@ It's the most important piece of information that the Sentry grouping algorithm
 
 You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging.
 
+If you’ve enabled [Session Replay](/product/session-replay/), you’ll see a replay preview under Breadcrumbs if there’s one associated with the frontend error event you’re viewing. This will lead you to the [Replay Details](/product/session-replay/replay-details/) page when you click it.
+
 ## Trace Details
 
 [Tracing](/product/sentry-basics/tracing/distributed-tracing/) augments your existing error data by capturing interactions between your software systems. In the "Trace Details" section, you can click the "Search by Trace" button to see all the events that share the same trace ID.

src/docs/product/issues/issue-details/index.mdx

@@ -69,6 +69,8 @@ It's the most important piece of information that the Sentry grouping algorithm
 
 You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging.
 
+If you’ve enabled [Session Replay](/product/session-replay/), you’ll see a replay preview under Breadcrumbs if there’s one associated with the event you’re viewing. This will lead you to the [Replay Details](/product/session-replay/replay-details/) page when you click it.
+
 ## Trace Details
 
 [Tracing](/product/sentry-basics/tracing/distributed-tracing/) augments your existing error data by capturing interactions between your software systems. In the "Trace Details" section, you can click the "Search by Trace" button to see all the events that share the same trace ID.
@@ -84,3 +86,4 @@ This page displays the "Details" tab when it first opens, but several other tabs
 - **All Events** - A list of all the error events included in the issue.
 - **Merged Issues** - A list of error issues that have been merged with this one.
 - **Similar Issues** - A list of error issues that have a similar stack trace [that you can merge](/product/data-management-settings/event-grouping/merging-issues/).
+- **Replays** – A list of [replays](/product/session-replay/) tied to error events included in the issue.

src/docs/product/performance/transaction-summary.mdx

@@ -141,6 +141,10 @@ In the example below, the self time of each span is highlighted by the darker ar
 
 Spans with the same operation and description are grouped together into a single span group. Some processing is done to group similar spans together. If you find that the span grouping is not ideal, you can change this by making sure the spans you want grouped together have the same operation and description.
 
+### Replays
+
+The Replays tab displays a list of replays where the transaction you’re viewing had occurred. Go directly to [Replay Details](/product/session-replay/replay-details/) for any replay and see how a slow transaction impacted the user experience. Note: you must have [Session Replay](/product/session-replay/) enabled to see this tab.
+
 ## Additional Actions
 
 ### Starring Important Transactions {#starring-key-transactions}

src/docs/product/session-replay/getting-started.mdx

@@ -0,0 +1,27 @@
+---
+title: "Set Up"
+sidebar_order: 6
+description: "Get started with Sentry's Session Replay, which allows you to visualize a video-like reproduction of a user's session."
+---
+
+<Include name="beta-note-session-replay.mdx" />
+
+With Session Replay, Sentry users can get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session and getting additional information such as what would appear in the developer tools of a client browser.
+
+To get instructions for how to set it up and start sending replays, click a link for one of the supported SDKs below.
+
+## Supported SDKs
+
+Session Replay supports all browser-based JavaScript applications. It’s built to work with `@sentry/browser` and our browser framework SDKs:
+
+- [Vanilla JavaScript](/platforms/javascript/session-replay/)
+- [Angular](/platforms/javascript/guides/angular/session-replay/)
+- [Capacitor](/platforms/javascript/guides/capacitor/session-replay/)
+- [Electron](/platforms/javascript/guides/electron/session-replay/)
+- [Ember](/platforms/javascript/guides/ember/session-replay/)
+- [Gatsby](/platforms/javascript/guides/gatsby/session-replay/)
+- [Next.js](/platforms/javascript/guides/nextjs/session-replay/)
+- [React](/platforms/javascript/guides/react/session-replay/)
+- [Remix](/platforms/javascript/guides/remix/session-replay/)
+- [Svelte](/platforms/javascript/guides/svelte/session-replay/)
+- [Vue](/platforms/javascript/guides/vue/session-replay/)

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

@@ -4,9 +4,35 @@ sidebar_order: 3
 description: "Learn about Sentry's Session Replay, which provides video-like reproductions of user interactions on a site or web app."
 ---
 
-
 <Include name="beta-note-session-replay.mdx" />
 
+Session Replay shows you a video-like reproduction of your user sessions so you can see what happened before, during, and after an error or performance issue occurred. With Session Replay, you gain deeper debugging context into any issue so that you can reproduce problems and resolve them faster without the guesswork. As you play back each session, you can 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 areas of the Sentry product so you can see how the user experience is impacted by errors and slow transactions. Replays associated with error events will appear on the [Issue Details](/product/issues/issue-details/) page, while those showing slow transactions will appear on the [Transaction Summary](/product/performance/transaction-summary/) page.
+
+## What is a Replay?
+
+A 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). A user session can span multiple page loads, including page refreshes.
+
+The start of a 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/configuration/#start-and-stop-recording) method
+
+The end of a replay recording can be triggered by:
+
+- User inactivity within the tab/page that’s being recorded. (If a user doesn’t click or navigate around the site for more than 5 minutes. Mouse scrolls, mouse movements, and keyboard events don’t currently qualify as activity.)
+- A recording reaching the maximum replay duration limit (currently 60 minutes)
+- Manually calling the [replay.stop()](/platforms/javascript/session-replay/configuration/#start-and-stop-recording) method
+
+
+<Note>
+
+Unlike [sessions](/product/releases/health/#session) on the **Releases** page, user sessions in Session Replay can span multiple page loads.
+
+</Note>
 
-Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. **Session Replay** provides a video-like reproduction of user interactions on a site or web app. All user interactions — including page visits, mouse movements, clicks, and scrolls — are captured, helping developers connect the dots between a known issue and how a user experienced it in the UI.
+## Learn More
 
+<PageGrid />

src/docs/product/session-replay/performance-overhead.mdx

@@ -0,0 +1,16 @@
+---
+title: "Performance Overhead"
+sidebar_order: 48
+description: "Session Replay SDK performance overhead."
+---
+
+<Include name="beta-note-session-replay.mdx" />
+
+Sentry’s Session Replay SDK takes several steps to avoid negatively impacting the performance of the page on which it’s running:
+
+- At the time of publishing this document, the Session Replay plugin is an additional ~36KB gzipped. In our own research, this is among the smallest Session Replay SDKs available.
+- The Session Replay SDK works by snapshotting the web page’s Document Object Model (DOM) and transmitting its content to Sentry’s servers. To minimize the amount of bytes transferred, multiple strategies are employed:
+    - Once the initial DOM tree is snapshotted, the SDK records and transmits *changes* to the DOM rather than snapshotting the entire tree again. This significantly reduces the amount of bytes transferred.
+    - DOM content itself is gzip compressed client-side before transmission over HTTP. The compression operation is executed in a background thread using a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers), which means the browser’s UI thread is unaffected.
+
+Sentry’s event ingestion infrastructure uses [distributed Points-of-Presence (PoPs)](https://blog.sentry.io/2022/03/31/sentry-points-of-presence-how-we-built-a-distributed-ingestion/) which place ingestion servers around the world and close to your users. When a Session Replay event is transmitted, the user’s browser connects and transmits the event payload to the closest PoP available for their region. This greatly reduces end-to-end latency and minimizes the amount of networking overhead placed on the browser.

src/docs/product/session-replay/protecting-user-privacy.mdx

@@ -0,0 +1,29 @@
+---
+title: "Protecting User Privacy"
+sidebar_order: 96
+description: "Protecting user privacy with Session Replay."
+---
+
+<Include name="beta-note-session-replay.mdx" />
+
+## HTML Content
+
+To reduce the risk of Potentially Identifiable Information (PII) being ingested and stored on our servers, Sentry’s Session Replay SDK is designed to be “private by default”. The Session Replay SDK in its default configuration redacts **all** HTML text nodes and images before it leaves the browser. During playback, redacted text nodes and images are clearly denoted using asterisks and static gray boxes, respectively.
+
+To see unredacted HTML content – for example, your static navigation items, menus, and links – you may additionally opt-in static HTML elements that are known not to contain PII by denoting those elements with `$classname`. It’s strongly recommended not to opt-in any known, user-generated content.
+
+![Replay PII Scrubbing example](Replay-PIIScrubbing.png)
+
+Alternatively, you can turn off the default privacy configuration, which will cause all text nodes and images to be transferred unredacted. This is only recommended when working with static content websites known not to contain any sensitive user information. Note that when using this configuration option, failure to carefully identify HTML elements containing PII means risking sensitive content leaving the user’s browser.
+
+To learn more, including available configuration options, see [Session Replay Privacy](/platforms/javascript/session-replay/privacy/).
+
+## User Input
+
+In addition to HTML content, Session Replay records key user interactions like mouse movements, mouse clicks, and keyboard presses. By default, all user keypresses are redacted and replaced with asterisks. Captured mouse movements are limited to source and target destinations (for example, where the mouse came from and where it went, not the exact path). A low-fidelity approximation of this movement is recreated during playback.
+
+## Breadcrumbs and other Metadata
+
+To assist in debugging, Session Replay captures additional metadata like console.log entries, network requests, browser, operating system, and more. By default, Sentry scans this data on the server and automatically removes potentially sensitive strings like credit card numbers, social security numbers, API tokens, and more. This same process is applied to other Sentry event types like Errors and Transactions.
+
+To learn more see [PII and Data Scrubbing](/product/relay/pii-and-data-scrubbing/).

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

@@ -0,0 +1,55 @@
+---
+title: "Replay Details"
+sidebar_order: 24
+description: "Session Replay Details."
+---
+
+<Include name="beta-note-session-replay.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 console messages, DOM events, and network requests. 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:
+
+- **Replay Player:** Video-like reproduction of a user session created from DOM snapshots. This is where you can visualize exactly what actions the user took during a user session, and how the website behaved within this specific user’s environment, including browser, 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 replace all text nodes and user input with asterisks (*), and to remove media elements. See all privacy configuration options [here](/platforms/javascript/session-replay/privacy/).
+
+
+- **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place, specifically: user clicks, user inputs, [page navigations, page loads](/product/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and the [Largest Contentful Paint (LCP)](/product/performance/web-vitals/#largest-contentful-paint-lcp) web vital. 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. 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 top of the **Replay Details** page that illustrates where significant events (such as errors 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.
+
+
+- **Console:** A list of all messages that were emitted to the web console. This includes debugging information included in the web application, as well as browser-generated messages to the developer. As the video plays, there’s a visual indicator that tracks through the table of console messages, highlighting which messages happened prior to, or next to this point in the video. You can also click the timestamp on the far right of the console message to bring yourself to that point in the replay player.
+
+
+- **Network:** A list of all network requests that were initiated by the page 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.
+
+
+- **DOM Events:** DOM event breadcrumbs, like user clicks, are augmented with surrounding HTML source code to help users understand which event was targeted. As the video plays, there’s a visual indicator that tracks through the table of DOM events, highlighting which events happened prior to, or next to this point in the video. You can also click the timestamp on the far right of each DOM event to bring yourself to that point in the replay player.
+
+
+- **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.
+
+
+- **Issues:** See the [issue(s)](/product/issues/issue-details/error-issues/) that correspond to frontend errors that occurred in the replay and the impact these issues have had holistically across *all users* on your application.
+
+
+- **Memory:** 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.
+
+## 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.
+
+## Delete Replays
+
+Delete an individual replay by clicking the “Delete” button in the top-right corner of **the Replay Details** page. If you need to bulk delete replays, contact [[email protected]](mailto:[email protected]). You can’t delete replays that are in-progress.
+
+## 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.
+
+## Retention
+
+Replays are retained for 90 days in sentry.io (the same retention period as other event types, such as Errors and Transactions). The retention period is not configurable.