feat(hydration error): Create a tree-view that highlights dom mutations directly

[ryan953]

Fixes #74358

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 88 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...pp/utils/replays/hooks/useExtractDiffMutations.tsx	0.00%	79 Missing ⚠️
...app/components/replays/diff/replayMutationTree.tsx	0.00%	9 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #80808      +/-   ##
==========================================
+ Coverage   74.97%   78.39%   +3.41%     
==========================================
  Files        7207     7208       +1     
  Lines      319509   319549      +40     
  Branches    44001    44003       +2     
==========================================
+ Hits       239546   250498   +10952     
+ Misses      73442    62671   -10771     
+ Partials     6521     6380     -141     

[billyvg]

How many times does replayStepper run when we open this modal?

[ryan953]

oops, had this set to 0 for testing because i didn't want the cache to kick in so often.

[codecov]

Bundle Report

Changes will increase total bundle size by 44.89kB (0.14%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
app-webpack-bundle-array-push	31.9MB	44.89kB (0.14%) ⬆️

[ryan953]

I was thinking about adding a feature-flag around this.. but it's pretty deep inside the workflow, so i think I might not 'need' it even if it's a good habit in all cases. Exception to the rule!

[ryan953]

I had an idea that maybe we should be formatting the html. However the add/remove sections show potentially huge chunks of html though, which could be a perf hit. So with that, lets let formatting be a followup task if this proves an interesting tool.
The attributes section just shows one node, with children elided, so no formatting needed for that imo.

[ryan953]

Added a docs PR to go along with this new tool: getsentry/sentry-docs#11883

[whitep4nth3r]

Hello!

I had a look at this feature this morning and am providing some UX feedback as a developer who:

• knows about hydration errors
• is a front end developer
• does not know all the behind-the-scenes details of hydration errors but needs to debug them now and then

---

Th mutations tab is an interesting window into the internals happening with a Hydration Error, but I'm having trouble understanding how the mutations relate to the HTML Diff, and therefore finding the mutations tab largely useless.

e.g. This HTML diff begins at either a div or a style tag (depending on if you consider the before or after)

And here on the mutations tab, I don't really see anything that matches the HTML diff, and it doesn't give me any really useful information

The ways in which I could interpret this is The style attribute was changed on a span element. But that's not what the diff shows.

So my questions are:

1. Is this a bug? Or is this the feature working correctly?
2. If it is working correctly, how can we present this in a way that is useful for the user and for it to mean something so they can get debugging asap.
3. Do we need to explain what they're looking at on the mutations tab, or at least provide a link to more info? Because I'm not entirely sure what I'm looking at. HTML diff, sure, I know what's going on, but how is the mutation causing the HTML diff? Is it even?

This is also a valid option: maybe we are assuming prior knowledge intentionally, and maybe, as someone who doesn't use Next.js all the time, maybe I'm not the target audience. But I would also argue that displaying these kinds of features in a more "you can understand what's going on here even if you don't have any prior experience with this particular thing" would help prove the use of Sentry earlier on.

I have two more questions for you:

1. What fundamental user need is this feature solving?
2. Is the need met as soon as it possibly can be?

I actually think the text diff was more immediately useful (showcased in this blog https://blog.sentry.io/sentry-cant-fix-react-hydration-errors-but-it-can-really-help-you-debug-them/)