docs(replay): Document new hydration tree compare, and update related images (#11883)

* docs(replay): Document new hydration tree compare, and update related images

* Apply suggestions from code review

Co-authored-by: Alex Krawiec <[email protected]>

---------

Co-authored-by: Alex Krawiec <[email protected]>

Author: 2 people

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.