feat(replay): session replay updates to add AI summary for web (#14794)

**Waiting to merge when officially goes open beta**

closes https://linear.app/getsentry/issue/REPLAY-528/add-docs

## DESCRIBE YOUR PR
Updating the replay details and web replay pages to add in AI summaries
info.

Details page:
https://sentry-docs-git-session-replay-ai-summary-ea.sentry.dev/product/explore/session-replay/replay-details/

Replay for web:
https://sentry-docs-git-session-replay-ai-summary-ea.sentry.dev/product/explore/session-replay/web/

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [] Other deadline: 
- [x] None: Waiting on official EA (open beta) release
## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

---------

Co-authored-by: Shannon Anahata <[email protected]>
Co-authored-by: Michelle Zhang <[email protected]>

Author: 3 people

docs/product/explore/session-replay/img/replay-details-share.png

@@ -6,61 +6,123 @@ 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, 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:
+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.
 
 ![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 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/).
+## Components Overview
 
-* **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.
-  - **Navigations, Page Loads, & View Changes:** [Learn more about spans](/product/sentry-basics/distributed-tracing/).
-  - **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).
+### Replay Player
 
-  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.  
+The video-like reproduction of a user session allows you to visualize exactly what actions the user took during their session and how the application behaved within their specific environment, including device, OS, latency, settings, and more. Most importantly, you can see which actions led to an error, which takes the guesswork out of debugging.
 
-- **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.
+<Alert>
 
-* **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.
+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/).
 
-- **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).
+</Alert>
 
-- **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.
+### AI-Powered Replay Summary [Web Only]
 
-- **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.
+<Alert>
+This feature is currently in Beta, which means that this feature is still in-progress and may have bugs. We recognize the irony.
+</Alert>
 
-- **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.
+Sentry now provides **AI-powered replay summaries** that automatically analyze what happened during a user session and give you a short play-by-play to help debug issues faster. Rather than watch an entire replay, you can now get a quick overview of what happened and focus on the specific interactions that led to the issue. This tab includes:
 
-- **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.
+- **AI Summary:** An LLM-powered description of the user's journey
+- **Chapters:** Each chapter summarizes related sets of breadcrumbs, network requests, and console logs, ordered by time range. Click a chapter to expand its contents and see the underlying events. Red chapters highlight errors, pink chapters highlight feedback
 
+### Breadcrumbs
 
-## Share Replays
+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.
 
-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.
+**Both web and mobile replays include:**
+- **Custom Breadcrumbs:** Learn more about configuring [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs)
 
-![Highlight the button to share a replay](./img/replay-details-share.png)
+**Web-specific breadcrumbs include:**
+- **User Clicks:** including [rage clicks](/product/issues/issue-details/replay-issues/rage-clicks/) and [dead clicks](/product/issues/issue-details/replay-issues/rage-clicks/#detection-criteria)
+- **Navigations and Page Loads:** [Learn more about spans](/product/sentry-basics/distributed-tracing/)
+- **Web Vitals:** and an overall performance score [Learn more](/product/insights/web-vitals/)
+
+**Mobile-specific breadcrumbs include:**
+- Backgrounding and foregrounding
+- Network connectivity changes
+- Battery usage
+
+<Alert>
+
+Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not a one-to-one representation of 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.
+
+</Alert>
+
+### Timeline
+
+The timeline 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, and in Android, logs from [Logcat](/platforms/android/integrations/logcat/) and [Timber](/platforms/android/integrations/timber/) are also supported.
+
+### Network
+
+This tab contains 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.
+
+<Alert>
+
+If configured for web, Sentry can also show the actual [HTTP request body and headers](/platform-redirect/?next=/session-replay/configuration/#network-details).
+
+</Alert>
+
+### 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
 
-## Delete Replays
+Connects all the [trace(s)](/product/sentry-basics/tracing/distributed-tracing/#traces-transactions-and-spans) that happened during the replay.
 
-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.
+<Alert>
 
-## Tags
+Due to transaction sampling, this view may be missing traces.
 
-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.
+</Alert>
 
-![Highlight the button to share a replay](./img/replay-details-tags.png)
+### Memory [Web Only]
 
-## Retention
+The view shows a heap size chart displaying the total amount of memory being used by JavaScript objects.
+
+<Alert>
+
+This view is only available when the replay was recorded on a [Chromium-based](https://www.chromium.org/chromium-projects/) browser.
+
+</Alert>
+
+### 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.
+
+![Tags tab on Replay Details.](./img/replay-details-tags.png)
+
+## Replay Actions
+
+### 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 cannot delete replays that are in progress. **Deleting replays does not affect your quota.**
+
+## Retention and Filtering
+
+### Retention
 
 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
+### 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.
 
@@ -69,4 +131,8 @@ If you've chosen not to capture certain errors by applying any of the below inbo
 - 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.
+<Alert>
+
+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.
+
+</Alert>

docs/product/explore/session-replay/img/replay-details-tags.png

@@ -12,9 +12,9 @@ You can search for or browse replays of user sessions on the **Replay** page, wh
 - **Start Time**: How long ago the replay was triggered. (Replays can appear here while the recording is still in progress.)
 - **Duration**: The length of the replay. (Recordings can range from 1 second to 60 minutes.)
 - **Errors:** The number of frontend errors identified by Sentry, as encountered in the replay. (Sometimes the error count reported is different from the actual errors captured. Read more in [Error Linking](/platform-redirect/?next=/session-replay/#error-linking).)
-- **Activity**: The activity level as determined by the number of errors encountered, their duration, and the number of UI events.
-- **Dead Clicks**: User clicks on `a` and `button` tags that do not result in any page activity after 7 seconds (i.e. no HTML was added, removed, or updated; no visual changes were observed in the page).
-- **Rage Clicks**: Five or more clicks on a dead element (it exhibits no page activity after 7 seconds.) Rage clicks are a subset of dead clicks.
+- **Activity**: The activity level as determined by the number of errors encountered, their duration, and the number of UI events
+- **Dead Clicks**: User clicks on `a` and `button` tags that do not result in any page activity after 7 seconds (i.e. no HTML was added, removed, or updated; no visual changes were observed in the page)
+- **Rage Clicks**: Five or more clicks on a dead element (it exhibits no page activity after 7 seconds.) Rage clicks are a subset of dead clicks
 
 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.
 

docs/product/explore/session-replay/img/replay-details.png

@@ -4,15 +4,17 @@ sidebar_order: 10
 description: "Learn about Session Replay and its video-like reproductions of user interactions, which can help you see when users are frustrated and build a better web experience."
 ---
 
-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.
+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. 
+
+Session Replay for web now includes an AI-powered replay summary that automatically analyzes what happened during a user session, and gives a short play-by-play to help debug issues faster. Rather than watch an entire replay, you can now get a quick overview of what happened and focus on the specific interactions that led to the issue. **Note: This feature is currently in Beta, which means that this feature is still in-progress and may have bugs. We recognize the irony.**
 
 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/insights/overview/transaction-summary/) page. For [backend error replays](/product/explore/session-replay/web/getting-started/#replays-for-backend-errors), any contributing backend errors will be included in the replay's timeline, [breadcrumbs](/product/issues/issue-details/breadcrumbs/), and errors.
 
 ![Session Replay User Interface](./img/session-replay.png)
 
 ## What is 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.
+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'll 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)