diff --git a/docs/product/issues/issue-details/replay-issues/hydration-error.mdx b/docs/product/issues/issue-details/replay-issues/hydration-error.mdx index a241b034796bbd..309401e4b82857 100644 --- a/docs/product/issues/issue-details/replay-issues/hydration-error.mdx +++ b/docs/product/issues/issue-details/replay-issues/hydration-error.mdx @@ -19,25 +19,35 @@ Hydration errors represent a mismatch between the server-rendered HTML, and the 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 +#### Example Error In the example below we'll look at a hydration error and see how each tool helps to debug the problem. The problem is that code highlighting is not applied on the server. When the server renders the PHP code block in the bottom-center of the page, all the code has a white font color. After hydration syntax highlighting is applied, the code snippet is colorful. -#### Image Slider Tool +### Image Slider 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) -#### Side-by-Side Image Tool +### Side-by-Side Image 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 +### Tree Compare + +Use the tree compare tool to list specifically which DOM nodes were added, removed, or had attributes changed. + +You can see each change to the page, and when it happened within the context of the hydration error. In this case one mutation happened at the timestamp `1732089574790` which was at time offset `1790`, or 1.7 seconds since the start of the captured replay. Within this mutation 39 nodes were added, 2 nodes had some attributes changed, and 4 nodes were removed. + +We show a CSS selector for each node in the tree to make it easier to identify the component that was changed. Note that some changed nodes might exist outside your React render tree and won't cause hydration errors. + +![tree compare tool](./img/hydration-error-tree-compare-tool.png) + +### HTML Diff 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. diff --git a/docs/product/issues/issue-details/replay-issues/img/hydration-error-html-diff-tool.png b/docs/product/issues/issue-details/replay-issues/img/hydration-error-html-diff-tool.png index e6e1b6fdaae803..02000a18b6c2c7 100644 Binary files a/docs/product/issues/issue-details/replay-issues/img/hydration-error-html-diff-tool.png and b/docs/product/issues/issue-details/replay-issues/img/hydration-error-html-diff-tool.png differ diff --git a/docs/product/issues/issue-details/replay-issues/img/hydration-error-image-slider-tool.png b/docs/product/issues/issue-details/replay-issues/img/hydration-error-image-slider-tool.png index 4b4bef26ea1ba1..6c75f6461bb702 100644 Binary files a/docs/product/issues/issue-details/replay-issues/img/hydration-error-image-slider-tool.png and b/docs/product/issues/issue-details/replay-issues/img/hydration-error-image-slider-tool.png differ diff --git a/docs/product/issues/issue-details/replay-issues/img/hydration-error-side-by-side-image-tool.png b/docs/product/issues/issue-details/replay-issues/img/hydration-error-side-by-side-image-tool.png index 1233452594450f..132277a6e98b8a 100644 Binary files a/docs/product/issues/issue-details/replay-issues/img/hydration-error-side-by-side-image-tool.png and b/docs/product/issues/issue-details/replay-issues/img/hydration-error-side-by-side-image-tool.png differ diff --git a/docs/product/issues/issue-details/replay-issues/img/hydration-error-tree-compare-tool.png b/docs/product/issues/issue-details/replay-issues/img/hydration-error-tree-compare-tool.png new file mode 100644 index 00000000000000..f92bb78e3504b7 Binary files /dev/null and b/docs/product/issues/issue-details/replay-issues/img/hydration-error-tree-compare-tool.png differ