facebook
Add Diffs to Hydration Warnings
Stacked on #28502.
This builds on the mechanism in #28502 by adding a diff of everything we've collected so far to the thrown error or logged error.
This isn't actually a longest common subsequence diff. This means that there are certain cases that can appear confusing such as a node being added/removed when it really would've appeared later in the list. In fact once a node mismatches, we abort rendering so we don't have the context of what would've been rendered. It's not quite right to use the result of the recovery render because it can use client-only code paths using useSyncExternalStore which would yield false differences. That's why diffing the HTML isn't quite right.
I also present abstract components in the stack, these are presented with the client props and no diff since we don't have the props that were on the server. The lack of difference might be confusing but it's useful for context.
The main thing that's data new here is that we're adding some siblings and props for context.
Examples in the snapshot commit.
Comparing: f7aa5e0aa3e2aa51279af4b6cb5413912cacd7f5...2f2eb4d456fe9a9af01c0295fd5234e2a7217db6
Critical size changes
Includes critical production bundles, as well as any change greater than 2%:
Significant size changes
Includes any change greater than 0.2%:
Expand to show
| Name | +/- | Base | Current | +/- gzip | Base gzip | Current gzip |
|---|---|---|---|---|---|---|
| facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js | +2.13% | 924.30 kB | 944.01 kB | +2.27% | 183.34 kB | 187.50 kB |
| oss-experimental/react-test-renderer/umd/react-test-renderer.development.js | +2.09% | 840.33 kB | 857.93 kB | +2.26% | 176.43 kB | 180.41 kB |
| oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js | +2.09% | 802.37 kB | 819.11 kB | +2.27% | 174.37 kB | 178.33 kB |
| facebook-www/ReactTestRenderer-dev.modern.js | +2.09% | 945.09 kB | 964.80 kB | +2.24% | 187.58 kB | 191.79 kB |
| facebook-www/ReactTestRenderer-dev.classic.js | +2.09% | 945.09 kB | 964.80 kB | +2.24% | 187.58 kB | 191.79 kB |
| react-native/implementations/ReactFabric-dev.js | +2.07% | 950.64 kB | 970.35 kB | +2.15% | 190.57 kB | 194.67 kB |
| oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js | +2.06% | 855.10 kB | 872.70 kB | +2.19% | 179.37 kB | 183.30 kB |
| oss-stable/react-test-renderer/umd/react-test-renderer.development.js | +2.06% | 855.13 kB | 872.72 kB | +2.19% | 179.40 kB | 183.33 kB |
| oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js | +2.05% | 816.55 kB | 833.29 kB | +2.22% | 177.38 kB | 181.31 kB |
| oss-stable/react-test-renderer/cjs/react-test-renderer.development.js | +2.05% | 816.57 kB | 833.32 kB | +2.22% | 177.41 kB | 181.34 kB |
| react-native/implementations/ReactNativeRenderer-dev.js | +2.04% | 965.54 kB | 985.25 kB | +2.14% | 194.22 kB | 198.37 kB |
| oss-experimental/react-art/cjs/react-art.development.js | +2.03% | 825.84 kB | 842.59 kB | +2.22% | 178.21 kB | 182.17 kB |
| oss-stable-semver/react-art/cjs/react-art.development.js | +2.01% | 832.22 kB | 848.97 kB | +2.17% | 180.06 kB | 183.96 kB |
| oss-stable/react-art/cjs/react-art.development.js | +2.01% | 832.25 kB | 848.99 kB | +2.17% | 180.08 kB | 183.99 kB |
| oss-experimental/react-reconciler/cjs/react-reconciler.development.js | +1.95% | 919.97 kB | 937.91 kB | +2.03% | 197.18 kB | 201.18 kB |
| oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js | +1.94% | 923.76 kB | 941.69 kB | +2.01% | 197.99 kB | 201.97 kB |
| oss-stable/react-reconciler/cjs/react-reconciler.development.js | +1.94% | 923.78 kB | 941.72 kB | +2.01% | 198.02 kB | 202.00 kB |
| facebook-www/ReactART-dev.modern.js | +1.88% | 1,048.22 kB | 1,067.93 kB | +2.02% | 204.93 kB | 209.07 kB |
| oss-experimental/react-art/umd/react-art.development.js | +1.87% | 941.71 kB | 959.30 kB | +1.97% | 197.53 kB | 201.43 kB |
| facebook-www/ReactART-dev.classic.js | +1.86% | 1,060.42 kB | 1,080.13 kB | +2.00% | 207.37 kB | 211.50 kB |
| oss-stable-semver/react-art/umd/react-art.development.js | +1.86% | 948.24 kB | 965.83 kB | +1.92% | 199.39 kB | 203.22 kB |
| oss-stable/react-art/umd/react-art.development.js | +1.86% | 948.26 kB | 965.86 kB | +1.92% | 199.41 kB | 203.24 kB |
| react-native/implementations/ReactFabric-dev.fb.js | +1.83% | 1,074.98 kB | 1,094.69 kB | +1.94% | 213.22 kB | 217.36 kB |
| react-native/implementations/ReactNativeRenderer-dev.fb.js | +1.81% | 1,089.60 kB | 1,109.31 kB | +1.91% | 217.07 kB | 221.23 kB |
| oss-experimental/react-dom/umd/react-dom.development.js | +1.40% | 1,369.98 kB | 1,389.14 kB | +1.40% | 291.82 kB | 295.90 kB |
| oss-experimental/react-dom/cjs/react-dom.development.js | +1.40% | 1,306.91 kB | 1,325.14 kB | +1.40% | 288.87 kB | 292.91 kB |
| oss-stable-semver/react-dom/umd/react-dom.development.js | +1.39% | 1,379.08 kB | 1,398.24 kB | +1.41% | 293.35 kB | 297.48 kB |
| oss-stable/react-dom/umd/react-dom.development.js | +1.39% | 1,379.10 kB | 1,398.26 kB | +1.41% | 293.38 kB | 297.50 kB |
| oss-stable-semver/react-dom/cjs/react-dom.development.js | +1.39% | 1,315.75 kB | 1,333.99 kB | +1.40% | 290.39 kB | 294.46 kB |
| oss-stable/react-dom/cjs/react-dom.development.js | +1.39% | 1,315.78 kB | 1,334.01 kB | +1.40% | 290.43 kB | 294.49 kB |
| oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js | +1.38% | 1,324.70 kB | 1,342.94 kB | +1.39% | 293.09 kB | 297.17 kB |
| facebook-www/ReactDOM-dev.modern.js | +1.32% | 1,625.69 kB | 1,647.19 kB | +1.35% | 323.57 kB | 327.92 kB |
| facebook-www/ReactDOMTesting-dev.modern.js | +1.31% | 1,647.16 kB | 1,668.65 kB | +1.34% | 328.10 kB | 332.50 kB |
| facebook-www/ReactDOM-dev.classic.js | +1.30% | 1,655.54 kB | 1,677.04 kB | +1.31% | 328.96 kB | 333.27 kB |
| facebook-www/ReactDOMTesting-dev.classic.js | +1.28% | 1,677.06 kB | 1,698.56 kB | +1.29% | 333.51 kB | 337.81 kB |
| test_utils/ReactAllWarnings.js | Deleted | 65.20 kB | 0.00 kB | Deleted | 16.32 kB | 0.00 kB |
Generated by :no_entry_sign: dangerJS against 2f2eb4d456fe9a9af01c0295fd5234e2a7217db6
I'm sure I could just read the tests but — what's the PROD situation? Do you get a diff in PROD or is it less detailed?
You get nothing in prod. Just minimized error with the error code linking to a page with this message but no context.
However, if you're logging it yourself you do have access to component stacks in onRecoverableError but it's up to a production logging tool to format that and it won't have access to props etc.