Output hydration warning in production mode

[7rulnik]

Do you want to request a feature or report a bug?
feature

What is the current behavior?
Currently, react shows hydration warning only in dev mode

What is the expected behavior?
It would be cool if react will show a warning about mismatch during hydration in production mode.
From docs:

…but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration.

So we can track it only in development, but for large apps it could be hard and could take a bunch of time to find all missmatches. But if we will output the warning in prod mode we can track it via sentry or services like this.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
v16.12.0

[sebmarkbage]

My current recommendation for this is to simply run React in Dev Mode for a small number of users to get data that way. You can do this by aliasing react-dom to react-dom/cjs/react-dom.development.js. It'll be slower but that's the cost of all these warnings and there's little that makes hydration more special than any other warning. Sometimes people ask for specific combinations but I don't think one makes more sense than another set of combinations.

[7rulnik]

I had an idea about shipping dev mode, yep. So we can close it I think?

[somewhatabstract]

There is a decision point in React production that says "hydration failed, render instead", right? All we really need is a signal that we had that problem - we don't need all the errors about why, just to know that a route has a hydration issue is sufficient for us to at least know we have a problem to investigate.

Putting dev code in prod seems like a poor solution to this problem. Can we revisit it?

[sebmarkbage]

@somewhatabstract That's not quite the same because we don't compare attributes in PROD. So you can have a mismatch of attributes and React would never know.

However, for certain cases, React will choose to throw away the content and client render instead. Including certain mismatches. In the new streaming/suspense model, that can happen if you error on the server, if the connection closes before it completed that boundary, if it errors on the client during hydration or a mismatch.

We'll need to expose some way to expose tracking for all these reasons that something didn't end up with optimal performance in production. It won't have as detailed information but we definitely need to expose this information.

The technique of running development mode for a few people (e.g. internal users) can be away to get additional detailed information.

[gaearon]

See reactjs/rfcs#215 for logging non-attribute mismatches.

[7rulnik]

@gaearon glad to see it and thanks for the reply in this issue! <3