From 4e592f9dcc5191934cec4e889c33d70a60444b53 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 Aug 2025 15:01:26 -0700 Subject: [PATCH 01/13] ref(replay): Refactor pages inside the Product Walkthrough > Replay area --- docs/product/explore/session-replay/index.mdx | 7 +- .../explore/session-replay/mobile/index.mdx | 45 +++++------ .../explore/session-replay/replay-details.mdx | 76 +++++++++++++++++++ .../{web => }/replay-page-and-filters.mdx | 2 +- .../session-replay/web/getting-started.mdx | 65 ---------------- .../explore/session-replay/web/index.mdx | 56 +++++++++++++- .../session-replay/web/replay-details.mdx | 63 --------------- redirects.js | 12 ++- 8 files changed, 160 insertions(+), 166 deletions(-) create mode 100644 docs/product/explore/session-replay/replay-details.mdx rename docs/product/explore/session-replay/{web => }/replay-page-and-filters.mdx (99%) delete mode 100644 docs/product/explore/session-replay/web/getting-started.mdx delete mode 100644 docs/product/explore/session-replay/web/replay-details.mdx diff --git a/docs/product/explore/session-replay/index.mdx b/docs/product/explore/session-replay/index.mdx index 821a7e2113451..2f8f67e325fb4 100644 --- a/docs/product/explore/session-replay/index.mdx +++ b/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/) + diff --git a/docs/product/explore/session-replay/mobile/index.mdx b/docs/product/explore/session-replay/mobile/index.mdx index 081ec9240328b..826a05615965b 100644 --- a/docs/product/explore/session-replay/mobile/index.mdx +++ b/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?** diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx new file mode 100644 index 0000000000000..bd5f6175dd9ff --- /dev/null +++ b/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." +--- + + + +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. diff --git a/docs/product/explore/session-replay/web/replay-page-and-filters.mdx b/docs/product/explore/session-replay/replay-page-and-filters.mdx similarity index 99% rename from docs/product/explore/session-replay/web/replay-page-and-filters.mdx rename to docs/product/explore/session-replay/replay-page-and-filters.mdx index 46523d3f852fa..2712e01c95232 100644 --- a/docs/product/explore/session-replay/web/replay-page-and-filters.mdx +++ b/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." --- diff --git a/docs/product/explore/session-replay/web/getting-started.mdx b/docs/product/explore/session-replay/web/getting-started.mdx deleted file mode 100644 index f7c9a755b9e18..0000000000000 --- a/docs/product/explore/session-replay/web/getting-started.mdx +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: "Set Up" -sidebar_order: 6 -description: "Learn which SDKs support Session Replay and start sending replays to Sentry." ---- - - - -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 applications. -This includes static websites, single-page-aplications and also server-side-rendered, that includes frameworks such as: -[Django](/platforms/python/integrations/django/), -[Spring](/platforms/java/guides/spring-boot/), -[ASP.NET](/platforms/dotnet/guides/aspnetcore/), -[Laravel](/platforms/php/guides/laravel/), -[Express](/platforms/javascript/guides/express/) and -[Rails](/platforms/ruby/guides/rails/). -If you don't use `npm` or `yarn`, you can use [our Loader `script` tag](/platforms/javascript/install/loader/) on your main HTML template. - -The Sentry SDK that records the replay runs on the client's browser, and it’s built-in to `@sentry/browser` and our browser framework SDKs: - -- [Vanilla JavaScript](/platforms/javascript/session-replay/) -- [Angular](/platforms/javascript/guides/angular/session-replay/) -- [Astro](/platforms/javascript/guides/astro/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/) -- [SvelteKit](/platforms/javascript/guides/sveltekit/session-replay/) -- [Vue](/platforms/javascript/guides/vue/session-replay/) - -## 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: - -```javascript -Sentry.init({ - tracePropagationTargets: [ - "third-party-site.com", - /^https:\/\/yourserver\.io\/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) diff --git a/docs/product/explore/session-replay/web/index.mdx b/docs/product/explore/session-replay/web/index.mdx index 0b3230193360f..7638966d95e5e 100644 --- a/docs/product/explore/session-replay/web/index.mdx +++ b/docs/product/explore/session-replay/web/index.mdx @@ -10,7 +10,7 @@ Replays are integrated with other parts of the Sentry product so you can see how ![Session Replay User Interface](./img/session-replay.png) -## What Is a Session Replay? +## 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. @@ -35,6 +35,56 @@ Unlike [sessions](/product/releases/health/#session) on the **Releases** page, u -## Learn More About Session Replay +## 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: +[Django](/platforms/python/integrations/django/), +[Spring](/platforms/java/guides/spring-boot/), +[ASP.NET](/platforms/dotnet/guides/aspnetcore/), +[Laravel](/platforms/php/guides/laravel/), +[Express](/platforms/javascript/guides/express/) and +[Rails](/platforms/ruby/guides/rails/). +If you don't use `npm` or `yarn`, you can use [our Loader `script` tag](/platforms/javascript/install/loader/) on your main HTML template. + +The Sentry SDK that records the replay runs on the client's browser, and it’s built-in to `@sentry/browser` and our browser framework SDKs: + +- [Vanilla JavaScript](/platforms/javascript/session-replay/) +- [Angular](/platforms/javascript/guides/angular/session-replay/) +- [Astro](/platforms/javascript/guides/astro/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/) +- [SvelteKit](/platforms/javascript/guides/sveltekit/session-replay/) +- [Vue](/platforms/javascript/guides/vue/session-replay/) + +## 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: + +```javascript +Sentry.init({ + tracePropagationTargets: [ + "third-party-site.com", + /^https:\/\/yourserver\.io\/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) diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx deleted file mode 100644 index 02189d6e0e495..0000000000000 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: "Replay Details" -sidebar_order: 24 -description: "Learn more about how information is organized on the Replay Details page and how to share and delete replays." ---- - - - -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: - -![Session Replay details user interface](./img/replay-details.png) - -- **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 (including rage and dead clicks), user inputs, [page navigations, page loads](/product/insights/overview/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [Web Vitals](/product/insights/web-vitals/). Web Vitals are augmented with the selector to help users identify which elements are affecting their Web Vital scores. User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. 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. - - To learn more about how custom breadcrumbs are rendered, [read the docs here](/platforms/javascript/session-replay/configuration/#custom-breadcrumbs). - -- **Timeline:** This is the section at the bottom of the **Replay Details** page that illustrates where significant events (such as errors, rage clicks, 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. - -* **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. If configured, 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, with links to the corresponding events and [issue(s)](/product/issues/issue-details/error-issues/), and 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:** 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. - -![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. diff --git a/redirects.js b/redirects.js index 08d0a4d189d79..97b417de902f0 100644 --- a/redirects.js +++ b/redirects.js @@ -263,8 +263,16 @@ const userDocsRedirects = [ destination: '/organization/integrations/feature-flag/launchdarkly/', }, { - source: '/product/explore/session-replay/replay-details/', - destination: '/product/explore/session-replay/web/replay-details/', + source: '/product/explore/session-replay/web/getting-started/', + destination: '/product/explore/session-replay/web/', + }, + { + source: '/product/explore/session-replay/web/replay-page-and-filters/', + destination: '/product/explore/session-replay/replay-page-and-filters/', + }, + { + source: '/product/explore/session-replay/web/replay-details/', + destination: '/product/explore/session-replay/replay-details/', }, { source: '/platforms/javascript/guides/nextjs/sourcemaps/uploading/', From 6a0ba48ee6d815adac6636680a7d706bdc824e61 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 Aug 2025 15:13:47 -0700 Subject: [PATCH 02/13] move imgs to match --- .../{web => }/img/replay-details-share.png | Bin .../{web => }/img/replay-details-tags.png | Bin .../session-replay/{web => }/img/replay-details.png | Bin .../{web => }/img/replay-index-delete-all.png | Bin .../{web => }/img/replay-index-delete-visible.png | Bin .../{web => }/img/replay-index-filtering.png | Bin docs/product/explore/session-replay/index.mdx | 2 +- .../session-replay/replay-page-and-filters.mdx | 4 ++-- src/middleware.ts | 4 ++-- 9 files changed, 5 insertions(+), 5 deletions(-) rename docs/product/explore/session-replay/{web => }/img/replay-details-share.png (100%) rename docs/product/explore/session-replay/{web => }/img/replay-details-tags.png (100%) rename docs/product/explore/session-replay/{web => }/img/replay-details.png (100%) rename docs/product/explore/session-replay/{web => }/img/replay-index-delete-all.png (100%) rename docs/product/explore/session-replay/{web => }/img/replay-index-delete-visible.png (100%) rename docs/product/explore/session-replay/{web => }/img/replay-index-filtering.png (100%) diff --git a/docs/product/explore/session-replay/web/img/replay-details-share.png b/docs/product/explore/session-replay/img/replay-details-share.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-details-share.png rename to docs/product/explore/session-replay/img/replay-details-share.png diff --git a/docs/product/explore/session-replay/web/img/replay-details-tags.png b/docs/product/explore/session-replay/img/replay-details-tags.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-details-tags.png rename to docs/product/explore/session-replay/img/replay-details-tags.png diff --git a/docs/product/explore/session-replay/web/img/replay-details.png b/docs/product/explore/session-replay/img/replay-details.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-details.png rename to docs/product/explore/session-replay/img/replay-details.png diff --git a/docs/product/explore/session-replay/web/img/replay-index-delete-all.png b/docs/product/explore/session-replay/img/replay-index-delete-all.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-index-delete-all.png rename to docs/product/explore/session-replay/img/replay-index-delete-all.png diff --git a/docs/product/explore/session-replay/web/img/replay-index-delete-visible.png b/docs/product/explore/session-replay/img/replay-index-delete-visible.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-index-delete-visible.png rename to docs/product/explore/session-replay/img/replay-index-delete-visible.png diff --git a/docs/product/explore/session-replay/web/img/replay-index-filtering.png b/docs/product/explore/session-replay/img/replay-index-filtering.png similarity index 100% rename from docs/product/explore/session-replay/web/img/replay-index-filtering.png rename to docs/product/explore/session-replay/img/replay-index-filtering.png diff --git a/docs/product/explore/session-replay/index.mdx b/docs/product/explore/session-replay/index.mdx index 2f8f67e325fb4..12e0b11132749 100644 --- a/docs/product/explore/session-replay/index.mdx +++ b/docs/product/explore/session-replay/index.mdx @@ -8,6 +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/#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/#supported-sdks). diff --git a/docs/product/explore/session-replay/replay-page-and-filters.mdx b/docs/product/explore/session-replay/replay-page-and-filters.mdx index 2712e01c95232..4343f52bc69bc 100644 --- a/docs/product/explore/session-replay/replay-page-and-filters.mdx +++ b/docs/product/explore/session-replay/replay-page-and-filters.mdx @@ -40,8 +40,8 @@ To delete a [single replay](/product/explore/session-replay/web/replay-details/# To delete multiple replays at once, go to the **Replay** page and use the checkboxes next to each replay row to select the ones you want to delete. Then, click the "Delete" button to remove the selected replays. Deleting a large number of replays takes some time to complete. If a job is running you will see a banner at the top of the Replay list and a link to 'Track Progress'. You can also visit Settings > Project > MyProject > Replays to see the history of previous deletion jobs. -![](img/replay-index-delete-visible.png) +![](./img/replay-index-delete-visible.png) Alternatively, you can delete all replays that match a search query by clicking "Select all" at the top of the results list. This selects every replay matching the current filters, not just those visible on the page. -![](img/replay-index-delete-all.png) +![](./img/replay-index-delete-all.png) diff --git a/src/middleware.ts b/src/middleware.ts index 091da5f79acba..c0d187ca35c90 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3327,8 +3327,8 @@ const USER_DOCS_REDIRECTS: Redirect[] = [ to: '/product/explore/session-replay/', }, { - from: '/product/explore/session-replay/replay-page-and-filters/', - to: '/product/explore/session-replay/web/replay-page-and-filters/', + from: '/product/explore/session-replay/web/replay-page-and-filters/', + to: '/product/explore/session-replay/replay-page-and-filters/', }, { from: '/product/teams/roles/', From c02c162b038b5dbaa8abd615c9f359aacbf40ea0 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 Aug 2025 15:18:20 -0700 Subject: [PATCH 03/13] fixup and prefer middleware.ts for simple redirects --- redirects.js | 25 +------------------------ src/middleware.ts | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/redirects.js b/redirects.js index 97b417de902f0..8e810b8d3aa2b 100644 --- a/redirects.js +++ b/redirects.js @@ -246,34 +246,11 @@ const userDocsRedirects = [ source: '/product/dev-toolbar/:path*', destination: '/product/sentry-toolbar/:path*', }, - { - source: '/product/explore/session-replay/hydration-errors/', - destination: '/product/issues/issue-details/replay-issues/hydration-error/', - }, - { - source: '/product/explore/session-replay/privacy/', - destination: '/security-legal-pii/scrubbing/protecting-user-privacy/', - }, - { - source: '/product/explore/session-replay/rage-dead-clicks/', - destination: '/product/issues/issue-details/replay-issues/rage-clicks/', - }, + { source: '/organization/integrations/launchdarkly/', destination: '/organization/integrations/feature-flag/launchdarkly/', }, - { - source: '/product/explore/session-replay/web/getting-started/', - destination: '/product/explore/session-replay/web/', - }, - { - source: '/product/explore/session-replay/web/replay-page-and-filters/', - destination: '/product/explore/session-replay/replay-page-and-filters/', - }, - { - source: '/product/explore/session-replay/web/replay-details/', - destination: '/product/explore/session-replay/replay-details/', - }, { source: '/platforms/javascript/guides/nextjs/sourcemaps/uploading/', destination: '/platforms/javascript/guides/nextjs/sourcemaps/', diff --git a/src/middleware.ts b/src/middleware.ts index c0d187ca35c90..d5403b02e71a5 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3326,10 +3326,30 @@ const USER_DOCS_REDIRECTS: Redirect[] = [ from: '/product/explore/session-replay/getting-started/', to: '/product/explore/session-replay/', }, + { + from: '/product/explore/session-replay/web/getting-started/', + to: '/product/explore/session-replay/web/', + }, { from: '/product/explore/session-replay/web/replay-page-and-filters/', to: '/product/explore/session-replay/replay-page-and-filters/', }, + { + from: '/product/explore/session-replay/web/replay-details/', + to: '/product/explore/session-replay/replay-details/', + }, + { + from: '/product/explore/session-replay/hydration-errors/', + to: '/product/issues/issue-details/replay-issues/hydration-error/', + }, + { + from: '/product/explore/session-replay/rage-dead-clicks/', + to: '/product/issues/issue-details/replay-issues/rage-clicks/', + }, + { + from: '/product/explore/session-replay/privacy/', + to: '/security-legal-pii/scrubbing/protecting-user-privacy/', + }, { from: '/product/teams/roles/', to: '/organization/membership/#team-level-roles', From 9b7505edfdb16eb564fc396775adc4c38526c748 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 Aug 2025 15:32:59 -0700 Subject: [PATCH 04/13] impove links to not be platform specific --- docs/product/explore/session-replay/replay-details.mdx | 8 ++++---- .../explore/session-replay/replay-page-and-filters.mdx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index bd5f6175dd9ff..0566038baf667 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -11,7 +11,7 @@ Every replay has a detailed view that contains the embedded video player and ric ![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/). + - 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: @@ -23,15 +23,15 @@ Specifically: - [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). + - To learn more about how custom breadcrumbs are rendered, [read the docs here](/platform-redirect/?next=/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. +* **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. -- **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). +- **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). - **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. diff --git a/docs/product/explore/session-replay/replay-page-and-filters.mdx b/docs/product/explore/session-replay/replay-page-and-filters.mdx index 4343f52bc69bc..54c1cb71aed9d 100644 --- a/docs/product/explore/session-replay/replay-page-and-filters.mdx +++ b/docs/product/explore/session-replay/replay-page-and-filters.mdx @@ -11,14 +11,14 @@ You can search for or browse replays of user sessions on the **Replay** page, wh - **Project**: The project in which the session was recorded. - **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](/platforms/javascript/session-replay/#error-linking).) +- **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. 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()](/platforms/javascript/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-wide or a project level. Replays can appear on this page while they’re still in progress. You can’t delete in-progress replays. @@ -26,7 +26,7 @@ Each replay will bring users to the [**Replay Details**](/product/explore/sessio ## Filtering Replays -All replays have built-in key fields, and may have [custom tags](/platforms/javascript/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/#replay-properties) 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 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. ![Highlight the Search Filters input on the Session Replay Index Page](./img/replay-index-filtering.png) From df0e20dcb0fa51a100738ca0858368c25f935a8c Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Tue, 26 Aug 2025 14:05:43 -0700 Subject: [PATCH 05/13] improve formatting, copy, of replay details breadcrumbs sub-bullets --- .../explore/session-replay/replay-details.mdx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index 0566038baf667..c7ba51a38c407 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -15,15 +15,12 @@ Every replay has a detailed view that contains the embedded video player and ric * **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](/platform-redirect/?next=/session-replay/configuration/#custom-breadcrumbs). + - **User Clicks or Taps:** including rage and dead clicks on web and react native. + - **User Inputs:** except password fields which are always redacted. + - **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) 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. From 9f1b7b5852b8abea4a4dfe4c6c5524805d56c3a7 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Tue, 26 Aug 2025 14:07:28 -0700 Subject: [PATCH 06/13] lint; --- src/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/middleware.ts b/src/middleware.ts index d5403b02e71a5..544ff5347a40a 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3349,7 +3349,7 @@ const USER_DOCS_REDIRECTS: Redirect[] = [ { from: '/product/explore/session-replay/privacy/', to: '/security-legal-pii/scrubbing/protecting-user-privacy/', - }, + }, { from: '/product/teams/roles/', to: '/organization/membership/#team-level-roles', From d05cac2a0e8c05c3642f26cfce191e2e42a395ba Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Wed, 27 Aug 2025 15:28:45 -0700 Subject: [PATCH 07/13] Apply copywriting suggestions from code review Co-authored-by: Jasmin <77064737+jas-kas@users.noreply.github.com> Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> --- docs/product/explore/session-replay/index.mdx | 2 +- .../explore/session-replay/mobile/index.mdx | 4 ++-- .../explore/session-replay/replay-details.mdx | 24 +++++++++---------- .../replay-page-and-filters.mdx | 4 ++-- .../explore/session-replay/web/index.mdx | 6 ++--- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/product/explore/session-replay/index.mdx b/docs/product/explore/session-replay/index.mdx index 12e0b11132749..98f746c26baf0 100644 --- a/docs/product/explore/session-replay/index.mdx +++ b/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). diff --git a/docs/product/explore/session-replay/mobile/index.mdx b/docs/product/explore/session-replay/mobile/index.mdx index 826a05615965b..60751915ee06d 100644 --- a/docs/product/explore/session-replay/mobile/index.mdx +++ b/docs/product/explore/session-replay/mobile/index.mdx @@ -33,11 +33,11 @@ We recommend updating to the latest version, but the minimum versions supported ## 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. +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. 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: +Currently, replays for backend errors are 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) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index c7ba51a38c407..d4255ce869c5a 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -10,25 +10,25 @@ Every replay has a detailed view that contains the embedded video player and ric ![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 and React Native. + - **User Inputs:** note that password fields are always redacted. - **Navigations, Page Loads & View Changes:** [Learn more about spans](/product/sentry-basics/distributed-tracing/) - - **Mobile specific:** Backgrounding and Foregrounding, Network connectivity and battery usage + - **Mobile specific:** Backgrounding as well as 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) + - **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. -- **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 +49,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 diff --git a/docs/product/explore/session-replay/replay-page-and-filters.mdx b/docs/product/explore/session-replay/replay-page-and-filters.mdx index 54c1cb71aed9d..619f0356207cd 100644 --- a/docs/product/explore/session-replay/replay-page-and-filters.mdx +++ b/docs/product/explore/session-replay/replay-page-and-filters.mdx @@ -18,7 +18,7 @@ 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. @@ -26,7 +26,7 @@ Each replay will bring users to the [**Replay Details**](/product/explore/sessio ## 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) diff --git a/docs/product/explore/session-replay/web/index.mdx b/docs/product/explore/session-replay/web/index.mdx index 7638966d95e5e..eafb540c0eb72 100644 --- a/docs/product/explore/session-replay/web/index.mdx +++ b/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/), @@ -65,7 +65,7 @@ The Sentry SDK that records the replay runs on the client's browser, and it’s ## 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. +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, 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. Make sure you've set up trace propagation in your backend projects. For example: @@ -78,7 +78,7 @@ Sentry.init({ }); ``` -Currently, replays for backend errors is supported for the following SDK versions or newer: +Currently, replays for backend errors are 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) From 47534e261f768d2e65376f63fee5f785be036840 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Wed, 27 Aug 2025 15:48:42 -0700 Subject: [PATCH 08/13] de-dupe "Replays for Backend Errors" section and include tracePropagationTargets examples --- .../explore/session-replay/mobile/index.mdx | 38 +++++++++++++------ .../explore/session-replay/web/index.mdx | 23 +++-------- .../session-replay-for-backend-errors.mdx | 5 +++ .../session-replay-for-backend-support.mdx | 10 +++++ 4 files changed, 46 insertions(+), 30 deletions(-) create mode 100644 includes/session-replay-for-backend-errors.mdx create mode 100644 includes/session-replay-for-backend-support.mdx diff --git a/docs/product/explore/session-replay/mobile/index.mdx b/docs/product/explore/session-replay/mobile/index.mdx index 60751915ee06d..406974a77ada5 100644 --- a/docs/product/explore/session-replay/mobile/index.mdx +++ b/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 + -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. +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 are 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\//], +}); +``` + + ## Frequently Asked Questions diff --git a/docs/product/explore/session-replay/web/index.mdx b/docs/product/explore/session-replay/web/index.mdx index eafb540c0eb72..969cc0a8e5b1a 100644 --- a/docs/product/explore/session-replay/web/index.mdx +++ b/docs/product/explore/session-replay/web/index.mdx @@ -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 + -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, 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. 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 are 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) + \ No newline at end of file diff --git a/includes/session-replay-for-backend-errors.mdx b/includes/session-replay-for-backend-errors.mdx new file mode 100644 index 0000000000000..3e84611d74f56 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/includes/session-replay-for-backend-support.mdx b/includes/session-replay-for-backend-support.mdx new file mode 100644 index 0000000000000..7768124faf03b --- /dev/null +++ b/includes/session-replay-for-backend-support.mdx @@ -0,0 +1,10 @@ +Currently, replays for backend errors are 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) From 3ce60949c3ebae52a0a15e89b422b9f423e2429e Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Wed, 27 Aug 2025 15:52:48 -0700 Subject: [PATCH 09/13] grammar --- docs/product/explore/session-replay/replay-details.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index d4255ce869c5a..81d8e240c5677 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -6,7 +6,7 @@ description: "Learn more about how information is organized on the Replay Detail -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. 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) From 2d9812114d751b3bb7b4d496370114f246c3c68b Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Wed, 27 Aug 2025 16:02:07 -0700 Subject: [PATCH 10/13] indent, and rm User Input breadcrumb bullet --- docs/product/explore/session-replay/replay-details.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index 81d8e240c5677..98ab2a59ac912 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -16,13 +16,12 @@ Every replay has a detailed view that contains the embedded video player and ric * **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:** note that password fields are always redacted. - **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:** With links to [Web Vitals Insights](/product/insights/web-vitals/) + - **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 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. From bb4cb5ae774cd4988a2018e3777b48a6e48615e9 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Wed, 27 Aug 2025 16:07:07 -0700 Subject: [PATCH 11/13] rage clicks are web only it seems --- docs/product/explore/session-replay/replay-details.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index 98ab2a59ac912..be95c0ac74576 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -6,7 +6,7 @@ description: "Learn more about how information is organized on the Replay Detail -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. 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) @@ -15,7 +15,7 @@ Every replay has a detailed view that contains the embedded video player and ric * **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 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/) From 4147c32e1a1f587f60c3e22d8477735ab7c6b144 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 28 Aug 2025 08:46:23 -0700 Subject: [PATCH 12/13] add snippets for android/java setTracePropagationTargets --- .../explore/session-replay/mobile/index.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/product/explore/session-replay/mobile/index.mdx b/docs/product/explore/session-replay/mobile/index.mdx index 406974a77ada5..53949e6b0f35a 100644 --- a/docs/product/explore/session-replay/mobile/index.mdx +++ b/docs/product/explore/session-replay/mobile/index.mdx @@ -53,6 +53,25 @@ SentrySDK.start { options in }]; ``` +```java {tabTitle:Java} +SentryAndroid.init(context, options -> { + final ArrayList tracePropagationTargets = new ArrayList<>(); + tracePropagationTargets.add("https://api.myproject.org/"); + + options.setDsn("___PUBLIC_DSN___"); + options.setTracePropagationTargets(tracePropagationTargets); +}); +``` + +```kotlin {tabTitle:Kotlin} +SentryAndroid.init(context, { options -> + options.setDsn("___PUBLIC_DSN___") + options.setTracePropagationTargets(listOf( + "https://api.myproject.org/" + )) +}) +``` + ```javascript {tabTitle:JavaScript} Sentry.init({ dsn: "___PUBLIC_DSN___"; From bb77fd16e0a8774f290a1cd5a4ded65a65632cb8 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 28 Aug 2025 12:41:19 -0700 Subject: [PATCH 13/13] Apply suggestions from code review Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> --- docs/product/explore/session-replay/replay-details.mdx | 4 ++-- .../explore/session-replay/replay-page-and-filters.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/product/explore/session-replay/replay-details.mdx b/docs/product/explore/session-replay/replay-details.mdx index be95c0ac74576..5d9468a11c605 100644 --- a/docs/product/explore/session-replay/replay-details.mdx +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -16,9 +16,9 @@ Every replay has a detailed view that contains the embedded video player and ric * **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/) + - **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/) + - **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. diff --git a/docs/product/explore/session-replay/replay-page-and-filters.mdx b/docs/product/explore/session-replay/replay-page-and-filters.mdx index 619f0356207cd..09648de47ba74 100644 --- a/docs/product/explore/session-replay/replay-page-and-filters.mdx +++ b/docs/product/explore/session-replay/replay-page-and-filters.mdx @@ -26,7 +26,7 @@ Each replay will bring users to the [**Replay Details**](/product/explore/sessio ## 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 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. +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 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)