From 73e0abad20369e40452fdfc4e1120228e56995fa Mon Sep 17 00:00:00 2001
From: Ivan Babak <babak.john@gmail.com>
Date: Sun, 25 Feb 2018 19:31:36 -0800
Subject: [PATCH] Add diff to hydrate warnings (#10085)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renders DOM attributes in the tags mentioned in the warnings. Borrows the idea and partially implementation of `getNodeSignature` from @giles-v https://github.com/facebook/react/pull/12115

Renders DOM diff showing visually the location where the hydration failed. Example warning with a diff:
```
Warning: Expected server HTML to contain a matching <div>{['children ', …]}</div> in <div>nested<!-- --> <p>children <b>text</b></p></div>.
  <div>
    {'nested'}
    {' '}
    <p>children <b>text</b></p>
+   <div>{['children ', …]}</div>
  </div>
    in div (at SSRMismatchTest.js:280)
    in div (at SSRMismatchTest.js:275)
    in div (at SSRMismatchTest.js:308)
    in SSRMismatchTest (at App.js:14)
    in div (at App.js:11)
    in body (at Chrome.js:17)
    in html (at Chrome.js:9)
    in Chrome (at App.js:10)
    in App (at index.js:8)
```

Requires changes to ReactFiberReconciler interface functions that handle hydration errors to distinguish insertion from replacement and show insertion as one added line in the diff; show replacement as one removed, one added line, at correct position among the parentInstance's DOM children:
- add `index` (use `fiber.index`) to point at which child node the insertion or replacement occurs;
- add `isReplaced` to distinguish insertion from replacement.

Extends the proof-of-concept at commit 6c425e7b90cd61f1124c566b26fa2a5d00261b1b

https://user-images.githubusercontent.com/498274/36652198-11bb46fe-1a62-11e8-9fa2-a612827d1463.gif
---
 .../ssr/src/components/SSRMismatchTest.js     |  41 ++-
 .../src/__tests__/ReactMount-test.js          | 205 +++++++++---
 .../src/__tests__/ReactRenderDocument-test.js |  83 ++++-
 .../src/client/ReactDOMFiberComponent.js      | 305 ++++++++++++++----
 .../src/client/ReactDOMHostConfig.js          |  26 +-
 .../src/ReactFiberHydrationContext.js         |  21 +-
 scripts/rollup/results.json                   |  72 ++---
 7 files changed, 593 insertions(+), 160 deletions(-)

diff --git a/fixtures/ssr/src/components/SSRMismatchTest.js b/fixtures/ssr/src/components/SSRMismatchTest.js
index 74918fa2cccae..6b6c8e7de8013 100644
--- a/fixtures/ssr/src/components/SSRMismatchTest.js
+++ b/fixtures/ssr/src/components/SSRMismatchTest.js
@@ -145,7 +145,7 @@ const testCases = [
     key: 'ssr-warnForDeletedHydratableElement-didNotHydrateInstance',
     renderServer: () => (
       <div>
-        <div />
+        <div>SSRMismatchTest default text</div>
         <span />
       </div>
     ),
@@ -243,18 +243,45 @@ const testCases = [
     ),
   },
   {
-    key: 'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance',
+    key:
+      'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-replacement',
     renderServer: () => (
       <div>
-        <span />
-        <span />
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
       </div>
     ),
     renderBrowser: () => (
       <div>
-        <span />
-        SSRMismatchTest client text
-        <span />
+        nested{' '}
+        <div>
+          children <b>text</b>
+        </div>
+      </div>
+    ),
+  },
+  {
+    key:
+      'ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-insertion',
+    renderServer: () => (
+      <div>
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
+      </div>
+    ),
+    renderBrowser: () => (
+      <div>
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
+        <div>
+          children <b>text</b>
+        </div>
       </div>
     ),
   },
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index be55ecfdde76f..7c7e1e2fcf3f8 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -125,7 +125,8 @@ describe('ReactMount', () => {
     container.innerHTML = ReactDOMServer.renderToString(<div />) + ' ';
 
     expect(() => ReactDOM.hydrate(<div />, container)).toWarnDev(
-      'Did not expect server HTML to contain the text node " " in <container>.',
+      "Warning: Did not expect server HTML to contain the text node {' '}" +
+        ' in <container><div data-reactroot=""></div> </container>.',
     );
   });
 
@@ -134,7 +135,8 @@ describe('ReactMount', () => {
     container.innerHTML = ' ' + ReactDOMServer.renderToString(<div />);
 
     expect(() => ReactDOM.hydrate(<div />, container)).toWarnDev(
-      'Did not expect server HTML to contain the text node " " in <container>.',
+      "Warning: Did not expect server HTML to contain the text node {' '}" +
+        ' in <container> <div data-reactroot=""></div></container>.',
     );
   });
 
@@ -249,8 +251,52 @@ describe('ReactMount', () => {
     );
   });
 
-  it('should warn when a hydrated element has children mismatch', () => {
-    // See fixtures/ssr: ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance
+  it('should warn when a hydrated element has children mismatch, warning has replacement diff', () => {
+    // See fixtures/ssr: ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-replacement
+
+    class Component extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    const div = document.createElement('div');
+    const markup = ReactDOMServer.renderToString(
+      <Component>
+        nested{' '}
+        <p>
+          children <b>text</b>
+        </p>
+      </Component>,
+    );
+    div.innerHTML = markup;
+
+    expect(() =>
+      ReactDOM.hydrate(
+        <Component>
+          nested{' '}
+          <div>
+            children <b>text</b>
+          </div>
+        </Component>,
+        div,
+      ),
+    ).toWarnDev(
+      "Warning: Expected server HTML to contain a matching <div>{['children ', …]}</div>" +
+        ' in <div>nested<!-- --> <p>children <b>text</b></p></div>.\n' +
+        '  <div>\n' +
+        "    {'nested'}\n" +
+        "    {' '}\n" +
+        '-   <p>children <b>text</b></p>\n' +
+        "+   <div>{['children ', …]}</div>\n" +
+        '  </div>\n' +
+        '    in div (at **)\n' +
+        '    in Component (at **)',
+    );
+  });
+
+  it('should warn when a hydrated element has extra child element, warning has insertion diff', () => {
+    // See fixtures/ssr: ssr-warnForInsertedHydratedText-didNotFindHydratableTextInstance-insertion
 
     class Component extends React.Component {
       render() {
@@ -273,6 +319,9 @@ describe('ReactMount', () => {
       ReactDOM.hydrate(
         <Component>
           nested{' '}
+          <p>
+            children <b>text</b>
+          </p>
           <div>
             children <b>text</b>
           </div>
@@ -280,15 +329,14 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Expected server HTML to contain a matching <div> in <div>.\n' +
-        ' <div>\n' +
-        '   nested\n' +
-        '    \n' +
-        '-   \n' +
-        '+  <div />\n' +
-        '   <p>children text</p>\n' +
-        ' </div>\n' +
-        '\n' +
+      "Warning: Expected server HTML to contain a matching <div>{['children ', …]}</div>" +
+        ' in <div>nested<!-- --> <p>children <b>text</b></p></div>.\n' +
+        '  <div>\n' +
+        "    {'nested'}\n" +
+        "    {' '}\n" +
+        '    <p>children <b>text</b></p>\n' +
+        "+   <div>{['children ', …]}</div>\n" +
+        '  </div>\n' +
         '    in div (at **)\n' +
         '    in Component (at **)',
     );
@@ -307,7 +355,7 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Text content did not match. ' +
+      'Warning: Text content did not match. ' +
         'Server: "This markup contains an nbsp entity:   server text" ' +
         'Client: "This markup contains an nbsp entity:   client text"\n' +
         '    in div (at **)',
@@ -333,7 +381,7 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Prop `data-ssr-extra-prop` did not match. ' +
+      'Warning: Prop `data-ssr-extra-prop` did not match. ' +
         'Server: "null" ' +
         'Client: "true"\n' +
         '    in div (at **)',
@@ -380,7 +428,7 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Extra attributes from the server: data-ssr-extra-prop,data-ssr-extra-prop-2\n' +
+      'Warning: Extra attributes from the server: data-ssr-extra-prop,data-ssr-extra-prop-2\n' +
         '    in div (at **)',
     );
   });
@@ -393,7 +441,7 @@ describe('ReactMount', () => {
     div.innerHTML = markup;
 
     expect(() => ReactDOM.hydrate(<div onClick={false} />, div)).toWarnDev(
-      'Expected `onClick` listener to be a function, instead got `false`.\n\n' +
+      'Warning: Expected `onClick` listener to be a function, instead got `false`.\n\n' +
         'If you used to conditionally omit it with onClick={condition && value}, ' +
         'pass onClick={condition ? value : undefined} instead.\n' +
         '    in div (at **)',
@@ -408,7 +456,7 @@ describe('ReactMount', () => {
     div.innerHTML = markup;
 
     expect(() => ReactDOM.hydrate(<div onClick={'a string'} />, div)).toWarnDev(
-      'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
+      'Warning: Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
         '    in div (at **)',
     );
   });
@@ -417,6 +465,7 @@ describe('ReactMount', () => {
     // See fixtures/ssr: ssr-warnForDeletedHydratableElement-didNotHydrateContainerInstance
 
     const div = document.createElement('div');
+    div.setAttribute('data-ssr-mismatch-test-hydrate-root', '');
     const markup =
       'SSRMismatchTest first text' +
       '<br />' +
@@ -433,7 +482,17 @@ describe('ReactMount', () => {
         ],
         div,
       ),
-    ).toWarnDev('Did not expect server HTML to contain a <br> in <div>.');
+    ).toWarnDev(
+      'Warning: Did not expect server HTML to contain a <br />' +
+        ' in <div data-ssr-mismatch-test-hydrate-root="">SSRMismatchTest first text' +
+        '<br><br>SSRMismatchTest second text</div>.\n' +
+        '  <div data-ssr-mismatch-test-hydrate-root="">\n' +
+        "    {'SSRMismatchTest first text'}\n" +
+        '    <br />\n' +
+        '-   <br />\n' +
+        "    {'SSRMismatchTest second text'}\n" +
+        '  </div>',
+    );
   });
 
   it('should warn when hydrate removes an element from a server-rendered sequence', () => {
@@ -442,8 +501,13 @@ describe('ReactMount', () => {
     const div = document.createElement('div');
     const markup = ReactDOMServer.renderToString(
       <div>
-        <div />
+        <div>SSRMismatchTest default text</div>
         <span />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
       </div>,
     );
     div.innerHTML = markup;
@@ -456,7 +520,18 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Did not expect server HTML to contain a <div> in <div>.\n' +
+      'Warning: Did not expect server HTML to contain a <div>SSRMismatchTest default text</div>' +
+        ' in <div data-reactroot=""><div>SSRMismatchTest default text</div><span></span>' +
+        '<div data-ssr-mismatch-padding-after=""></div><d…</div>.\n' +
+        '  <div data-reactroot="">\n' +
+        '-   <div>SSRMismatchTest default text</div>\n' +
+        '    <span></span>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '  </div>\n' +
         '    in span (at **)\n' +
         '    in div (at **)',
     );
@@ -466,14 +541,34 @@ describe('ReactMount', () => {
     // See fixtures/ssr: ssr-warnForDeletedHydratableText-didNotHydrateContainerInstance
 
     const div = document.createElement('div');
+    div.setAttribute('data-ssr-mismatch-test-hydrate-root', '');
     const markup =
-      'SSRMismatchTest server text' + '<br />' + 'SSRMismatchTest default text';
+      'SSRMismatchTest server text' +
+      '<br />' +
+      'SSRMismatchTest default text' +
+      '<div data-ssr-mismatch-padding-after=""></div>' +
+      '<div data-ssr-mismatch-padding-after=""></div>' +
+      '<div data-ssr-mismatch-padding-after=""></div>' +
+      '<div data-ssr-mismatch-padding-after=""></div>' +
+      '<div data-ssr-mismatch-padding-after=""></div>';
     div.innerHTML = markup;
 
     expect(() =>
       ReactDOM.hydrate([<br key={1} />, 'SSRMismatchTest default text'], div),
     ).toWarnDev(
-      'Did not expect server HTML to contain the text node "SSRMismatchTest server text" in <div>.\n' +
+      "Warning: Did not expect server HTML to contain the text node {'SSRMismatchTest server text'}" +
+        ' in <div data-ssr-mismatch-test-hydrate-root="">SSRMismatchTest server text' +
+        '<br>SSRMismatchTest default text<div data-ssr-mismatch-padding-after=""><…</div>.\n' +
+        '  <div data-ssr-mismatch-test-hydrate-root="">\n' +
+        "-   {'SSRMismatchTest server text'}\n" +
+        '    <br />\n' +
+        "    {'SSRMismatchTest default text'}\n" +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '  </div>\n' +
         '    in br (at **)',
     );
   });
@@ -486,6 +581,11 @@ describe('ReactMount', () => {
       <div>
         SSRMismatchTest server text
         <span />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
       </div>,
     );
     div.innerHTML = markup;
@@ -498,7 +598,18 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Did not expect server HTML to contain the text node "SSRMismatchTest server text" in <div>.\n' +
+      "Warning: Did not expect server HTML to contain the text node {'SSRMismatchTest server text'}" +
+        ' in <div data-reactroot="">SSRMismatchTest server text<span></span>' +
+        '<div data-ssr-mismatch-padding-after=""></div><div data-ssr-…</div>.\n' +
+        '  <div data-reactroot="">\n' +
+        "-   {'SSRMismatchTest server text'}\n" +
+        '    <span></span>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '  </div>\n' +
         '    in span (at **)\n' +
         '    in div (at **)',
     );
@@ -514,12 +625,12 @@ describe('ReactMount', () => {
     expect(() =>
       ReactDOM.hydrate(<span>SSRMismatchTest default text</span>, div),
     ).toWarnDev(
-      'Expected server HTML to contain a matching <span> in <div>.\n' +
-        ' <div>\n' +
-        '-  SSRMismatchTest default text\n' +
-        '+  <span />\n' +
-        ' </div>\n' +
-        '\n' +
+      'Warning: Expected server HTML to contain a matching <span>SSRMismatchTest default text</span>' +
+        ' in <div>SSRMismatchTest default text</div>.\n' +
+        '  <div>\n' +
+        "-   {'SSRMismatchTest default text'}\n" +
+        '+   <span>SSRMismatchTest default text</span>\n' +
+        '  </div>\n' +
         '    in span (at **)',
     );
   });
@@ -543,12 +654,12 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Expected server HTML to contain a matching <p> in <div>.\n' +
-        ' <div>\n' +
-        '-  <em>SSRMismatchTest default text</em>\n' +
-        '+  <p />\n' +
-        ' </div>\n' +
-        '\n' +
+      'Warning: Expected server HTML to contain a matching <p>SSRMismatchTest default text</p>' +
+        ' in <div data-reactroot=""><em>SSRMismatchTest default text</em></div>.\n' +
+        '  <div data-reactroot="">\n' +
+        '-   <em>SSRMismatchTest default text</em>\n' +
+        '+   <p>SSRMismatchTest default text</p>\n' +
+        '  </div>\n' +
         '    in p (at **)\n' +
         '    in div (at **)',
     );
@@ -566,7 +677,8 @@ describe('ReactMount', () => {
     expect(() =>
       ReactDOM.hydrate('SSRMismatchTest default text', div),
     ).toWarnDev(
-      'Expected server HTML to contain a matching text node for "SSRMismatchTest default text" in <div>.',
+      "Warning: Expected server HTML to contain a matching text node for {'SSRMismatchTest default text'}" +
+        ' in <div><span data-reactroot="">SSRMismatchTest default text</span></div>.',
     );
   });
 
@@ -578,6 +690,11 @@ describe('ReactMount', () => {
       <div>
         <span />
         <span />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
+        <div data-ssr-mismatch-padding-after="" />
       </div>,
     );
     div.innerHTML = markup;
@@ -592,7 +709,19 @@ describe('ReactMount', () => {
         div,
       ),
     ).toWarnDev(
-      'Expected server HTML to contain a matching text node for "SSRMismatchTest client text" in <div>.\n' +
+      "Warning: Expected server HTML to contain a matching text node for {'SSRMismatchTest client text'}" +
+        ' in <div data-reactroot=""><span></span><span></span>' +
+        '<div data-ssr-mismatch-padding-after=""></div><div data-ssr-mismatch-paddi…</div>.\n' +
+        '  <div data-reactroot="">\n' +
+        '    <span></span>\n' +
+        '-   <span></span>\n' +
+        "+   {'SSRMismatchTest client text'}\n" +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '    <div data-ssr-mismatch-padding-after=""></div>\n' +
+        '  </div>\n' +
         '    in div (at **)',
     );
   });
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index c9b8cb89f3c53..26f23a18df0f5 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -364,15 +364,37 @@ describe('rendering React components at document', () => {
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
 
-    it('renders over an existing text child without throwing', () => {
+    it('renders over an existing text child without throwing, warning has deletion diff', () => {
       const container = document.createElement('div');
       container.textContent = 'potato';
       expect(() => ReactDOM.hydrate(<div>parsnip</div>, container)).toWarnDev(
-        'Expected server HTML to contain a matching <div> in <div>.',
+        'Warning: Expected server HTML to contain a matching <div>parsnip</div> in <div>potato</div>.\n' +
+          '  <div>\n' +
+          "-   {'potato'}\n" +
+          '+   <div>parsnip</div>\n' +
+          '  </div>\n' +
+          '    in div (at **)',
       );
       expect(container.textContent).toBe('parsnip');
     });
 
+    it('renders an array of texts over an existing text child without throwing, warning has deletion diff', () => {
+      const container = document.createElement('div');
+      container.textContent = 'potato';
+      expect(() =>
+        ReactDOM.hydrate(<div>{['parsnip', 'carrot']}</div>, container),
+      ).toWarnDev(
+        "Warning: Expected server HTML to contain a matching <div>{['parsnip', 'carrot']}</div>" +
+          ' in <div>potato</div>.\n' +
+          '  <div>\n' +
+          "-   {'potato'}\n" +
+          "+   <div>{['parsnip', 'carrot']}</div>\n" +
+          '  </div>\n' +
+          '    in div (at **)',
+      );
+      expect(container.textContent).toBe('parsnipcarrot');
+    });
+
     it('should give helpful errors on state desync', () => {
       class Component extends React.Component {
         render() {
@@ -417,7 +439,62 @@ describe('rendering React components at document', () => {
       // getTestDocument() has an extra <meta> that we didn't render.
       expect(() =>
         ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
-      ).toWarnDev('Did not expect server HTML to contain a <meta> in <head>.');
+      ).toWarnDev(
+        'Warning: Did not expect server HTML to contain a <meta charset="utf-8" />' +
+          ' in <head><meta charset="utf-8"><title>test doc</title></head>.\n' +
+          '  <head>\n' +
+          '-   <meta charset="utf-8" />\n' +
+          '    <title>test doc</title>\n' +
+          '  </head>\n' +
+          '    in title (at **)\n' +
+          '    in head (at **)\n' +
+          '    in html (at **)\n' +
+          '    in Component (at **)',
+      );
+      expect(testDocument.body.innerHTML).toBe('Hello world');
+    });
+
+    it('clips the hydrate warning if the content is too long', () => {
+      let longTitle = 'test doc';
+      while (longTitle.length < 100) {
+        longTitle += ' long title';
+      }
+      const testDocument = getTestDocument(
+        '<!doctype html><html><meta charset=utf-8><title>' +
+          longTitle +
+          '</title>',
+      );
+
+      class Component extends React.Component {
+        render() {
+          return (
+            <html>
+              <head>
+                <title>Hello World</title>
+              </head>
+              <body>{this.props.text}</body>
+            </html>
+          );
+        }
+      }
+
+      // getTestDocument() has an extra <meta> that we didn't render.
+      expect(() =>
+        ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
+      ).toWarnDev(
+        'Warning: Did not expect server HTML to contain a <meta charset="utf-8" />' +
+          ' in <head><meta charset="utf-8"><title>' +
+          'test doc long title long title long title long title long title long ti…</head>.\n' +
+          '  <head>\n' +
+          '-   <meta charset="utf-8" />\n' +
+          '    <title>test doc long title long title long title long title long title' +
+          ' long title long title long title lon…</title>\n' +
+          '  </head>\n' +
+          '    in title (at **)\n' +
+          '    in head (at **)\n' +
+          '    in html (at **)\n' +
+          '    in Component (at **)',
+      );
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 54bf2b7c73f71..2f77cf009e6d9 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -40,11 +40,14 @@ import {
 } from '../shared/DOMProperty';
 import assertValidProps from '../shared/assertValidProps';
 import {
+  ELEMENT_NODE,
+  TEXT_NODE,
+  COMMENT_NODE,
   DOCUMENT_NODE,
   DOCUMENT_FRAGMENT_NODE,
-  ELEMENT_NODE,
 } from '../shared/HTMLNodeType';
 import isCustomComponent from '../shared/isCustomComponent';
+import omittedCloseTags from '../shared/omittedCloseTags';
 import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
@@ -68,6 +71,10 @@ const HTML = '__html';
 const {html: HTML_NAMESPACE} = Namespaces;
 
 let getStack = emptyFunction.thatReturns('');
+let getNodeSignature = emptyFunction.thatReturns('<…>');
+let getTagWithPropsSignature = emptyFunction.thatReturns('<…>');
+let getNodeSurroundingsAndDiff = emptyFunction.thatReturns('');
+let findNodeIndex = emptyFunction.thatReturns(-1);
 
 let warnedUnknownTags;
 let suppressHydrationWarning;
@@ -84,6 +91,190 @@ let normalizeHTML;
 if (__DEV__) {
   getStack = getCurrentFiberStackAddendum;
 
+  getNodeSignature = function(node: Node, openTagOnly = false) {
+    // TODO: How do we want to print quotes inside quotes?
+    // TODO: How do we want to print special characters such as &nbsp;?
+    const nodeType = node.nodeType;
+    if (nodeType === COMMENT_NODE) {
+      return '<!--' + node.textContent + '-->';
+    }
+    if (nodeType === TEXT_NODE) {
+      return "{'" + node.textContent + "'}";
+    }
+    if (nodeType !== ELEMENT_NODE) {
+      return node.nodeName;
+    }
+    const tag = node.nodeName.toLowerCase();
+    let ret = '<' + tag;
+    if (node instanceof Element) {
+      const attrs = node.attributes;
+      const ic = attrs.length;
+      for (let i = 0; i < ic; ++i) {
+        ret += ' ' + attrs[i].name + '="' + attrs[i].value + '"';
+      }
+    }
+    if (openTagOnly) {
+      ret += '>';
+    } else {
+      const childrenString =
+        node instanceof Element ? node.innerHTML : node.textContent;
+      if (omittedCloseTags.hasOwnProperty(tag)) {
+        ret += ' />';
+      } else {
+        if (childrenString) {
+          ret +=
+            '>' +
+            childrenString.substring(0, 100) +
+            (childrenString.length > 100 ? '…' : '') +
+            '</';
+        } else {
+          ret += '></';
+        }
+        ret += tag + '>';
+      }
+    }
+    return ret;
+  };
+
+  const objectPrototypeToString = Object.prototype.toString;
+
+  // TODO: Reuse RESERVED_PROPS from ReactPartialRenderer.
+  const RESERVED_PROPS = {
+    children: null,
+    dangerouslySetInnerHTML: null,
+    suppressContentEditableWarning: null,
+    suppressHydrationWarning: null,
+  };
+
+  getTagWithPropsSignature = function(tag: string, props: Object) {
+    let ret = '<' + tag;
+
+    for (const propKey in props) {
+      if (!props.hasOwnProperty(propKey)) {
+        continue;
+      }
+      let propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      if (RESERVED_PROPS.hasOwnProperty(propKey)) {
+        continue;
+      }
+      let markup = null;
+      if (propKey === STYLE) {
+        markup = propKey + '={…}';
+      } else if (typeof propValue === 'function') {
+        markup = propKey + '={' + propValue.name || propValue.toString() + '}';
+      } else {
+        try {
+          markup = propKey + '={' + JSON.stringify(propValue) + '}';
+        } catch (ex) {
+          markup =
+            propKey + '={' + objectPrototypeToString.call(propValue) + '}';
+        }
+      }
+      if (markup) {
+        ret += ' ' + markup;
+      }
+    }
+
+    if (omittedCloseTags.hasOwnProperty(tag)) {
+      ret += ' />';
+    } else {
+      if (typeof props.children === 'string') {
+        ret += '>' + props.children + '</';
+      } else if (Array.isArray(props.children)) {
+        ret += '>{[';
+        const ic = props.children.length;
+        for (let i = 0; i < ic; ++i) {
+          ret += i > 0 ? ', ' : '';
+          const child = props.children[i];
+          if (typeof child === 'string') {
+            ret += "'" + child + "'";
+          } else {
+            ret += '…';
+          }
+        }
+        ret += ']}</';
+      } else if (props.children) {
+        ret += '>{…}</';
+      } else {
+        ret += '></';
+      }
+      ret += tag + '>';
+    }
+
+    return ret;
+  };
+
+  getNodeSurroundingsAndDiff = function(
+    parentNode: Element | Document,
+    deletedIndex: number,
+    insertedIndex: number,
+    insertTag: string | null,
+    insertProps: Object | null,
+    insertText: string | null,
+  ) {
+    let ret = '';
+    const INDENT = '  ';
+    const DIFF_ADDED = '\n+ ';
+    const DIFF_REMOVED = '\n- ';
+    const DIFF_UNCHANGED = '\n  ';
+    ret += DIFF_UNCHANGED + getNodeSignature(parentNode, true);
+    let inserted = false;
+    const insert = () => {
+      if (!inserted) {
+        if (insertTag) {
+          inserted = true;
+          ret +=
+            DIFF_ADDED +
+            INDENT +
+            getTagWithPropsSignature(insertTag, insertProps || {});
+        } else if (typeof insertText === 'string') {
+          inserted = true;
+          ret += DIFF_ADDED + INDENT + "{'" + insertText + "'}";
+        }
+      }
+    };
+    const childNodes = parentNode.childNodes;
+    const ic = childNodes.length;
+    let skipped = 0;
+    for (let i = 0; i < ic; ++i) {
+      const node = childNodes[i];
+      // TODO: Copy-paste condition from `getNextHydratableSibling`, reuse?
+      if (
+        node &&
+        node.nodeType !== ELEMENT_NODE &&
+        node.nodeType !== TEXT_NODE
+      ) {
+        ++skipped;
+        continue;
+      }
+      if (i - skipped === deletedIndex) {
+        ret += DIFF_REMOVED + INDENT + getNodeSignature(node);
+      } else {
+        ret += DIFF_UNCHANGED + INDENT + getNodeSignature(node);
+      }
+      if (i - skipped === insertedIndex) {
+        insert();
+      }
+    }
+    insert();
+    // TODO: Cannot tell if more sibling React elements were expected to be hydrated after the current one.
+    ret += DIFF_UNCHANGED + '</' + parentNode.nodeName.toLowerCase() + '>';
+    return ret;
+  };
+
+  findNodeIndex = function(nodes: NodeList<Node>, node: Node) {
+    const ic = nodes.length;
+    for (let i = 0; i < ic; ++i) {
+      if (nodes[i] === node) {
+        return i;
+      }
+    }
+    return -1;
+  };
+
   warnedUnknownTags = {
     // Chrome is the only major browser not shipping <time>. But as of July
     // 2017 it intends to ship it due to widespread usage. We intentionally
@@ -1132,9 +1323,17 @@ export function warnForDeletedHydratableElement(
     didWarnInvalidHydration = true;
     warning(
       false,
-      'Did not expect server HTML to contain a <%s> in <%s>.%s',
-      child.nodeName.toLowerCase(),
-      parentNode.nodeName.toLowerCase(),
+      'Did not expect server HTML to contain a %s in %s.%s%s',
+      getNodeSignature(child),
+      getNodeSignature(parentNode),
+      getNodeSurroundingsAndDiff(
+        parentNode,
+        findNodeIndex(parentNode.childNodes, child),
+        -1,
+        null,
+        null,
+        null,
+      ),
       getStack(),
     );
   }
@@ -1151,9 +1350,17 @@ export function warnForDeletedHydratableText(
     didWarnInvalidHydration = true;
     warning(
       false,
-      'Did not expect server HTML to contain the text node "%s" in <%s>.%s',
+      "Did not expect server HTML to contain the text node {'%s'} in %s.%s%s",
       child.nodeValue,
-      parentNode.nodeName.toLowerCase(),
+      getNodeSignature(parentNode),
+      getNodeSurroundingsAndDiff(
+        parentNode,
+        findNodeIndex(parentNode.childNodes, child),
+        -1,
+        null,
+        null,
+        null,
+      ),
       getStack(),
     );
   }
@@ -1164,74 +1371,26 @@ export function warnForInsertedHydratedElement(
   tag: string,
   props: Object,
   index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__) {
     if (didWarnInvalidHydration) {
       return;
     }
     didWarnInvalidHydration = true;
-    let htmlContext = [];
-    const ic = parentNode.childNodes.length;
-    const parentNodeName = parentNode.nodeName.toLowerCase();
-    if (parentNode.nodeType === ELEMENT_NODE) {
-      // $FlowFixMe https://github.com/facebook/flow/issues/1032
-      const parentElement = (parentNode: Element);
-      htmlContext.push(
-        ' <' +
-          parentNodeName +
-          (parentElement.className
-            ? ' className="' + parentElement.className + '"'
-            : '') +
-          '>',
-      );
-    } else {
-      htmlContext.push(' <' + parentNodeName + '>');
-    }
-    if (index - 5 > 0) {
-      htmlContext.push('   …');
-    }
-    for (let i = index - 5; i <= index + 5; ++i) {
-      if (i >= 0 && i < ic) {
-        const childNode = parentNode.childNodes[i];
-        const childNodeName = childNode.nodeName.toLowerCase();
-        const diffPrefix = i === index ? '-  ' : '   ';
-        if (childNode.nodeType === ELEMENT_NODE) {
-          // $FlowFixMe https://github.com/facebook/flow/issues/1032
-          const childElement = (childNode: Element);
-          htmlContext.push(
-            diffPrefix +
-              '<' +
-              childNodeName +
-              (childElement.className
-                ? ' className="' + childElement.className + '"'
-                : '') +
-              (childElement.textContent
-                ? '>' + childElement.textContent + '</' + childNodeName + '>'
-                : ' />'),
-          );
-        } else {
-          htmlContext.push(diffPrefix + childNode.textContent);
-        }
-        if (i === index) {
-          htmlContext.push(
-            '+  <' +
-              tag +
-              (props.className ? ' className="' + props.className + '"' : '') +
-              ' />',
-          );
-        }
-      }
-    }
-    if (index + 5 < ic - 1) {
-      htmlContext.push('   …');
-    }
-    htmlContext.push(' </' + parentNodeName + '>');
     warning(
       false,
-      'Expected server HTML to contain a matching <%s> in <%s>.%s%s',
-      tag,
-      parentNodeName,
-      '\n' + htmlContext.join('\n') + '\n',
+      'Expected server HTML to contain a matching %s in %s.%s%s',
+      getTagWithPropsSignature(tag, props),
+      getNodeSignature(parentNode),
+      getNodeSurroundingsAndDiff(
+        parentNode,
+        isReplaced ? index : -1,
+        index,
+        tag,
+        props,
+        null,
+      ),
       getStack(),
     );
   }
@@ -1240,6 +1399,8 @@ export function warnForInsertedHydratedElement(
 export function warnForInsertedHydratedText(
   parentNode: Element | Document,
   text: string,
+  index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__) {
     if (text === '') {
@@ -1255,9 +1416,17 @@ export function warnForInsertedHydratedText(
     didWarnInvalidHydration = true;
     warning(
       false,
-      'Expected server HTML to contain a matching text node for "%s" in <%s>.%s',
+      "Expected server HTML to contain a matching text node for {'%s'} in %s.%s%s",
       text,
-      parentNode.nodeName.toLowerCase(),
+      getNodeSignature(parentNode),
+      getNodeSurroundingsAndDiff(
+        parentNode,
+        isReplaced ? index : -1,
+        index,
+        null,
+        null,
+        text,
+      ),
       getStack(),
     );
   }
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8153d2b00a802..ab53a8ea14aa3 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -543,18 +543,27 @@ export function didNotFindHydratableContainerInstance(
   type: string,
   props: Props,
   index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__) {
-    warnForInsertedHydratedElement(parentContainer, type, props, index);
+    warnForInsertedHydratedElement(
+      parentContainer,
+      type,
+      props,
+      index,
+      isReplaced,
+    );
   }
 }
 
 export function didNotFindHydratableContainerTextInstance(
   parentContainer: Container,
   text: string,
+  index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__) {
-    warnForInsertedHydratedText(parentContainer, text);
+    warnForInsertedHydratedText(parentContainer, text, index, isReplaced);
   }
 }
 
@@ -565,9 +574,16 @@ export function didNotFindHydratableInstance(
   type: string,
   props: Props,
   index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    warnForInsertedHydratedElement(parentInstance, type, props, index);
+    warnForInsertedHydratedElement(
+      parentInstance,
+      type,
+      props,
+      index,
+      isReplaced,
+    );
   }
 }
 
@@ -576,8 +592,10 @@ export function didNotFindHydratableTextInstance(
   parentProps: Props,
   parentInstance: Instance,
   text: string,
+  index: number,
+  isReplaced: boolean,
 ) {
   if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    warnForInsertedHydratedText(parentInstance, text);
+    warnForInsertedHydratedText(parentInstance, text, index, isReplaced);
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index ac4fc89ec66dc..95ae00380289c 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -99,7 +99,11 @@ function deleteHydratableInstance(
   }
 }
 
-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+function insertNonHydratedInstance(
+  returnFiber: Fiber,
+  fiber: Fiber,
+  isReplaced: boolean,
+) {
   fiber.effectTag |= Placement;
   if (__DEV__) {
     switch (returnFiber.tag) {
@@ -114,11 +118,17 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
               type,
               props,
               fiber.index,
+              isReplaced,
             );
             break;
           case HostText:
             const text = fiber.pendingProps;
-            didNotFindHydratableContainerTextInstance(parentContainer, text);
+            didNotFindHydratableContainerTextInstance(
+              parentContainer,
+              text,
+              fiber.index,
+              isReplaced,
+            );
             break;
         }
         break;
@@ -138,6 +148,7 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
               type,
               props,
               fiber.index,
+              isReplaced,
             );
             break;
           case HostText:
@@ -147,6 +158,8 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
               parentProps,
               parentInstance,
               text,
+              fiber.index,
+              isReplaced,
             );
             break;
         }
@@ -191,7 +204,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
     // Nothing to hydrate. Make it an insertion.
-    insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+    insertNonHydratedInstance((hydrationParentFiber: any), fiber, false);
     isHydrating = false;
     hydrationParentFiber = fiber;
     return;
@@ -204,7 +217,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     nextInstance = getNextHydratableSibling(firstAttemptedInstance);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
-      insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+      insertNonHydratedInstance((hydrationParentFiber: any), fiber, true);
       isHydrating = false;
       hydrationParentFiber = fiber;
       return;
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index 6c7b335208dfe..41faf3fcb0cae 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -46,29 +46,29 @@
       "filename": "react-dom.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 643066,
-      "gzip": 149750
+      "size": 647324,
+      "gzip": 150750
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 96424,
-      "gzip": 31236
+      "size": 96522,
+      "gzip": 31260
     },
     {
       "filename": "react-dom.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-dom",
-      "size": 627057,
-      "gzip": 145658
+      "size": 631307,
+      "gzip": 146658
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "react-dom",
-      "size": 94885,
-      "gzip": 30190
+      "size": 94973,
+      "gzip": 30207
     },
     {
       "filename": "ReactDOM-dev.js",
@@ -221,8 +221,8 @@
       "filename": "react-art.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-art",
-      "size": 417714,
-      "gzip": 93230
+      "size": 417813,
+      "gzip": 93247
     },
     {
       "filename": "react-art.production.min.js",
@@ -235,8 +235,8 @@
       "filename": "react-art.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-art",
-      "size": 341787,
-      "gzip": 73869
+      "size": 341886,
+      "gzip": 73885
     },
     {
       "filename": "react-art.production.min.js",
@@ -291,8 +291,8 @@
       "filename": "react-test-renderer.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-test-renderer",
-      "size": 348592,
-      "gzip": 75379
+      "size": 348691,
+      "gzip": 75394
     },
     {
       "filename": "react-test-renderer.production.min.js",
@@ -305,8 +305,8 @@
       "filename": "react-test-renderer.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-test-renderer",
-      "size": 339203,
-      "gzip": 72584
+      "size": 339302,
+      "gzip": 72599
     },
     {
       "filename": "react-test-renderer.production.min.js",
@@ -375,8 +375,8 @@
       "filename": "react-reconciler.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-reconciler",
-      "size": 332098,
-      "gzip": 70332
+      "size": 332197,
+      "gzip": 70348
     },
     {
       "filename": "react-reconciler.production.min.js",
@@ -389,8 +389,8 @@
       "filename": "react-reconciler-persistent.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-reconciler",
-      "size": 330618,
-      "gzip": 69716
+      "size": 330717,
+      "gzip": 69731
     },
     {
       "filename": "react-reconciler-persistent.production.min.js",
@@ -515,15 +515,15 @@
       "filename": "ReactDOM-dev.js",
       "bundleType": "FB_WWW_DEV",
       "packageName": "react-dom",
-      "size": 637215,
-      "gzip": 145069
+      "size": 641820,
+      "gzip": 146072
     },
     {
       "filename": "ReactDOM-prod.js",
       "bundleType": "FB_WWW_PROD",
       "packageName": "react-dom",
-      "size": 275646,
-      "gzip": 51782
+      "size": 275786,
+      "gzip": 51804
     },
     {
       "filename": "ReactTestUtils-dev.js",
@@ -564,8 +564,8 @@
       "filename": "ReactART-dev.js",
       "bundleType": "FB_WWW_DEV",
       "packageName": "react-art",
-      "size": 334322,
-      "gzip": 69699
+      "size": 334547,
+      "gzip": 69715
     },
     {
       "filename": "ReactART-prod.js",
@@ -578,8 +578,8 @@
       "filename": "ReactNativeRenderer-dev.js",
       "bundleType": "RN_FB_DEV",
       "packageName": "react-native-renderer",
-      "size": 468884,
-      "gzip": 102463
+      "size": 469109,
+      "gzip": 102479
     },
     {
       "filename": "ReactNativeRenderer-prod.js",
@@ -592,8 +592,8 @@
       "filename": "ReactNativeRenderer-dev.js",
       "bundleType": "RN_OSS_DEV",
       "packageName": "react-native-renderer",
-      "size": 468538,
-      "gzip": 102397
+      "size": 468763,
+      "gzip": 102415
     },
     {
       "filename": "ReactNativeRenderer-prod.js",
@@ -606,8 +606,8 @@
       "filename": "ReactFabric-dev.js",
       "bundleType": "RN_FB_DEV",
       "packageName": "react-native-renderer",
-      "size": 459583,
-      "gzip": 100172
+      "size": 459808,
+      "gzip": 100191
     },
     {
       "filename": "ReactFabric-prod.js",
@@ -620,8 +620,8 @@
       "filename": "ReactFabric-dev.js",
       "bundleType": "RN_OSS_DEV",
       "packageName": "react-native-renderer",
-      "size": 459620,
-      "gzip": 100190
+      "size": 459845,
+      "gzip": 100205
     },
     {
       "filename": "ReactFabric-prod.js",
@@ -634,8 +634,8 @@
       "filename": "ReactTestRenderer-dev.js",
       "bundleType": "FB_WWW_DEV",
       "packageName": "react-test-renderer",
-      "size": 345329,
-      "gzip": 72160
+      "size": 345554,
+      "gzip": 72176
     },
     {
       "filename": "ReactShallowRenderer-dev.js",