From 00e160c534e3422995b16494ee6a61439682fe32 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 3 Aug 2023 13:07:16 -0700 Subject: [PATCH] feat(replays): add documentation on rage and dead clicks (#7591) * feat(replays): add documentation on rage and dead clicks * update wording --- src/docs/product/session-replay/replay-details.mdx | 6 +++--- src/docs/product/session-replay/replay-page-and-filters.mdx | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/docs/product/session-replay/replay-details.mdx b/src/docs/product/session-replay/replay-details.mdx index cf092b1cd8d91..5f5e2a1d56de2 100644 --- a/src/docs/product/session-replay/replay-details.mdx +++ b/src/docs/product/session-replay/replay-details.mdx @@ -13,16 +13,16 @@ 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, user inputs, [page navigations, page loads](/product/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and the [Largest Contentful Paint (LCP)](/product/performance/web-vitals/#largest-contentful-paint-lcp) web vital. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. +* **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/performance/web-vitals/#largest-contentful-paint-lcp) web vital. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays. - Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page. -- **Timeline:** This is the section at the top of the **Replay Details** page that illustrates where significant events (such as errors and user interactions) happen over the course of the replay. This allows users to easily scrub to key events by dragging across the timeline. It also visually conveys the amount of time that took place between events. +- **Timeline:** This is the section at the top 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. * **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). -* **DOM Events:** DOM event breadcrumbs, like user clicks, are augmented with surrounding HTML source code to help users understand which event was targeted. As the video plays, there’s a visual indicator that tracks through the table of DOM events, highlighting which events happened prior to, or next to this point in the video. You can also click the timestamp on the far right of each DOM event to bring yourself to that point in the replay player. +* **DOM Events:** DOM event breadcrumbs, like user clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. As the video plays, there’s a visual indicator that tracks through the table of DOM events, highlighting which events happened prior to, or next to this point in the video. You can also click the timestamp on the far right of each DOM event to bring yourself to that point in the replay player. - **Trace:** Connects all the [trace(s)](/product/sentry-basics/tracing/distributed-tracing#traces-transactions-and-spans) that happened during the replay. - Due to transaction sampling, this view may be missing traces. diff --git a/src/docs/product/session-replay/replay-page-and-filters.mdx b/src/docs/product/session-replay/replay-page-and-filters.mdx index d37193f51d172..19142fa112c9d 100644 --- a/src/docs/product/session-replay/replay-page-and-filters.mdx +++ b/src/docs/product/session-replay/replay-page-and-filters.mdx @@ -13,6 +13,10 @@ You can search for or browse replays of user sessions on the **Replay** page, wh - **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).) - **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. + +SDK version `7.60.1` or higher is required to see rage and dead click data on the Replays 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](/product/data-management-settings/scrubbing/server-side-scrubbing/) in the Sentry app on either an organization-wide or a project level.