Need a hook for hydration mismatch

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

What is the current behavior? In React 16, the data-react-checksum attribute was removed from the server rendered markup. In previous versions, we used this attribute to beacon checksum mismatches to our log servers to be notified of production issues. With the attribute removed, we have no mechanism to determine if a checksum mismatch occurred.

I’m aware that checksum issues no longer cause the entire DOM to re-render, however, it is still important that we know when they do occur. A typical use case is when we display ads or autoplay video. We want to know if an ad gets re-rendered (double counted) or an autoplay video is interrupted due to React re-rendering the DOM.

Other related bugs/requests:

• Ability to debug checksums in production - https://github.com/facebook/react/issues/10016

What is the expected behavior? The solution does not necessarily need to re-introduce the checksum attribute again. It could be some other event, hook, or callback that applications can leverage to handle checksum issues.

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

• React 16
• All browsers
• Worked in <= React 15

[redonkulus]

@redonkulus I’m curious how you achieved this using only the attribute. AFAICS, the data-react-checksum attribute is always there, regardless of if there is a mismatch?

@OliverJAsh If the checksum attribute is present then we know the DOM was reused (<= React 15). If its gone, then we know the client re-rendered the whole app. Its simple, but has worked well for us for a few years now.

We too have seen issues in IE based on locale strings, video autoplaying that starts on server rendered markup but then gets re-inited once React on the client starts up (if there is a checksum mismatch), ads that get re-rendered doubling the impression count on markup mismatch. These are major things that require a solution or hook from the library.

I think the trouble we find is that the React team and Facebook do not use React server side so the priority of such issues is lower on the list of other efforts the team is solving. I believe an RFC would be the correct approach, but we need to know what the solution would look like.

@sebmarkbage @gaearon can you help provide a direction on an approach that would be acceptable? We do not know the ins and outs of the React codebase like yourself, so any information helps.

[OliverJAsh]

Using the patch I mentioned for React v15 in https://github.com/facebook/react/issues/11189#issuecomment-367752926, we’ve been able to identity many different checksum errors in production that we wouldn’t have been able to otherwise. Usually these are checksum errors in browsers we can’t test locally, or they happen under some edge case that we just didn’t catch when testing locally.

For example, just today I discovered a checksum error in IE and Edge that happens because JS math calculations are different in Node vs IE/Edge, leading to different values for an inline style:

(5342 / 3561) * 100
// => Node: 150.01404099971919
// => IE/Edge: 150.01404099971918

I would have never discovered this without error reporting in production.

Not having a way to report these errors in v16 is a real blocker for us upgrading. We need to be able to monitor these errors when they happen, because they inevitably will.

From this issue it sounds like I’m not alone in needing this. If anyone from the React team could suggest to me how this might work in React v16, I’d be happy to do the work to put together an RFC.