How do debug rehydration errors in production

Question

Sometimes with hydration I get super helpful error messages like "img tag's src attribute was X from the server but Y in the browser", etc. but in production, I am getting a very opaque message:

Text content does not match server-rendered HTML.

The only option I can think of at this point is shipping a dev build to production to try to get better feedback. Is there any other addon tooling out there to add context to hydration errors for debugging purposes? Or is a dev build my only option

Slava Knyazev · Accepted Answer · 2023-01-16 16:20:48Z

1

Hydration issues happen because of mismatches between SSR and client-side rendering.

First of all, it's no big deal. It might be happening because you're generating something in a way that's inconsistent between node and the browser (random number, size calculation, floating points, jsdom inconsistencies, etc). The client-side render will paint over any inconsistencies.

Finding them is fairly straight-forward. Hit CTRL-U in the browser to see the html output from the server, and then compare it to the html in the browser console. Use your diff tool of choice to compare the two.

A dev build won't help you much more than this process. The diff tool will flag the discrepency.

edited Jan 16, 2023 at 16:20

answered Jan 15, 2023 at 3:19

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

quinn Over a year ago

Thanks, it didn't occur to me to do just do the diff myself. I'll give this a try

quinn Over a year ago

Thanks, this did it. It was a timezone server vs client issue

quinn Over a year ago

I am still having this problem, but there is nothing when I run the diff. the server html has stuff like the initial data in script tags, but that is to be expected. There is no diff in the react mount point.

Slava Knyazev Over a year ago

If you register a mutation observer before React has a chance to render, you could compare the output of the SSR and the first render. The difference might be getting reconciled via an effect.

quinn Over a year ago

I tried adding a Mutation Observer as well, no luck. No difference that I can find in the server generated html.

Collectives™ on Stack Overflow

How do debug rehydration errors in production

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related