Skip to content

Conversation

@ryan953
Copy link
Member

@ryan953 ryan953 commented Jul 12, 2024

This moves some stuff around to make room for a new replay issue type: Hydration errors

Previous Hierarchy:

url Breadcrumbs Note
/product/issues/issue-details/replay-issues/ "Product Walkthroughs / Issues / Issue Details / Replay Issues" renamed, see next table

New Hierarchy:

url Breadcrumbs Note
/product/issues/issue-details/replay-issues/ "Product Walkthroughs / Issues / Issue Details / Replay Issues" added
/product/issues/issue-details/replay-issues/rage-clicks/ "Product Walkthroughs / Issues / Issue Details / Replay Issues / Rage Click Issues" renamed from above
/product/issues/issue-details/replay-issues/hydration-error/ "Product Walkthroughs / Issues / Issue Details / Replay Issues / Hydration Errors" added
/platforms/javascript/session-replay/issue-types/ "Platforms / JavaScript / Set Up Session Replay / Replay Issues" added

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

@vercel
Copy link

vercel bot commented Jul 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 17, 2024 5:42pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
develop-docs ⬜️ Ignored (Inspect) Visit Preview Jul 17, 2024 5:42pm

Copy link
Member

@michellewzhang michellewzhang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michellewzhang michellewzhang requested a review from a team July 15, 2024 22:02
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>
@codecov
Copy link

codecov bot commented Jul 16, 2024

Bundle Report

Changes will increase total bundle size by 1.88kB ⬆️

Bundle name Size Change
sentry-docs-server 9.26MB 1.89kB ⬆️
sentry-docs-edge-server 253.55kB 3 bytes ⬇️
sentry-docs-client 7.88MB 6 bytes ⬇️

Copy link
Contributor

@drguthals drguthals left a 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.
Copy link
Contributor

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.

![Rage click issue](./img/Rage-click-issue-in-issue-stream.png)
Copy link
Contributor

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated!


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.

![image slider tool](./img/hydration-error-image-slider-tool.png)
Copy link
Contributor

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?

Copy link
Member Author

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh awesome :D


"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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for more what?

Copy link
Member Author

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.

@jas-kas jas-kas self-requested a review July 17, 2024 11:01
@ryan953 ryan953 requested a review from drguthals July 17, 2024 17:27
@ryan953 ryan953 dismissed drguthals’s stale review July 17, 2024 22:11

Chatted in slack, good to go and iterate along the way!

@ryan953 ryan953 merged commit 16d2e3f into master Jul 17, 2024
@ryan953 ryan953 deleted the ryan953/replay-issue-hydration branch July 17, 2024 22:11

<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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Replay issues do not consume issue quota.
Replay issues do not consume error quota.

Copy link
Member

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Copy link
Member

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.

![Turning off rage click issues](./img/Turning-off-rage-clicks-toggle.png)
- [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.
Copy link
Member

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."
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: "Learn about hydration errors."
description: "Learn about Session Replay hydration errors."

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


## 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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

Copy link
Member

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

Copy link
Member Author

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/).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
Copy link
Member

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:
Copy link
Member

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


![Replay settings page](./img/replay-settings.png)

## Configuring Rage Click Issues
Copy link
Member

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?

@ryan953
Copy link
Member Author

ryan953 commented Jul 17, 2024

@jas-kas I think I was able to handle all your comments in #10770, but because i'm alt-tabbing a bit more if i missed something we can get to it in another round!

@github-actions github-actions bot locked and limited conversation to collaborators Aug 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Hydration Errors] Write docs for new replay issue type as sibling of https://docs.sentry.io/product/issues/issue-details/replay-issues/

9 participants