Feature Request: Need ability to debug checksum mismatch in production environment

[lingyan]

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

Feature

What is the current behavior?

Currently, if checksum mismatch happens when mounting React tree on server rendered markup, we can only get markup difference in dev environment. Reality is, mismatches happen more in production env, where there are much bigger variety of user contexts that can trigger the mismatch. It is very hard to reproduce the mismatch scenarios in dev environment, without knowing where the markup difference is.

What is the expected behavior?

What I'm proposing is to provide apps a way to obtain the markup difference even in production environment, so that the diffs can be reported back to developers for debugging mismatch root cause.

Fiber would probably change how checksum works. But before it is ready, we still need ability to debug this issue in production env.

I was trying something like this: lingyan/react@master...reportMarkupDiff It works but probably is not the best approach. The idea is simple though:

• provide a way for application to control which react tree to report markup diff upon checksum mismatch, as application might only care about mismatch in a subset of the React trees mounted and there would be concerns with markup normalization cost:
  • I am using a data attribute on container node, but it is not the best approach, since container can also be document node.
  • I thought about two alternative ways but neither of them is perfect:
    • add reportMarkupDiff option to ReactDom.render() signature
    • add a prop like reportMarkupDiff to the element being rendered
• allow application to collect the markup diff even in production environment:
  • I'm setting the markup difference as the value of the same data attribute on the container node

Please share your thoughts and ideas. I am up for raising a PR to implement the most ideal approach. Thanks!

[gaearon]

React 16 won’t be using checksum validation at all so seems like this is moot. We will still show a diff, but it seems like doing that involves a lot of DEV code that we don’t want to ship to production users. So I’ll close this, but if you feel strongly after 16 is released, please let me know and we can take another look.