Hydration mismatch error: suggestion to include mismatch details in production error message

[OliverJAsh]

After upgrading to React 18 at Unsplash, we saw lots of hydration mismatch errors in production. This was not surprising because React now logs these as errors whereas before they were development-only warnings.

However, when we looked at the errors in Sentry, there was no information in the error message to help us reproduce the problem. It seemed that the mismatches only occurred in very specific circumstances.

React does log this useful information but unfortunately it's only logged in the development build:

react/packages/react-dom/src/client/ReactDOMComponent.js

Lines 234 to 248 in 229c86a

	const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
	const normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
	if (normalizedServerText === normalizedClientText) {
	return;
	}
	if (shouldWarnDev) {
	if (__DEV__) {
	if (!didWarnInvalidHydration) {
	didWarnInvalidHydration = true;
	console.error(
	'Text content did not match. Server: "%s" Client: "%s"',
	normalizedServerText,
	normalizedClientText,
	);

We made a small patch to react-dom to add the same information to the production error message. This made it easy to see that the issue was because our date formatting produced different results depending on the user's time zone:

I would like to suggest that this information is included in the production error message—presumably this would be useful debugging information for others React users.

Related discussion: #11189

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[remorses]

bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!