From 9d2c75e70756b7ae226e4d9a3d153a3608c93947 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:29:50 -0400 Subject: [PATCH 1/4] add info about web vitals --- docs/product/explore/session-replay/web/replay-details.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx index 4f72523b9ca34..cc0e65cb2e166 100644 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ b/docs/product/explore/session-replay/web/replay-details.mdx @@ -13,7 +13,7 @@ Every replay has a detailed view that contains the embedded video player and ric - **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and the [Largest Contentful Paint (LCP)](/product/insights/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp) web vital. 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. +* **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [web vitals](/product/insights/web-vitals/). User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. Web vitals are augmented with the selector to help users identify which elements are contributing to their web vital scores. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. - Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page. - **Timeline:** This is the section at the 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. From 4aa01b754371f9d4917d300383f9d0685cd132d9 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:12:36 -0400 Subject: [PATCH 2/4] Update docs/product/explore/session-replay/web/replay-details.mdx Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> --- docs/product/explore/session-replay/web/replay-details.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx index cc0e65cb2e166..270a23fe489ed 100644 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ b/docs/product/explore/session-replay/web/replay-details.mdx @@ -13,7 +13,7 @@ Every replay has a detailed view that contains the embedded video player and ric - **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [web vitals](/product/insights/web-vitals/). User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. Web vitals are augmented with the selector to help users identify which elements are contributing to their web vital scores. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. +* **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [web vitals](/product/insights/web-vitals/). User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. Web vitals are augmented with the selector to help users identify which elements are affecting their web vital scores. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. - Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page. - **Timeline:** This is the section at the 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. From 0417033ec33685ff0c8996c1181305a10dea411c Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Wed, 11 Sep 2024 20:01:00 -0400 Subject: [PATCH 3/4] Update replay-details.mdx --- docs/product/explore/session-replay/web/replay-details.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx index 270a23fe489ed..58157f05a1d2a 100644 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ b/docs/product/explore/session-replay/web/replay-details.mdx @@ -13,7 +13,7 @@ Every replay has a detailed view that contains the embedded video player and ric - **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [web vitals](/product/insights/web-vitals/). User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. Web vitals are augmented with the selector to help users identify which elements are affecting their web vital scores. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. +* **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [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. - **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. From 778b9ae89768bd821badfdfa9a0cacbac4b0dc01 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Thu, 12 Sep 2024 12:03:38 -0400 Subject: [PATCH 4/4] Update docs/product/explore/session-replay/web/replay-details.mdx Co-authored-by: Jasmin <77064737+jas-kas@users.noreply.github.com> --- docs/product/explore/session-replay/web/replay-details.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/product/explore/session-replay/web/replay-details.mdx b/docs/product/explore/session-replay/web/replay-details.mdx index 58157f05a1d2a..57fe3da246ba6 100644 --- a/docs/product/explore/session-replay/web/replay-details.mdx +++ b/docs/product/explore/session-replay/web/replay-details.mdx @@ -13,7 +13,7 @@ Every replay has a detailed view that contains the embedded video player and ric - **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [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. +* **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/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and [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. - **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.