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 821a7e21134510..98f746c26baf08 100644 --- a/docs/product/explore/session-replay/index.mdx +++ b/docs/product/explore/session-replay/index.mdx @@ -6,11 +6,8 @@ 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/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/#supported-sdks). -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 081ec9240328b0..53949e6b0f35a6 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,56 @@ 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) + + +Make sure you've set up [trace propagation](/product/sentry-basics/concepts/tracing/#trace-propagation) in your backend projects. For example: + +```swift {tabTitle:Swift} +import Sentry + +SentrySDK.start { options in + options.dsn = "___PUBLIC_DSN___" + options.tracePropagationTargets = ["MyAppDomain.com"] +} +``` + +```objc {tabTitle:Objective-C} +@import Sentry; + +[SentrySDK startWithConfigureOptions:^(SentryOptions *options) { + options.dsn = @"___PUBLIC_DSN___"; + options.tracePropagationTargets = @[@"MyAppDomain.com"] +}]; +``` + +```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___"; + tracePropagationTargets: ["https://myproject.org", /^\/api\//], +}); +``` + + + ## 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 00000000000000..5d9468a11c6057 --- /dev/null +++ b/docs/product/explore/session-replay/replay-details.mdx @@ -0,0 +1,72 @@ +--- +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, 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) + +- **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. + - **Navigations, Page Loads, & View Changes:** [Learn more about spans](/product/sentry-basics/distributed-tracing/). + - **Mobile specific:** Backgrounding as well as foregrounding, network connectivity, and battery usage. + - **Web Vitals:** and an overall performance score [Learn more](/product/insights/web-vitals/) + - **Custom Breadcrumbs:** Learn more about configuring [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs). + + 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. + +* **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 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. + +- **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 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 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 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 + +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 79% 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 46523d3f852fa6..09648de47ba746 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." --- @@ -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 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 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) @@ -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/docs/product/explore/session-replay/web/getting-started.mdx b/docs/product/explore/session-replay/web/getting-started.mdx deleted file mode 100644 index f7c9a755b9e185..00000000000000 --- 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 0b3230193360f7..969cc0a8e5b1a2 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,43 @@ 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. This 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/) + + + +Make sure you've set up [trace propagation](/product/sentry-basics/concepts/tracing/#trace-propagation) in your backend projects. For example: + +```javascript +Sentry.init({ + dsn: "___PUBLIC_DSN___"; + tracePropagationTargets: ["https://myproject.org", /^\/api\//], +}); +``` + + \ No newline at end of file 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 02189d6e0e4955..00000000000000 --- 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/includes/session-replay-for-backend-errors.mdx b/includes/session-replay-for-backend-errors.mdx new file mode 100644 index 00000000000000..3e84611d74f56d --- /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 00000000000000..7768124faf03bc --- /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) diff --git a/redirects.js b/redirects.js index 08d0a4d189d793..8e810b8d3aa2b3 100644 --- a/redirects.js +++ b/redirects.js @@ -246,26 +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/replay-details/', - destination: '/product/explore/session-replay/web/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 091da5f79acbaa..544ff5347a40a0 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3327,8 +3327,28 @@ 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/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/',