-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
docs(replay): Replay Issue types & hydration errors #10686
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
michellewzhang
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/troubleshooting.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Co-authored-by: Catherine Lee <55311782+c298lee@users.noreply.github.com> Co-authored-by: Salma Alam-Naylor <52798353+whitep4nth3r@users.noreply.github.com>
Bundle ReportChanges will increase total bundle size by 1.88kB ⬆️
|
drguthals
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some suggested changes
| 5. Choose the action to be performed in the "THEN" dropdown. | ||
| 6. Decide how often you'd like Sentry to look for rage click issues. | ||
| 7. Lastly, name your alert and add an owner. | ||
| After a replay is accepted, consuming replay quota in the process, error detection takes place and error events are grouped into issues, but without consuming issue quota. These errors are created on the backend after ingest and they will not appear on your [Stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) page under the "Total Errors" or "Accepted Errors" graphs. You are not billed for their volume. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The first sentence here doesn't make sense to me. Am I just missing something?
I think the most confusing is the word "accepted", do you mean created? Do our users have to accept something to make a replay actually show up? Who/what is doing the accepting and where and when?
Also, when you say issue quota, do you mean error quota? Just looking at our docs and I don't see "issue quota" https://docs.sentry.io/pricing/quotas/
Maybe instead:
When a replay is created it consumes replay quota (not to be confused with error quota). After it is created, Sentry checks for errors and any error events associated with the replay are grouped into issues; note that this does not consume issue quota. These errors are created on the backend after ingest and they will not appear on your stats page under the "Total Errors" or "Accepted Errors" graphs. You are not billed for their volume.
|
|
||
| If you've enabled [Session Replay](/product/explore/session-replay/), you'll be able to see rage click issues on the [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues/) page in Sentry. Rage clicks are a series of consecutive clicks on the same unresponsive page element. They are a strong signal of user frustration and most likely deserve your attention. | ||
|
|
||
|  |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we take this moment to update this image to an Empower Plant one to avoid having copyright content on the docs?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated!
docs/product/issues/issue-details/replay-issues/rage-clicks.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/hydration-error.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| The image slider tool allows for comparing the two page states by overlaying the images on top of each other. Click and drag the purple line to reveal one image or the other. | ||
|
|
||
|  |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This and the next images are so tiny it's really hard to even tell what they are showing. Can we make them a bit more zoomed in?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one the marketing team is going to help followup and make an Arcade or video. A flat image is the worst; people need to see it moving.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh awesome :D
docs/product/issues/issue-details/replay-issues/hydration-error.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| "Slow clicks" (also called "dead clicks") are only detected on `<button>`, `<input>`, and `<a>` elements that don't lead to updates to the DOM or a page scroll within 7 seconds. When the user clicks on one of these elements 3 or more times within that 7 second time frame, it indicates frustration, and the SDK registers a ["rage click"](/product/issues/issue-details/replay-issues/rage-clicks/). | ||
|
|
||
| Sometimes rage or dead clicks will be detected on elements which are not expected to mutate the DOM, like a "Print" or "Download" button. In this case, you can configure `slowClickIgnoreSelectors`, which will prevent those buttons from generating new issues. See <PlatformLink to="/session-replay/troubleshooting/#why-am-i-seeing-too-many-or-too-few-rage-clicks">Why am I seeing too many or too few rage clicks?</PlatformLink> for more. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for more what?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove that extra link. the slowClickIgnoreSelectors tip is all that we have everywhere.
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
docs/product/issues/issue-details/replay-issues/hydration-error.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/session-replay/issue-types.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Billy Vong <billyvg@users.noreply.github.com> Co-authored-by: Sarah Guthals <sarah@guthals.com>
…ugh i stay on the dev server
Chatted in slack, good to go and iterate along the way!
|
|
||
| <Note> | ||
| While you can enable **session replay** with JavaScript SDK version 7.27.0, or higher, you'll need to have version 7.60.1 or higher in order to be able to see **rage click issues**. | ||
| Replay issues do not consume issue quota. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Replay issues do not consume issue quota. | |
| Replay issues do not consume error quota. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issues don't have a quota allotment, errors do!
| 5. Choose the action to be performed in the "THEN" dropdown. | ||
| 6. Decide how often you'd like Sentry to look for rage click issues. | ||
| 7. Lastly, name your alert and add an owner. | ||
| When a replay is created it consumes [replay quota](/pricing/quotas/manage-replay-quota/) (not to be confused with [error quota](/pricing/quotas/manage-event-stream-guide/)). As the replay session is being processed by the server Sentry detects the replay issue types listed below and groups those into issues. These errors are created on the backend after ingest and do not comsume error quota. They will not appear on your [stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) page under the "Total Errors" or "Accepted Errors" graphs. You are not billed for their volume. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| When a replay is created it consumes [replay quota](/pricing/quotas/manage-replay-quota/) (not to be confused with [error quota](/pricing/quotas/manage-event-stream-guide/)). As the replay session is being processed by the server Sentry detects the replay issue types listed below and groups those into issues. These errors are created on the backend after ingest and do not comsume error quota. They will not appear on your [stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) page under the "Total Errors" or "Accepted Errors" graphs. You are not billed for their volume. | |
| When a replay is created it consumes [replay quota](/pricing/quotas/manage-replay-quota/) (not to be confused with [error quota](/pricing/quotas/manage-event-stream-guide/)). As the replay is being processed by the server, Sentry detects the replay issue types listed below and groups those into issues. These errors are created on the backend after ingest and do not consume error quota. They will not appear on your [stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) page under the "Total Errors" or "Accepted Errors" graphs. You are not billed for their volume. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ryan953 Can we start with a high-level one-two sentences on what kind of issues are replay issues? 'replay issue' is a Sentry-introduced concept so it will be helpful to provide clarity on what kind of problems they highlight in the first few sentences as a summary (I know you have them individually listed below but I think an overarching statement is helpful)
| - [Rage clicks](/product/issues/issue-details/replay-issues/rage-clicks/) are a series of consecutive clicks on the same unresponsive page element. They are a strong signal of user frustration and most likely deserve your attention. | ||
|
|
||
|  | ||
| - [Hydration errors](/product/issues/issue-details/replay-issues/hydration-error/) are a React-specific problem that happen when the initial UI does not match what was rendered on the server. They can result in extra work for the browser, and a slower pageload experience for users. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what does 'extra work for the browser' mean here? what extra work?
is the extra work is what's causing the slower pageload experience? if so, we should tie that together in this sentence
| --- | ||
| title: Hydration Error | ||
| sidebar_order: 50 | ||
| description: "Learn about hydration errors." |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| description: "Learn about hydration errors." | |
| description: "Learn about Session Replay hydration errors." |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
to match the description on https://docs.sentry.io/product/issues/issue-details/replay-issues/
|
|
||
| ## Prerequisites for Seeing Hydration Error Diff Tools | ||
|
|
||
| Hydration Errors can come into your issue stream either as regular error events, or they could be detected inside a replay session and converted into an issue by the server. Read more about |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| Hydration Errors can come into your issue stream either as regular error events, or they could be detected inside a replay session and converted into an issue by the server. Read more about | |
| Hydration Errors can come into your issue stream either as regular error events, or they could be detected inside a replay and converted into an issue by the server. Read more about |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is really confusing :/ Can we clarify that hydration errors from 'regular error events' are filtered out via inbound filters
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The linked page [configuring hydration errors](/platforms/javascript/session-replay/issue-types/) does talk about the inbound filters and what the different preference options are, i think it's ok to only have that in one spot. Also, it is confusing!
|
|
||
| ## Privacy | ||
|
|
||
| The diff tools all rely on replay data, so any PII data within the webpage will be masked or blocked before being sent to the server. Read more about [Protecting user privacy in Session Replay](/security-legal-pii/scrubbing/protecting-user-privacy/) and [how to configure Session Replay to maintain user privacy](/platforms/javascript/session-replay/privacy/). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| The diff tools all rely on replay data, so any PII data within the webpage will be masked or blocked before being sent to the server. Read more about [Protecting user privacy in Session Replay](/security-legal-pii/scrubbing/protecting-user-privacy/) and [how to configure Session Replay to maintain user privacy](/platforms/javascript/session-replay/privacy/). | |
| The diff tools all rely on replay data, so any PII data within the webpage will be masked or blocked before being sent to the server by default. Read more about [Protecting user privacy in Session Replay](/security-legal-pii/scrubbing/protecting-user-privacy/) and [how to configure Session Replay to maintain user privacy](/platforms/javascript/session-replay/privacy/). |
|
|
||
| A _[replay issue](/product/issues/issue-details/replay-issues/)_ is an issue detected using captured Session Replay data. If your application is configured with [Session Replay](/product/session-replay/), problems will be detected on the server side during replay ingest, and grouped into issues. We group similar events into issues based on a fingerprint. For replay issues, a fingerprint is primarily based on the problem type and the url or transaction name where the problem occurred. | ||
|
|
||
| You can configure which issue types are created by visiting Project Settings > Replay and toggling detection on or off for each issue type. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we mention that by default this is turned on? so no additional config steps needed
|
|
||
| ## Configuring Hydration Errors | ||
|
|
||
| When a [hydration error](/product/issues/issue-details/replay-issues/hydration-error/) occurs in your React app, the SDK will emit an error object as well as a replay breadcrumb, both of which contain data about the hydration problem. Both of these are sent to the server for processing. When you're looking at the issue stream you'll see Hydration Error issues which could come from either data source. However you will only see the diff tools which make debugging easier if a replay is associated with the error. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| When a [hydration error](/product/issues/issue-details/replay-issues/hydration-error/) occurs in your React app, the SDK will emit an error object as well as a replay breadcrumb, both of which contain data about the hydration problem. Both of these are sent to the server for processing. When you're looking at the issue stream you'll see Hydration Error issues which could come from either data source. However you will only see the diff tools which make debugging easier if a replay is associated with the error. | |
| When a [hydration error](/product/issues/issue-details/replay-issues/hydration-error/) occurs in your React app, the SDK will emit an error object as well as a replay breadcrumb, both of which contain data about the hydration problem. Both of these are sent to the server for processing. When you're looking at the issue stream you'll see Hydration Error issues which could come from either data source. However, you will only see the diff tools which make debugging easier if a replay is associated with the error. |
|
|
||
| For this reason we recommend having both [Inbound Filter](/concepts/data-management/filtering/) enabled and the "Create Hydration Error Issues" Replay setting enabled as well. This is also the default! | ||
|
|
||
| You can have your preferences configured in one of four ways: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i would just say 'replay' data, instead of replay breadcrumb
|
|
||
|  | ||
|
|
||
| ## Configuring Rage Click Issues |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
theres a min SDK version to create rage click issues. this is important for set up. lets mention it here?
This moves some stuff around to make room for a new replay issue type: Hydration errors
Previous Hierarchy:
/product/issues/issue-details/replay-issues/New Hierarchy:
/product/issues/issue-details/replay-issues//product/issues/issue-details/replay-issues/rage-clicks//product/issues/issue-details/replay-issues/hydration-error//platforms/javascript/session-replay/issue-types/I also moved some FAQ-like content from the old :"... Issue Details / Rage Clicks" page (
/product/issues/issue-details/replay-issues/) into the troubleshooting page (/platforms/javascript/session-replay/troubleshooting/).Fixes getsentry/sentry#74357