docs(replay): Fix typos and more in Replay Hydration Error docs (#10770)

ryan953 · web-flow · commit 899bea966bc1 · 2024-07-17T23:14:33.000Z
diff --git a/docs/platforms/javascript/common/session-replay/issue-types.mdx b/docs/platforms/javascript/common/session-replay/issue-types.mdx
@@ -21,7 +21,7 @@ description: "Learn about the Issue types that Session Replay can detect."
 
 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.
+You can configure which issue types are created by visiting Project Settings > Replay and toggling detection on or off for each issue type. By default all issue types are enabled.
 
 ![Replay settings page](./img/replay-settings.png)
 
@@ -31,16 +31,24 @@ You can configure which issue types are created by visiting Project Settings > R
 
 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.
 
+<Note>
+You'll need to have SDK version 7.60.1 or higher in order to be able to see **rage click issues**.
+</Note>
+
 ## 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.
+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:
 | Inbound Filters | Replay Hydration Error toggle | Result |
 | --- | --- | --- |
-| enabled | enabled | (recommended) Issue created based on replay breadcrumb data. |
+| enabled | enabled | (recommended) Issue created based on replay data. |
 | enabled | disabled | No issues will be created. |
-| disabled | enabled | Two issues created from both replay breadcrumb, and error data. The issues are duplicates. |
+| disabled | enabled | Two issues created from both replay, and error data. The issues are duplicates. |
 | disabled | disabled | Issue created from captured error data. |
+
+<Note>
+You'll need to have SDK version 7.87.0 or higher in order to be able to detect **hydration error issues** from replay data.
+</Note>
diff --git a/docs/product/issues/issue-details/replay-issues/hydration-error.mdx b/docs/product/issues/issue-details/replay-issues/hydration-error.mdx
@@ -1,23 +1,23 @@
 ---
 title: Hydration Error
 sidebar_order: 50
-description: "Learn about hydration errors."
+description: "Learn about Session Replay hydration errors."
 ---
 
 Hydration errors are a React-specific problem that happen when the initial client 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.
 
 ## 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
+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
 [configuring hydration errors](/platforms/javascript/session-replay/issue-types/) to learn about the differences.
 
-If the hydration error event instance has an associated replay session, then you will see diff tools on the issue details page to make debugging the hydration error easier.
+If the hydration error event instance has an associated replay, then you will see diff tools on the **Issue Details** page to make debugging the hydration error easier.
 
 ## Debugging Hydration Errors
 
 Hydration errors represent a mismatch between the server-rendered HTML, and the client-rendered HTML. So it's beneficial to compare the before and after state of a webpage to understand what's changed, and decide how to make those two states consistent. To do this, we provide a few diff tools to see the differences -- both visually and by looking at the rendered HTML itself.
 
-Generally the visual tools are a good place to start to identify the issue, but keep in mind that sometimes differences can appear below the fold, or there can be differences in hidden DOM nodes or attributes, so inspecting the HTML is important too.
+Generally, the visual tools are a good place to start to identify the issue, but keep in mind that sometimes differences can appear below the fold, or there can be differences in hidden DOM nodes or attributes, so inspecting the HTML is important too.
 
 ### Example Error
 
@@ -31,18 +31,18 @@ The image slider tool allows for comparing the two page states by overlaying the
 
 ![image slider tool](./img/hydration-error-image-slider-tool.png)
 
-#### Side by Side Image Tool
+#### Side-by-Side Image Tool
 
-View images side by side to see large chunks of the page that may differ.
+View images side-by-side to see large chunks of the page that may differ.
 
 ![side by side image tool](./img/hydration-error-side-by-side-image-tool.png)
 
 #### HTML Diff Tool
 
-The HTML diff tool is a basic HTML comparison. It is useful if the hydration error is caused by hidden DOM nodes, different attributes on a DOM node, or mismatched content below the fold.
+The HTML diff tool is a basic HTML comparison. It is useful if the hydration error is caused by hidden DOM nodes, different attributes on a DOM node, or there's mismatched content below the fold.
 
 ![html diff tool](./img/hydration-error-html-diff-tool.png)
 
 ## 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/).
+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/).
diff --git a/docs/product/issues/issue-details/replay-issues/index.mdx b/docs/product/issues/issue-details/replay-issues/index.mdx
@@ -9,13 +9,13 @@ If you've enabled [Session Replay](/product/explore/session-replay/), you'll be
 ## Quota Consumption
 
 <Note>
-Replay issues do not consume issue quota.
+Replay issues do not consume error quota.
 </Note>
 
-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.
 
 ## Replay Issue Types
 
 - [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.
+- [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 a slower pageload experience for users.
