diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
index 0c4edff51a490..f578748e923d2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
@@ -182,7 +182,8 @@ describe('ReactDOMFizzForm', () => {
         ReactDOMClient.hydrateRoot(container, <App isClient={true} />);
       });
     }).toErrorDev(
-      'Prop `action` did not match. Server: "function" Client: "action"',
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      {withoutStack: true},
     );
   });
 
@@ -344,7 +345,12 @@ describe('ReactDOMFizzForm', () => {
       await act(async () => {
         root = ReactDOMClient.hydrateRoot(container, <App />);
       });
-    }).toErrorDev(['Prop `formTarget` did not match.']);
+    }).toErrorDev(
+      [
+        "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      ],
+      {withoutStack: true},
+    );
     await act(async () => {
       root.render(<App isUpdate={true} />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 33b2b322de873..1caaeca68d293 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -47,6 +47,15 @@ let waitForPaint;
 let clientAct;
 let streamingContainer;
 
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -2391,7 +2400,9 @@ describe('ReactDOMFizzServer', () => {
 
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log('Log recoverable error: ' + error.message);
+        Scheduler.log(
+          'Log recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
 
@@ -2399,18 +2410,12 @@ describe('ReactDOMFizzServer', () => {
       // The first paint switches to client rendering due to mismatch
       await waitForPaint([
         'client',
-        'Log recoverable error: Hydration failed because the initial ' +
-          'UI does not match what was rendered on the server.',
-        'Log recoverable error: There was an error while hydrating. ' +
-          'Because the error happened outside of a Suspense boundary, the ' +
-          'entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
         'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-        'Warning: Expected server HTML to contain a matching <div> in the root.\n' +
-          '    in div (at **)\n' +
-          '    in App (at **)',
       ],
       {withoutStack: 1},
     );
@@ -2474,7 +2479,9 @@ describe('ReactDOMFizzServer', () => {
 
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log('Log recoverable error: ' + error.message);
+        Scheduler.log(
+          'Log recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
 
@@ -2483,18 +2490,12 @@ describe('ReactDOMFizzServer', () => {
       // The first paint switches to client rendering due to mismatch
       await waitForPaint([
         'client',
-        'Log recoverable error: Hydration failed because the initial ' +
-          'UI does not match what was rendered on the server.',
-        'Log recoverable error: There was an error while hydrating. ' +
-          'Because the error happened outside of a Suspense boundary, the ' +
-          'entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
         'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-        'Warning: Expected server HTML to contain a matching <div> in the root.\n' +
-          '    in div (at **)\n' +
-          '    in App (at **)',
       ],
       {withoutStack: 1},
     );
@@ -2557,7 +2558,7 @@ describe('ReactDOMFizzServer', () => {
       isClient = true;
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       });
 
@@ -2567,9 +2568,7 @@ describe('ReactDOMFizzServer', () => {
         await waitForAll([
           'Yay!',
           'Hydration error',
-          'There was an error while hydrating. Because the error happened ' +
-            'outside of a Suspense boundary, the entire root will switch ' +
-            'to client rendering.',
+          'There was an error while hydrating.',
         ]);
       }).toErrorDev(
         'An error occurred during hydration. The server HTML was replaced',
@@ -2739,7 +2738,7 @@ describe('ReactDOMFizzServer', () => {
       isClient = true;
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       });
 
@@ -2748,7 +2747,7 @@ describe('ReactDOMFizzServer', () => {
       await waitForAll([
         'Yay!',
         'Hydration error',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+        'There was an error while hydrating this Suspense boundary.',
       ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
@@ -3194,7 +3193,7 @@ describe('ReactDOMFizzServer', () => {
       isClient = true;
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       });
 
@@ -3202,8 +3201,7 @@ describe('ReactDOMFizzServer', () => {
       // to client rendering.
       await waitForAll([
         'Hydration error',
-        'There was an error while hydrating this Suspense boundary. Switched ' +
-          'to client rendering.',
+        'There was an error while hydrating this Suspense boundary.',
       ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
@@ -3263,7 +3261,9 @@ describe('ReactDOMFizzServer', () => {
 
     const root = ReactDOMClient.createRoot(container, {
       onRecoverableError(error) {
-        Scheduler.log('Logged a recoverable error: ' + error.message);
+        Scheduler.log(
+          'Logged a recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
     React.startTransition(() => {
@@ -3339,7 +3339,9 @@ describe('ReactDOMFizzServer', () => {
     isClient = true;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log('Logged recoverable error: ' + error.message);
+        Scheduler.log(
+          'Logged recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
 
@@ -3349,11 +3351,11 @@ describe('ReactDOMFizzServer', () => {
 
       'Logged recoverable error: Hydration error',
       'Logged recoverable error: There was an error while hydrating this ' +
-        'Suspense boundary. Switched to client rendering.',
+        'Suspense boundary.',
 
       'Logged recoverable error: Hydration error',
       'Logged recoverable error: There was an error while hydrating this ' +
-        'Suspense boundary. Switched to client rendering.',
+        'Suspense boundary.',
     ]);
   });
 
@@ -4395,7 +4397,9 @@ describe('ReactDOMFizzServer', () => {
     const [ClientApp, clientResolve] = makeApp();
     ReactDOMClient.hydrateRoot(container, <ClientApp />, {
       onRecoverableError(error) {
-        Scheduler.log('Logged recoverable error: ' + error.message);
+        Scheduler.log(
+          'Logged recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
     await waitForAll([]);
@@ -4471,7 +4475,9 @@ describe('ReactDOMFizzServer', () => {
     const [ClientApp, clientResolve] = makeApp();
     ReactDOMClient.hydrateRoot(container, <ClientApp text="replaced" />, {
       onRecoverableError(error) {
-        Scheduler.log('Logged recoverable error: ' + error.message);
+        Scheduler.log(
+          'Logged recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
     await waitForAll([]);
@@ -4486,14 +4492,10 @@ describe('ReactDOMFizzServer', () => {
     // Now that the boundary resolves to it's children the hydration completes and discovers that there is a mismatch requiring
     // client-side rendering.
     await clientResolve();
-    await expect(async () => {
-      await waitForAll([
-        'Logged recoverable error: Text content does not match server-rendered HTML.',
-        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-    }).toErrorDev(
-      'Warning: Text content did not match. Server: "initial" Client: "replaced',
-    );
+    await waitForAll([
+      "Logged recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+      'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
+    ]);
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <p>A</p>
@@ -4539,12 +4541,14 @@ describe('ReactDOMFizzServer', () => {
 
       ReactDOMClient.hydrateRoot(container, <App text="replaced" />, {
         onRecoverableError(error) {
-          Scheduler.log('Logged recoverable error: ' + error.message);
+          Scheduler.log(
+            'Logged recoverable error: ' + normalizeError(error.message),
+          );
         },
       });
       await waitForAll([
-        'Logged recoverable error: Text content does not match server-rendered HTML.',
-        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+        "Logged recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
       ]);
 
       expect(getVisibleChildren(container)).toEqual(
@@ -4556,21 +4560,7 @@ describe('ReactDOMFizzServer', () => {
       );
 
       await waitForAll([]);
-      if (__DEV__) {
-        expect(mockError.mock.calls.length).toBe(1);
-        expect(mockError.mock.calls[0]).toEqual([
-          'Warning: Text content did not match. Server: "%s" Client: "%s"%s',
-          'initial',
-          'replaced',
-          '\n' +
-            '    in h2 (at **)\n' +
-            '    in Suspense (at **)\n' +
-            '    in div (at **)\n' +
-            '    in App (at **)',
-        ]);
-      } else {
-        expect(mockError.mock.calls.length).toBe(0);
-      }
+      expect(mockError.mock.calls.length).toBe(0);
     } finally {
       console.error = originalConsoleError;
     }
@@ -4626,12 +4616,14 @@ describe('ReactDOMFizzServer', () => {
 
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log('Logged recoverable error: ' + error.message);
+        Scheduler.log(
+          'Logged recoverable error: ' + normalizeError(error.message),
+        );
       },
     });
     await waitForAll([
       'Logged recoverable error: uh oh',
-      'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
     ]);
 
     expect(getVisibleChildren(container)).toEqual(
@@ -4713,7 +4705,9 @@ describe('ReactDOMFizzServer', () => {
 
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log('Logged recoverable error: ' + error.message);
+          Scheduler.log(
+            'Logged recoverable error: ' + normalizeError(error.message),
+          );
         },
       });
       await waitForAll([
@@ -4722,7 +4716,7 @@ describe('ReactDOMFizzServer', () => {
         // onRecoverableError because the UI recovered without surfacing the
         // error to the user.
         'Logged recoverable error: first error',
-        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
       ]);
       expect(mockError.mock.calls).toEqual([]);
       mockError.mockClear();
@@ -4830,7 +4824,9 @@ describe('ReactDOMFizzServer', () => {
 
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log('Logged recoverable error: ' + error.message);
+          Scheduler.log(
+            'Logged recoverable error: ' + normalizeError(error.message),
+          );
         },
       });
       await waitForAll(['suspending']);
@@ -4847,7 +4843,7 @@ describe('ReactDOMFizzServer', () => {
       await waitForAll([
         'throwing: first error',
         'Logged recoverable error: first error',
-        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
       ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
@@ -4954,14 +4950,16 @@ describe('ReactDOMFizzServer', () => {
 
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.log('Logged recoverable error: ' + error.message);
+          Scheduler.log(
+            'Logged recoverable error: ' + normalizeError(error.message),
+          );
         },
       });
       await waitForAll([
         'throwing: first error',
         'suspending',
         'Logged recoverable error: first error',
-        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary.',
       ]);
       expect(mockError.mock.calls).toEqual([]);
       mockError.mockClear();
@@ -6341,13 +6339,7 @@ describe('ReactDOMFizzServer', () => {
       });
       await expect(async () => {
         await waitForAll([]);
-      }).toErrorDev(
-        [
-          'Expected server HTML to contain a matching <span> in the root',
-          'An error occurred during hydration',
-        ],
-        {withoutStack: 1},
-      );
+      }).toErrorDev(['An error occurred during hydration'], {withoutStack: 1});
       expect(errors.length).toEqual(2);
       expect(getVisibleChildren(container)).toEqual(<span />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
index 5fa719e3d36cc..36c3d4f804dd3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -24,6 +24,15 @@ let hasErrored = false;
 let fatalError = undefined;
 let waitForAll;
 
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
 describe('ReactDOMFizzServerHydrationWarning', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -156,7 +165,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
         // Don't miss a hydration error. There should be none.
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -196,7 +205,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -237,17 +246,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Expected server HTML to contain a matching <span> in <span>',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -282,7 +290,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     const root = ReactDOMClient.hydrateRoot(container, <App text="Client" />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -326,17 +334,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Did not expect server HTML to contain the text node "Server" in <span>',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -374,17 +381,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Expected server HTML to contain a matching text node for "Client" in <span>.',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -425,17 +431,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Did not expect server HTML to contain the text node "Server" in <span>.',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -474,17 +479,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Expected server HTML to contain a matching text node for "Client" in <span>.',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -527,7 +531,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -564,7 +568,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -597,17 +601,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Expected server HTML to contain a matching <p> in <div>.',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
@@ -643,17 +646,16 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await expect(async () => {
       await waitForAll([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
+        'There was an error while hydrating.',
       ]);
     }).toErrorDev(
       [
-        'Did not expect server HTML to contain a <p> in <div>.',
         'An error occurred during hydration. The server HTML was replaced with client content.',
       ],
       {withoutStack: 1},
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index fae926c622564..7b8e27654c6a6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -6480,7 +6480,6 @@ body {
         await waitForAll([]);
       }).toErrorDev(
         [
-          'Warning: Text content did not match. Server: "server" Client: "client"',
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
         ],
         {withoutStack: 1},
@@ -8270,7 +8269,6 @@ background-color: green;
         await waitForAll([]);
       }).toErrorDev(
         [
-          'Warning: Text content did not match. Server: "server" Client: "client"',
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
         ],
         {withoutStack: 1},
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index ef5507744b4ed..c134ab973d58c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -82,12 +82,19 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Text content did not match. Server: "server" Client: "client"
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
           "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-          "Caught [Text content does not match server-rendered HTML.]",
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ]",
           "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
         ]
       `);
@@ -109,11 +116,19 @@ describe('ReactDOMServerHydration', () => {
       /* eslint-disable no-irregular-whitespace */
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Text content did not match. Server: "This markup contains an nbsp entity:   server text" Client: "This markup contains an nbsp entity:   client text"
-            in div (at **)
-            in Mismatch (at **)",
           "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-          "Caught [Text content does not match server-rendered HTML.]",
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ]",
           "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
         ]
       `);
@@ -138,10 +153,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Prop \`dangerouslySetInnerHTML\` did not match. Server: {"__html":"<span>server</span>"} Client: {"__html":"<span>client</span>"}
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -162,10 +185,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Prop \`className\` did not match. Server: "child server" Client: "child client"
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -185,10 +216,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Prop \`tabIndex\` did not match. Server: null Client: 1
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -208,10 +247,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Extra attribute from the server: tabindex
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -231,10 +278,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Prop \`tabIndex\` did not match. Server: null Client: 1
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -255,10 +310,18 @@ describe('ReactDOMServerHydration', () => {
       }
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         [
-          "Warning: Prop \`style\` did not match. Server: {"opacity":"0"} Client: {"opacity":1}
-            in main (at **)
-            in div (at **)
-            in Mismatch (at **)",
+          "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ",
         ]
       `);
     });
@@ -276,16 +339,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -300,16 +370,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <header> in <div>.
-                in header (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -324,16 +401,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -348,16 +432,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
 
@@ -369,11 +460,19 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Warning: Text content did not match. Server: "" Client: "only"
-              in div (at **)
-              in Mismatch (at **)",
             "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Text content does not match server-rendered HTML.]",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
@@ -391,15 +490,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching text node for "second" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -414,15 +521,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching text node for "first" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -437,15 +552,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching text node for "third" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
   });
@@ -462,15 +585,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -486,12 +617,19 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
             "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
@@ -509,16 +647,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -533,15 +678,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain a <footer> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
 
@@ -552,15 +705,23 @@ describe('ReactDOMServerHydration', () => {
           return <div className="parent">{!isClient && 'only'}</div>;
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain the text node "only" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -576,12 +737,19 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
             "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
@@ -599,16 +767,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -623,15 +798,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain the text node "third" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
   });
@@ -656,16 +839,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <Suspense> in <div>.
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -682,15 +872,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain a <Suspense> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -709,16 +907,23 @@ describe('ReactDOMServerHydration', () => {
         }
         // TODO: This message doesn't seem to have any useful details.
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <Suspense> in <div>.
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -741,15 +946,23 @@ describe('ReactDOMServerHydration', () => {
         // unhydrated tail nodes and this template is the first match. When we add special case handling for client
         // rendered suspense boundaries this test will likely change again
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain a <Suspense> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -766,16 +979,22 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <main> in <Suspense>.
-                in main (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
-            ]
-          `);
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -792,16 +1011,22 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Expected server HTML to contain a matching <footer> in <Suspense>.
-                in footer (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
-            ]
-          `);
+          [
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -875,12 +1100,19 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Warning: Expected server HTML to contain a matching <header> in <div>.
-              in header (at **)
-              in div (at **)
-              in Mismatch (at **)",
             "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
@@ -902,15 +1134,23 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            [
-              "Warning: Did not expect server HTML to contain a <header> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+          ]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
   });
@@ -951,18 +1191,23 @@ describe('ReactDOMServerHydration', () => {
       }
 
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
-              in footer (at **)
-              in Panel (at **)
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
+        [
+          "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ]",
+          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+        ]
+      `);
     });
 
     // @gate __DEV__
@@ -1000,16 +1245,23 @@ describe('ReactDOMServerHydration', () => {
       }
 
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          [
-            "Warning: Did not expect server HTML to contain a <footer> in <div>.
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
+        [
+          "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+        - A server/client branch \`if (typeof window !== 'undefined')\`.
+        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+        - Date formatting in a user's locale which doesn't match the server.
+        - External changing data without sending a snapshot of it along with the HTML.
+        - Invalid HTML tag nesting.
+
+        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+        https://react.dev/link/hydration-mismatch
+        ]",
+          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+        ]
+      `);
     });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 3815b413a6b5f..d5225893acfc7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -268,7 +268,6 @@ describe('ReactDOMOption', () => {
       });
     }).toErrorDev(
       [
-        'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',
         'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
         'Warning: In HTML, <div> cannot be a child of <option>',
       ],
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 9b9adc40dac40..29a78d63f8944 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -171,7 +171,8 @@ describe('ReactDOMRoot', () => {
       </div>,
     );
     await expect(async () => await waitForAll([])).toErrorDev(
-      'Extra attribute',
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      {withoutStack: true},
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 93461a70728e9..0953b0b3536dc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -27,13 +27,13 @@ let waitFor;
 let waitForPaint;
 let assertLog;
 
-function normalizeCodeLocInfo(strOrErr) {
-  if (strOrErr && strOrErr.replace) {
-    return strOrErr.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
-      return '\n    in ' + name + ' (at **)';
-    });
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
   }
-  return strOrErr;
+  return msg;
 }
 
 function dispatchMouseEvent(to, from) {
@@ -234,7 +234,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -252,12 +252,6 @@ describe('ReactDOMServerPartialHydration', () => {
   });
 
   it('falls back to client rendering boundary on mismatch', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -294,85 +288,61 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Hello', 'Component', 'Component', 'Component', 'Component']);
-
-      expect(container.innerHTML).toBe(
-        '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
-      );
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component', 'Component', 'Component', 'Component']);
 
-      suspend = true;
-      client = true;
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll(['Suspend']);
-      jest.runAllTimers();
+    suspend = true;
+    client = true;
 
-      // Unchanged
-      expect(container.innerHTML).toBe(
-        '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
-      );
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Hello',
-        'Component',
-        'Component',
-        'Component',
-        'Component',
-
-        // second pass as client render
-        'Hello',
-        'Component',
-        'Component',
-        'Component',
-        'Component',
-
-        // Hydration mismatch is logged
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
+    // Unchanged
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
 
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe(
-        'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
-      );
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+
+      // Hydration mismatch is logged
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
 
-      if (__DEV__) {
-        const lastCall = mockError.mock.calls[mockError.mock.calls.length - 1];
-        expect(lastCall).toEqual([
-          'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-          'article',
-          'Suspense',
-          '\n' +
-            '    in article (at **)\n' +
-            '    in Component (at **)\n' +
-            '    in Suspense (at **)\n' +
-            '    in App (at **)',
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
   });
 
   it('does not show a fallback if mismatch is after suspending', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -410,74 +380,50 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Hello', 'Component']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$-->Hello<div>Component</div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll(['Suspend']);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
 
-      // !! Unchanged, continue showing server content while suspended.
-      expect(container.innerHTML).toBe(
-        '<!--$-->Hello<div>Component</div><!--/$-->',
-      );
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><!--/$-->',
+    );
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Hello',
-        'Component',
-        'Hello',
-        'Component',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
-
-      // Client rendered - suspense comment nodes removed.
-      expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'Suspense',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed.
+    expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
   });
 
   it('does not show a fallback if mismatch is child of suspended component', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -516,78 +462,50 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Hello', 'Component']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Hello', 'Component']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div>Component</div></div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div></div><!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll(['Suspend']);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll(['Suspend']);
+    jest.runAllTimers();
 
-      // !! Unchanged, continue showing server content while suspended.
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div>Component</div></div><!--/$-->',
-      );
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div></div><!--/$-->',
+    );
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Hello',
-        'Component',
-        'Hello',
-        'Component',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Hello',
+      'Component',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe(
-        '<div><article>Mismatch</article></div>',
-      );
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'div',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in div (at **)\n' +
-              '    in Child (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<div><article>Mismatch</article></div>');
   });
 
   it('does not show a fallback if mismatch is parent and first child suspends', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -636,77 +554,52 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Component', 'Hello']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll(['Component', 'Suspend']);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll(['Component', 'Suspend']);
+    jest.runAllTimers();
 
-      // !! Unchanged, continue showing server content while suspended.
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
-      );
+    // !! Unchanged, continue showing server content while suspended.
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div></div><div>Component</div></div><!--/$-->',
+    );
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Component',
-        'Hello',
-        'Component',
-        'Hello',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+      'Component',
+      'Hello',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe(
-        '<div><div></div><article>Mismatch</article></div>',
-      );
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'div',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in div (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<div><div></div><article>Mismatch</article></div>',
+    );
   });
 
   it('does show a fallback if mismatch is parent and second child suspends', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -755,74 +648,49 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Component', 'Hello']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div>Component</div><div></div></div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$--><div><div>Component</div><div></div></div><!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll([
-        'Component',
-        'Component',
-        'Suspend',
-        'Fallback',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // !! Client switches to suspense fallback.
-      expect(container.innerHTML).toBe('Loading...');
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll(['Component', 'Hello']);
-      jest.runAllTimers();
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll(['Component', 'Hello']);
+    jest.runAllTimers();
 
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe(
-        '<div><article>Mismatch</article><div></div></div>',
-      );
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'div',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in div (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      '<div><article>Mismatch</article><div></div></div>',
+    );
   });
 
   it('does show a fallback if mismatch is in parent element only', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -861,71 +729,45 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Component', 'Hello']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div><div></div></div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe('<!--$--><div><div></div></div><!--/$-->');
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll([
-        'Component',
-        'Component',
-        'Suspend',
-        'Fallback',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // !! Client switches to suspense fallback.
-      expect(container.innerHTML).toBe('Loading...');
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll(['Component', 'Hello']);
-      jest.runAllTimers();
-
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe('<article><div></div></article>');
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'Suspense',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll(['Component', 'Hello']);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<article><div></div></article>');
   });
 
   it('does show a fallback if mismatch is before suspending', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -963,75 +805,51 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Component', 'Hello']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div>Component</div>Hello<!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$--><div>Component</div>Hello<!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll([
-        'Component',
-        'Component',
-        'Suspend',
-        'Fallback',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // !! Client switches to suspense fallback.
-      expect(container.innerHTML).toBe('Loading...');
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Component',
-        'Hello',
-      ]);
-      jest.runAllTimers();
-
-      // Client rendered - suspense comment nodes removed
-      expect(container.innerHTML).toBe('<article>Mismatch</article>Hello');
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'Suspense',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+    ]);
+    jest.runAllTimers();
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe('<article>Mismatch</article>Hello');
   });
 
   it('does show a fallback if mismatch is before suspending in a child', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -1071,68 +889,50 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('section');
-      container.innerHTML = finalHTML;
-      assertLog(['Component', 'Hello']);
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('section');
+    container.innerHTML = finalHTML;
+    assertLog(['Component', 'Hello']);
 
-      expect(container.innerHTML).toBe(
-        '<!--$--><div>Component</div><div>Hello</div><!--/$-->',
-      );
+    expect(container.innerHTML).toBe(
+      '<!--$--><div>Component</div><div>Hello</div><!--/$-->',
+    );
 
-      suspend = true;
-      client = true;
+    suspend = true;
+    client = true;
 
-      ReactDOMClient.hydrateRoot(container, <App />, {
-        onRecoverableError(error) {
-          Scheduler.log(error.message);
-        },
-      });
-      await waitForAll([
-        'Component',
-        'Component',
-        'Suspend',
-        'Fallback',
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-      jest.runAllTimers();
+    ReactDOMClient.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.log(normalizeError(error.message));
+      },
+    });
+    await waitForAll([
+      'Component',
+      'Component',
+      'Suspend',
+      'Fallback',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
+    ]);
+    jest.runAllTimers();
 
-      // !! Client switches to suspense fallback.
-      expect(container.innerHTML).toBe('Loading...');
+    // !! Client switches to suspense fallback.
+    expect(container.innerHTML).toBe('Loading...');
 
-      suspend = false;
-      resolve();
-      await promise;
-      await waitForAll([
-        // first pass, mismatches at end
-        'Component',
-        'Hello',
-      ]);
-      jest.runAllTimers();
+    suspend = false;
+    resolve();
+    await promise;
+    await waitForAll([
+      // first pass, mismatches at end
+      'Component',
+      'Hello',
+    ]);
+    jest.runAllTimers();
 
-      // Client rendered - suspense comment nodes removed.
-      expect(container.innerHTML).toBe(
-        '<article>Mismatch</article><div>Hello</div>',
-      );
-      if (__DEV__) {
-        expect(mockError.mock.calls).toEqual([
-          [
-            'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-            'article',
-            'Suspense',
-            '\n' +
-              '    in article (at **)\n' +
-              '    in Component (at **)\n' +
-              '    in Suspense (at **)\n' +
-              '    in App (at **)',
-          ],
-        ]);
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    // Client rendered - suspense comment nodes removed.
+    expect(container.innerHTML).toBe(
+      '<article>Mismatch</article><div>Hello</div>',
+    );
   });
 
   it('calls the hydration callbacks after hydration or deletion', async () => {
@@ -1195,7 +995,7 @@ describe('ReactDOMServerPartialHydration', () => {
         deleted.push(node);
       },
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     await waitForAll([]);
@@ -1290,17 +1090,13 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).toContain('<span>B</span>');
     expect(ref.current).toBe(null);
 
-    await expect(async () => {
-      await act(() => {
-        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
-          onRecoverableError(error) {
-            Scheduler.log(error.message);
-          },
-        });
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log(normalizeError(error.message));
+        },
       });
-    }).toErrorDev(
-      'Did not expect server HTML to contain a <span> in <Suspense>',
-    );
+    });
 
     expect(container.innerHTML).toContain('<span>A</span>');
     expect(container.innerHTML).not.toContain('<span>B</span>');
@@ -1308,21 +1104,13 @@ describe('ReactDOMServerPartialHydration', () => {
     assertLog([
       'Server rendered',
       'Client rendered',
-      'Hydration failed because the initial UI does not match what was rendered on the server.',
-      'There was an error while hydrating this Suspense boundary. ' +
-        'Switched to client rendering.',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
     ]);
     expect(ref.current).not.toBe(span);
   });
 
   it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
-    // We can't use the toErrorDev helper here because this is async.
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
-
     const ref = React.createRef();
     let shouldSuspend = false;
     let resolve;
@@ -1350,44 +1138,34 @@ describe('ReactDOMServerPartialHydration', () => {
         </div>
       );
     }
-    try {
-      const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
 
-      const container = document.createElement('div');
-      container.innerHTML = finalHTML;
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
 
-      const span = container.getElementsByTagName('span')[0];
+    const span = container.getElementsByTagName('span')[0];
 
-      expect(container.innerHTML).toContain('<span>A</span>');
-      expect(container.innerHTML).toContain('<span>B</span>');
-      expect(ref.current).toBe(null);
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
 
-      shouldSuspend = true;
-      await act(() => {
-        ReactDOMClient.hydrateRoot(container, <App hasB={false} />);
-      });
+    shouldSuspend = true;
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />);
+    });
 
+    await expect(async () => {
       await act(() => {
         resolve();
       });
+    }).toErrorDev([
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+    ]);
 
-      expect(container.innerHTML).toContain('<span>A</span>');
-      expect(container.innerHTML).not.toContain('<span>B</span>');
-      expect(ref.current).not.toBe(span);
-      if (__DEV__) {
-        expect(mockError).toHaveBeenCalledWith(
-          'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
-          'span',
-          'Suspense',
-          '\n' +
-            '    in Suspense (at **)\n' +
-            '    in div (at **)\n' +
-            '    in App (at **)',
-        );
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).not.toBe(span);
   });
 
   it('recovers with client render when server rendered additional nodes deep inside suspense root', async () => {
@@ -1417,18 +1195,16 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).toContain('<span>B</span>');
     expect(ref.current).toBe(null);
 
-    await expect(async () => {
-      await act(() => {
-        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
-          onRecoverableError(error) {
-            Scheduler.log(error.message);
-          },
-        });
+    await act(() => {
+      ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
+        onRecoverableError(error) {
+          Scheduler.log(normalizeError(error.message));
+        },
       });
-    }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+    });
     assertLog([
-      'Hydration failed because the initial UI does not match what was rendered on the server.',
-      'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating this Suspense boundary.',
     ]);
 
     expect(container.innerHTML).toContain('<span>A</span>');
@@ -1787,7 +1563,7 @@ describe('ReactDOMServerPartialHydration', () => {
       <App text="Hello" className="hello" />,
       {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       },
     );
@@ -1865,7 +1641,7 @@ describe('ReactDOMServerPartialHydration', () => {
       <App text="Hello" className="hello" />,
       {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       },
     );
@@ -1941,7 +1717,7 @@ describe('ReactDOMServerPartialHydration', () => {
       <App text="Hello" className="hello" />,
       {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       },
     );
@@ -2249,7 +2025,7 @@ describe('ReactDOMServerPartialHydration', () => {
       </Context.Provider>,
       {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       },
     );
@@ -2324,22 +2100,18 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     if (__DEV__) {
       await waitForAll([
         'The server did not finish this Suspense boundary: The server used' +
-          ' "renderToString" which does not support Suspense. If you intended' +
-          ' for this Suspense boundary to render the fallback content on the' +
-          ' server consider throwing an Error somewhere within the Suspense boundary.' +
-          ' If you intended to have the server wait for the suspended component' +
-          ' please switch to "renderToPipeableStream" which supports Suspense on the server',
+          ' "renderToString" which does not support Suspense.',
       ]);
     } else {
       await waitForAll([
         'The server could not finish this Suspense boundary, likely due to ' +
-          'an error during server rendering. Switched to client rendering.',
+          'an error during server rendering.',
       ]);
     }
     jest.runAllTimers();
@@ -2397,22 +2169,18 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     if (__DEV__) {
       await waitForAll([
         'The server did not finish this Suspense boundary: The server used' +
-          ' "renderToString" which does not support Suspense. If you intended' +
-          ' for this Suspense boundary to render the fallback content on the' +
-          ' server consider throwing an Error somewhere within the Suspense boundary.' +
-          ' If you intended to have the server wait for the suspended component' +
-          ' please switch to "renderToPipeableStream" which supports Suspense on the server',
+          ' "renderToString" which does not support Suspense.',
       ]);
     } else {
       await waitForAll([
         'The server could not finish this Suspense boundary, likely due to ' +
-          'an error during server rendering. Switched to client rendering.',
+          'an error during server rendering.',
       ]);
     }
     // This will have exceeded the suspended time so we should timeout.
@@ -2475,22 +2243,18 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     if (__DEV__) {
       await waitForAll([
         'The server did not finish this Suspense boundary: The server used' +
-          ' "renderToString" which does not support Suspense. If you intended' +
-          ' for this Suspense boundary to render the fallback content on the' +
-          ' server consider throwing an Error somewhere within the Suspense boundary.' +
-          ' If you intended to have the server wait for the suspended component' +
-          ' please switch to "renderToPipeableStream" which supports Suspense on the server',
+          ' "renderToString" which does not support Suspense.',
       ]);
     } else {
       await waitForAll([
         'The server could not finish this Suspense boundary, likely due to ' +
-          'an error during server rendering. Switched to client rendering.',
+          'an error during server rendering.',
       ]);
     }
     // This will have exceeded the suspended time so we should timeout.
@@ -2797,7 +2561,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
 
@@ -2805,16 +2569,12 @@ describe('ReactDOMServerPartialHydration', () => {
     if (__DEV__) {
       await waitForAll([
         'The server did not finish this Suspense boundary: The server used' +
-          ' "renderToString" which does not support Suspense. If you intended' +
-          ' for this Suspense boundary to render the fallback content on the' +
-          ' server consider throwing an Error somewhere within the Suspense boundary.' +
-          ' If you intended to have the server wait for the suspended component' +
-          ' please switch to "renderToPipeableStream" which supports Suspense on the server',
+          ' "renderToString" which does not support Suspense.',
       ]);
     } else {
       await waitForAll([
         'The server could not finish this Suspense boundary, likely due to ' +
-          'an error during server rendering. Switched to client rendering.',
+          'an error during server rendering.',
       ]);
     }
 
@@ -2873,22 +2633,18 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        Scheduler.log(error.message);
+        Scheduler.log(normalizeError(error.message));
       },
     });
     if (__DEV__) {
       await waitForAll([
         'The server did not finish this Suspense boundary: The server used' +
-          ' "renderToString" which does not support Suspense. If you intended' +
-          ' for this Suspense boundary to render the fallback content on the' +
-          ' server consider throwing an Error somewhere within the Suspense boundary.' +
-          ' If you intended to have the server wait for the suspended component' +
-          ' please switch to "renderToPipeableStream" which supports Suspense on the server',
+          ' "renderToString" which does not support Suspense.',
       ]);
     } else {
       await waitForAll([
         'The server could not finish this Suspense boundary, likely due to ' +
-          'an error during server rendering. Switched to client rendering.',
+          'an error during server rendering.',
       ]);
     }
     jest.runAllTimers();
@@ -2989,7 +2745,7 @@ describe('ReactDOMServerPartialHydration', () => {
       </ClassName.Provider>,
       {
         onRecoverableError(error) {
-          Scheduler.log(error.message);
+          Scheduler.log(normalizeError(error.message));
         },
       },
     );
@@ -4027,7 +3783,9 @@ describe('ReactDOMServerPartialHydration', () => {
       await act(() => {
         ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
           onRecoverableError(error) {
-            Scheduler.log('Log recoverable error: ' + error.message);
+            Scheduler.log(
+              'Log recoverable error: ' + normalizeError(error.message),
+            );
           },
         });
       });
@@ -4035,15 +3793,12 @@ describe('ReactDOMServerPartialHydration', () => {
       [
         'Warning: An error occurred during hydration. ' +
           'The server HTML was replaced with client content.',
-        'Warning: Expected server HTML to contain a matching <span> in the root.\n' +
-          '    in span (at **)\n' +
-          '    in App (at **)',
       ],
       {withoutStack: 1},
     );
     assertLog([
-      'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
-      'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+      'Log recoverable error: There was an error while hydrating.',
     ]);
 
     // We show fallback state when mismatch happens at root
@@ -4073,22 +3828,20 @@ describe('ReactDOMServerPartialHydration', () => {
       await act(() => {
         ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
           onRecoverableError(error) {
-            Scheduler.log(error.message);
+            Scheduler.log(normalizeError(error.message));
           },
         });
       });
     }).toErrorDev(
       [
-        'Text content did not match. Server: "good" Client: "bad"',
         'An error occurred during hydration. The server HTML was replaced with ' +
           'client content.',
       ],
       {withoutStack: 1},
     );
     assertLog([
-      'Text content does not match server-rendered HTML.',
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to client rendering.',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating.',
     ]);
   });
 
@@ -4116,23 +3869,21 @@ describe('ReactDOMServerPartialHydration', () => {
           <TextChildWithSibling text="bad" />,
           {
             onRecoverableError(error) {
-              Scheduler.log(error.message);
+              Scheduler.log(normalizeError(error.message));
             },
           },
         );
       });
     }).toErrorDev(
       [
-        'Text content did not match. Server: "good" Client: "bad"',
         'An error occurred during hydration. The server HTML was replaced with ' +
           'client content.',
       ],
       {withoutStack: 1},
     );
     assertLog([
-      'Text content does not match server-rendered HTML.',
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to client rendering.',
+      "Hydration failed because the server rendered HTML didn't match the client.",
+      'There was an error while hydrating.',
     ]);
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
index b0d2f7fe77201..da8d2e173e4a6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -24,6 +24,15 @@ let hasErrored = false;
 let fatalError = undefined;
 let waitForAll;
 
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
 describe('ReactDOM HostSingleton', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -454,7 +463,7 @@ describe('ReactDOM HostSingleton', () => {
       {
         onRecoverableError(error, errorInfo) {
           hydrationErrors.push([
-            error.message,
+            normalizeError(error.message),
             errorInfo.componentStack
               ? errorInfo.componentStack.split('\n')[1].trim()
               : null,
@@ -466,23 +475,16 @@ describe('ReactDOM HostSingleton', () => {
       await waitForAll([]);
     }).toErrorDev(
       [
-        `Warning: Expected server HTML to contain a matching <div> in <body>.
-    in div (at **)
-    in body (at **)
-    in html (at **)`,
         `Warning: An error occurred during hydration. The server HTML was replaced with client content.`,
       ],
       {withoutStack: 1},
     );
     expect(hydrationErrors).toEqual([
       [
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        "Hydration failed because the server rendered HTML didn't match the client.",
         'at div',
       ],
-      [
-        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        null,
-      ],
+      ['There was an error while hydrating.', null],
     ]);
     expect(persistentElements).toEqual([
       document.documentElement,
@@ -546,7 +548,12 @@ describe('ReactDOM HostSingleton', () => {
       },
     );
     expect(hydrationErrors).toEqual([]);
-    await waitForAll([]);
+    await expect(async () => {
+      await waitForAll([]);
+    }).toErrorDev(
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      {withoutStack: true},
+    );
     expect(persistentElements).toEqual([
       document.documentElement,
       document.head,
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index 746c227470c22..238cc420ada74 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -28,6 +28,15 @@ function getTestDocument(markup) {
   return doc;
 }
 
+function normalizeError(msg) {
+  // Take the first sentence to make it easier to assert on.
+  const idx = msg.indexOf('.');
+  if (idx > -1) {
+    return msg.slice(0, idx + 1);
+  }
+  return msg;
+}
+
 describe('rendering React components at document', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -191,21 +200,22 @@ describe('rendering React components at document', () => {
         ReactDOM.flushSync(() => {
           ReactDOMClient.hydrateRoot(container, <div>parsnip</div>, {
             onRecoverableError: error => {
-              Scheduler.log('Log recoverable error: ' + error.message);
+              Scheduler.log(
+                'Log recoverable error: ' + normalizeError(error.message),
+              );
             },
           });
         });
       }).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-          'Expected server HTML to contain a matching <div> in the root.',
         ],
         {withoutStack: 1},
       );
 
       assertLog([
-        'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
-        'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
 
       // This creates an unfortunate double text case.
@@ -226,7 +236,9 @@ describe('rendering React components at document', () => {
             </div>,
             {
               onRecoverableError: error => {
-                Scheduler.log('Log recoverable error: ' + error.message);
+                Scheduler.log(
+                  'Log recoverable error: ' + normalizeError(error.message),
+                );
               },
             },
           );
@@ -234,14 +246,13 @@ describe('rendering React components at document', () => {
       }).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-          'Expected server HTML to contain a matching <div> in <div>.',
         ],
         {withoutStack: 1},
       );
 
       assertLog([
-        'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
-        'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
       expect(container.textContent).toBe('parsnip');
     });
@@ -272,7 +283,9 @@ describe('rendering React components at document', () => {
             <Component text="Hello world" />,
             {
               onRecoverableError: error => {
-                Scheduler.log('Log recoverable error: ' + error.message);
+                Scheduler.log(
+                  'Log recoverable error: ' + normalizeError(error.message),
+                );
               },
             },
           );
@@ -280,7 +293,6 @@ describe('rendering React components at document', () => {
       }).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-          'Warning: Text content did not match.',
         ],
         {
           withoutStack: 1,
@@ -288,8 +300,8 @@ describe('rendering React components at document', () => {
       );
 
       assertLog([
-        'Log recoverable error: Text content does not match server-rendered HTML.',
-        'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
@@ -318,7 +330,9 @@ describe('rendering React components at document', () => {
             <Component text="Hello world" />,
             {
               onRecoverableError: error => {
-                Scheduler.log('Log recoverable error: ' + error.message);
+                Scheduler.log(
+                  'Log recoverable error: ' + normalizeError(error.message),
+                );
               },
             },
           );
@@ -326,13 +340,12 @@ describe('rendering React components at document', () => {
       }).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-          'Expected server HTML to contain a matching text node for "Hello world" in <body>',
         ],
         {withoutStack: 1},
       );
       assertLog([
-        'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
-        'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
+        'Log recoverable error: There was an error while hydrating.',
       ]);
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 564617ee2ff72..5f234795e120e 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -141,7 +141,6 @@ describe('ReactDOMServerHydration', () => {
       }).toErrorDev(
         [
           'An error occurred during hydration. The server HTML was replaced with client content.',
-          'Text content did not match. Server: "x" Client: "y"',
         ],
         {withoutStack: 1},
       );
@@ -226,7 +225,6 @@ describe('ReactDOMServerHydration', () => {
     }).toErrorDev(
       [
         'An error occurred during hydration. The server HTML was replaced with client content.',
-        'Warning: Text content did not match. Server: "server" Client: "client"',
       ],
       {withoutStack: 1},
     );
@@ -253,10 +251,8 @@ describe('ReactDOMServerHydration', () => {
         );
       });
     }).toErrorDev(
-      'Warning: Prop `style` did not match. Server: ' +
-        '{"text-decoration":"none","color":"black","height":"10px"}' +
-        ' Client: ' +
-        '{"textDecoration":"none","color":"white","height":"10px"}',
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      {withoutStack: true},
     );
   });
 
@@ -303,10 +299,8 @@ describe('ReactDOMServerHydration', () => {
         );
       });
     }).toErrorDev(
-      'Warning: Prop `style` did not match. Server: ' +
-        '{"text-decoration":"none","color":"black","height":"10px"}' +
-        ' Client: ' +
-        '{"textDecoration":"none","color":"black","height":"10px"}', // note that this is no difference
+      "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
+      {withoutStack: true},
     );
   });
 
@@ -535,7 +529,6 @@ describe('ReactDOMServerHydration', () => {
     }).toErrorDev(
       [
         'An error occurred during hydration. The server HTML was replaced with client content.',
-        'Warning: Text content did not match. Server: "server" Client: "client"',
       ],
       {withoutStack: 1},
     );
@@ -561,7 +554,6 @@ describe('ReactDOMServerHydration', () => {
     }).toErrorDev(
       [
         'An error occurred during hydration. The server HTML was replaced with client content.',
-        'Warning: Did not expect server HTML to contain a <p> in <div>.',
       ],
       {withoutStack: 1},
     );
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index 015942131d01d..2f872492fa022 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -53,8 +53,17 @@ module.exports = function (initModules) {
     if (forceHydrate) {
       await act(() => {
         ReactDOMClient.hydrateRoot(domElement, reactElement, {
-          onRecoverableError: () => {
-            // TODO: assert on recoverable error count.
+          onRecoverableError(e) {
+            if (
+              e.message.startsWith(
+                'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+              )
+            ) {
+              // We ignore this extra error because it shouldn't really need to be there if
+              // a hydration mismatch is the cause of it.
+            } else {
+              console.error(e);
+            }
           },
         });
       });
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index e7462bf24aa7e..89044182672ad 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -144,6 +144,7 @@ import {
   resetHydrationState,
   getIsHydrating,
   upgradeHydrationErrorsToRecoverable,
+  emitPendingHydrationWarnings,
 } from './ReactFiberHydrationContext';
 import {
   renderHasNotSuspendedYet,
@@ -893,6 +894,7 @@ function completeDehydratedSuspenseBoundary(
       }
       return false;
     } else {
+      emitPendingHydrationWarnings();
       // We might have reentered this boundary to hydrate it. If so, we need to reset the hydration
       // state since we're now exiting out of it. popHydrationState doesn't do that for us.
       resetHydrationState();
@@ -1009,6 +1011,7 @@ function completeWork(
         // that weren't hydrated.
         const wasHydrated = popHydrationState(workInProgress);
         if (wasHydrated) {
+          emitPendingHydrationWarnings();
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 49171baf1c6c2..a25dee709a6de 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -19,11 +19,11 @@ import type {
 import type {SuspenseState} from './ReactFiberSuspenseComponent';
 import type {TreeContext} from './ReactFiberTreeContext';
 import type {CapturedValue} from './ReactCapturedValue';
+import type {HydrationDiffNode} from './ReactFiberHydrationDiffs';
 
 import {
   HostComponent,
   HostSingleton,
-  HostText,
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
@@ -61,6 +61,7 @@ import {
 } from './ReactFiberTreeContext';
 import {queueRecoverableErrors} from './ReactFiberWorkLoop';
 import {getRootHostContainer, getHostContext} from './ReactFiberHostContext';
+import {describeDiff} from './ReactFiberHydrationDiffs';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -72,11 +73,50 @@ let isHydrating: boolean = false;
 // due to earlier mismatches or a suspended fiber.
 let didSuspendOrErrorDEV: boolean = false;
 
+// Hydration differences found that haven't yet been logged.
+let hydrationDiffRootDEV: null | HydrationDiffNode = null;
+
 // Hydration errors that were thrown inside this boundary
 let hydrationErrors: Array<CapturedValue<mixed>> | null = null;
 
 let rootOrSingletonContext = false;
 
+// Builds a common ancestor tree from the root down for collecting diffs.
+function buildHydrationDiffNode(fiber: Fiber): HydrationDiffNode {
+  if (fiber.return === null) {
+    // We're at the root.
+    if (hydrationDiffRootDEV === null) {
+      hydrationDiffRootDEV = {
+        fiber: fiber,
+        children: [],
+        serverProps: undefined,
+        serverTail: [],
+      };
+    } else if (hydrationDiffRootDEV.fiber !== fiber) {
+      throw new Error(
+        'Saw multiple hydration diff roots in a pass. This is a bug in React.',
+      );
+    }
+    return hydrationDiffRootDEV;
+  }
+  const siblings = buildHydrationDiffNode(fiber.return).children;
+  // The same node may already exist in the parent. Since we currently always render depth first
+  // and rerender if we suspend or terminate early, if a shared ancestor was added we should still
+  // be inside of that shared ancestor which means it was the last one to be added. If this changes
+  // we may have to scan the whole set.
+  if (siblings.length > 0 && siblings[siblings.length - 1].fiber === fiber) {
+    return siblings[siblings.length - 1];
+  }
+  const newNode: HydrationDiffNode = {
+    fiber: fiber,
+    children: [],
+    serverProps: undefined,
+    serverTail: [],
+  };
+  siblings.push(newNode);
+  return newNode;
+}
+
 function warnIfHydrating() {
   if (__DEV__) {
     if (isHydrating) {
@@ -105,6 +145,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   isHydrating = true;
   hydrationErrors = null;
   didSuspendOrErrorDEV = false;
+  hydrationDiffRootDEV = null;
   rootOrSingletonContext = true;
   return true;
 }
@@ -123,6 +164,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   isHydrating = true;
   hydrationErrors = null;
   didSuspendOrErrorDEV = false;
+  hydrationDiffRootDEV = null;
   rootOrSingletonContext = false;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
@@ -130,58 +172,6 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   return true;
 }
 
-function warnForDeletedHydratableInstance(
-  parentType: string,
-  child: HydratableInstance,
-) {
-  if (__DEV__) {
-    const description = describeHydratableInstanceForDevWarnings(child);
-    if (typeof description === 'string') {
-      console.error(
-        'Did not expect server HTML to contain the text node "%s" in <%s>.',
-        description,
-        parentType,
-      );
-    } else {
-      console.error(
-        'Did not expect server HTML to contain a <%s> in <%s>.',
-        description.type,
-        parentType,
-      );
-    }
-  }
-}
-
-function warnForInsertedHydratedElement(parentType: string, tag: string) {
-  if (__DEV__) {
-    console.error(
-      'Expected server HTML to contain a matching <%s> in <%s>.',
-      tag,
-      parentType,
-    );
-  }
-}
-
-function warnForInsertedHydratedText(parentType: string, text: string) {
-  if (__DEV__) {
-    console.error(
-      'Expected server HTML to contain a matching text node for "%s" in <%s>.',
-      text,
-      parentType,
-    );
-  }
-}
-
-function warnForInsertedHydratedSuspense(parentType: string) {
-  if (__DEV__) {
-    console.error(
-      'Expected server HTML to contain a matching <%s> in <%s>.',
-      'Suspense',
-      parentType,
-    );
-  }
-}
-
 export function errorHydratingContainer(parentContainer: Container): void {
   if (__DEV__) {
     // TODO: This gets logged by onRecoverableError, too, so we should be
@@ -192,48 +182,7 @@ export function errorHydratingContainer(parentContainer: Container): void {
   }
 }
 
-function warnUnhydratedInstance(
-  returnFiber: Fiber,
-  instance: HydratableInstance,
-) {
-  if (__DEV__) {
-    if (didWarnInvalidHydration) {
-      return;
-    }
-    didWarnInvalidHydration = true;
-
-    switch (returnFiber.tag) {
-      case HostRoot: {
-        const description = describeHydratableInstanceForDevWarnings(instance);
-        if (typeof description === 'string') {
-          console.error(
-            'Did not expect server HTML to contain the text node "%s" in the root.',
-            description,
-          );
-        } else {
-          console.error(
-            'Did not expect server HTML to contain a <%s> in the root.',
-            description.type,
-          );
-        }
-        break;
-      }
-      case HostSingleton:
-      case HostComponent: {
-        warnForDeletedHydratableInstance(returnFiber.type, instance);
-        break;
-      }
-      case SuspenseComponent: {
-        const suspenseState: SuspenseState = returnFiber.memoizedState;
-        if (suspenseState.dehydrated !== null)
-          warnForDeletedHydratableInstance('Suspense', instance);
-        break;
-      }
-    }
-  }
-}
-
-function warnNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+function warnNonHydratedInstance(fiber: Fiber) {
   if (__DEV__) {
     if (didSuspendOrErrorDEV) {
       // Inside a boundary that already suspended. We're currently rendering the
@@ -242,84 +191,10 @@ function warnNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
       return;
     }
 
-    if (didWarnInvalidHydration) {
-      return;
-    }
-    didWarnInvalidHydration = true;
-
-    switch (returnFiber.tag) {
-      case HostRoot: {
-        // const parentContainer = returnFiber.stateNode.containerInfo;
-        switch (fiber.tag) {
-          case HostSingleton:
-          case HostComponent:
-            console.error(
-              'Expected server HTML to contain a matching <%s> in the root.',
-              fiber.type,
-            );
-            break;
-          case HostText:
-            const text = fiber.pendingProps;
-            console.error(
-              'Expected server HTML to contain a matching text node for "%s" in the root.',
-              text,
-            );
-            break;
-          case SuspenseComponent:
-            console.error(
-              'Expected server HTML to contain a matching <%s> in the root.',
-              'Suspense',
-            );
-            break;
-        }
-        break;
-      }
-      case HostSingleton:
-      case HostComponent: {
-        const parentType = returnFiber.type;
-        // const parentProps = returnFiber.memoizedProps;
-        // const parentInstance = returnFiber.stateNode;
-        switch (fiber.tag) {
-          case HostSingleton:
-          case HostComponent: {
-            const type = fiber.type;
-            warnForInsertedHydratedElement(parentType, type);
-            break;
-          }
-          case HostText: {
-            const text = fiber.pendingProps;
-            warnForInsertedHydratedText(parentType, text);
-            break;
-          }
-          case SuspenseComponent: {
-            warnForInsertedHydratedSuspense(parentType);
-            break;
-          }
-        }
-        break;
-      }
-      case SuspenseComponent: {
-        // const suspenseState: SuspenseState = returnFiber.memoizedState;
-        // const parentInstance = suspenseState.dehydrated;
-        switch (fiber.tag) {
-          case HostSingleton:
-          case HostComponent:
-            const type = fiber.type;
-            warnForInsertedHydratedElement('Suspense', type);
-            break;
-          case HostText:
-            const text = fiber.pendingProps;
-            warnForInsertedHydratedText('Suspense', text);
-            break;
-          case SuspenseComponent:
-            warnForInsertedHydratedSuspense('Suspense');
-            break;
-        }
-        break;
-      }
-      default:
-        return;
-    }
+    // Add this fiber to the diff tree.
+    const diffNode = buildHydrationDiffNode(fiber);
+    // We use null as a signal that there was no node to match.
+    diffNode.serverProps = null;
   }
 }
 
@@ -390,9 +265,29 @@ function tryHydrateSuspense(fiber: Fiber, nextInstance: any) {
 }
 
 function throwOnHydrationMismatch(fiber: Fiber) {
+  let diff = '';
+  if (__DEV__) {
+    // Consume the diff root for this mismatch.
+    // Any other errors will get their own diffs.
+    const diffRoot = hydrationDiffRootDEV;
+    if (diffRoot !== null) {
+      hydrationDiffRootDEV = null;
+      diff = describeDiff(diffRoot);
+    }
+  }
   throw new Error(
-    'Hydration failed because the initial UI does not match what was ' +
-      'rendered on the server.',
+    "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n" +
+      '\n' +
+      "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+      "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+      "- Date formatting in a user's locale which doesn't match the server.\n" +
+      '- External changing data without sending a snapshot of it along with the HTML.\n' +
+      '- Invalid HTML tag nesting.\n' +
+      '\n' +
+      'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
+      '\n' +
+      'https://react.dev/link/hydration-mismatch' +
+      diff,
   );
 }
 
@@ -432,7 +327,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   const nextInstance = nextHydratableInstance;
   if (!nextInstance || !tryHydrateInstance(fiber, nextInstance)) {
     if (shouldKeepWarning) {
-      warnNonHydratedInstance((hydrationParentFiber: any), fiber);
+      warnNonHydratedInstance(fiber);
     }
     throwOnHydrationMismatch(fiber);
   }
@@ -452,7 +347,7 @@ function tryToClaimNextHydratableTextInstance(fiber: Fiber): void {
   const nextInstance = nextHydratableInstance;
   if (!nextInstance || !tryHydrateText(fiber, nextInstance)) {
     if (shouldKeepWarning) {
-      warnNonHydratedInstance((hydrationParentFiber: any), fiber);
+      warnNonHydratedInstance(fiber);
     }
     throwOnHydrationMismatch(fiber);
   }
@@ -464,7 +359,7 @@ function tryToClaimNextHydratableSuspenseInstance(fiber: Fiber): void {
   }
   const nextInstance = nextHydratableInstance;
   if (!nextInstance || !tryHydrateSuspense(fiber, nextInstance)) {
-    warnNonHydratedInstance((hydrationParentFiber: any), fiber);
+    warnNonHydratedInstance(fiber);
     throwOnHydrationMismatch(fiber);
   }
 }
@@ -497,9 +392,6 @@ export function tryToClaimNextHydratableFormMarkerInstance(
   return false;
 }
 
-// Temp
-let didWarnInvalidHydration = false;
-
 function prepareToHydrateHostInstance(
   fiber: Fiber,
   hostContext: HostContext,
@@ -522,39 +414,8 @@ function prepareToHydrateHostInstance(
         hostContext,
       );
       if (differences !== null) {
-        if (differences.children != null && !didWarnInvalidHydration) {
-          didWarnInvalidHydration = true;
-          const serverValue = differences.children;
-          const clientValue = fiber.memoizedProps.children;
-          console.error(
-            'Text content did not match. Server: "%s" Client: "%s"',
-            serverValue,
-            clientValue,
-          );
-        }
-        for (const propName in differences) {
-          if (!differences.hasOwnProperty(propName)) {
-            continue;
-          }
-          if (didWarnInvalidHydration) {
-            break;
-          }
-          didWarnInvalidHydration = true;
-          const serverValue = differences[propName];
-          const clientValue = fiber.memoizedProps[propName];
-          if (propName === 'children') {
-            // Already handled above
-          } else if (clientValue != null) {
-            console.error(
-              'Prop `%s` did not match. Server: %s Client: %s',
-              propName,
-              JSON.stringify(serverValue),
-              JSON.stringify(clientValue),
-            );
-          } else {
-            console.error('Extra attribute from the server: %s', propName);
-          }
-        }
+        const diffNode = buildHydrationDiffNode(fiber);
+        diffNode.serverProps = differences;
       }
     }
   }
@@ -567,7 +428,7 @@ function prepareToHydrateHostInstance(
     fiber,
   );
   if (!didHydrate) {
-    throw new Error('Text content does not match server-rendered HTML.');
+    throwOnHydrationMismatch(fiber);
   }
 }
 
@@ -596,13 +457,9 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
               textContent,
               parentProps,
             );
-            if (difference !== null && !didWarnInvalidHydration) {
-              didWarnInvalidHydration = true;
-              console.error(
-                'Text content did not match. Server: "%s" Client: "%s"',
-                difference,
-                textContent,
-              );
+            if (difference !== null) {
+              const diffNode = buildHydrationDiffNode(fiber);
+              diffNode.serverProps = difference;
             }
           }
         }
@@ -618,13 +475,9 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
               textContent,
               parentProps,
             );
-            if (difference !== null && !didWarnInvalidHydration) {
-              didWarnInvalidHydration = true;
-              console.error(
-                'Text content did not match. Server: "%s" Client: "%s"',
-                difference,
-                textContent,
-              );
+            if (difference !== null) {
+              const diffNode = buildHydrationDiffNode(fiber);
+              diffNode.serverProps = difference;
             }
           }
         }
@@ -641,7 +494,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
     parentProps,
   );
   if (!didHydrate) {
-    throw new Error('Text content does not match server-rendered HTML.');
+    throwOnHydrationMismatch(fiber);
   }
 }
 
@@ -774,10 +627,15 @@ function popHydrationState(fiber: Fiber): boolean {
 }
 
 function warnIfUnhydratedTailNodes(fiber: Fiber) {
-  let nextInstance = nextHydratableInstance;
-  while (nextInstance) {
-    warnUnhydratedInstance(fiber, nextInstance);
-    nextInstance = getNextHydratableSibling(nextInstance);
+  if (__DEV__) {
+    let nextInstance = nextHydratableInstance;
+    while (nextInstance) {
+      const diffNode = buildHydrationDiffNode(fiber);
+      const description =
+        describeHydratableInstanceForDevWarnings(nextInstance);
+      diffNode.serverTail.push(description);
+      nextInstance = getNextHydratableSibling(nextInstance);
+    }
   }
 }
 
@@ -814,6 +672,34 @@ export function queueHydrationError(error: CapturedValue<mixed>): void {
   }
 }
 
+export function emitPendingHydrationWarnings() {
+  if (__DEV__) {
+    // If we haven't yet thrown any hydration errors by the time we reach the end we've successfully
+    // hydrated, however, we might still have DEV-only mismatches that we log now.
+    const diffRoot = hydrationDiffRootDEV;
+    if (diffRoot !== null) {
+      hydrationDiffRootDEV = null;
+      const diff = describeDiff(diffRoot);
+      console.error(
+        "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. " +
+          'This can happen if a SSR-ed Client Component used:\n' +
+          '\n' +
+          "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
+          "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
+          "- Date formatting in a user's locale which doesn't match the server.\n" +
+          '- External changing data without sending a snapshot of it along with the HTML.\n' +
+          '- Invalid HTML tag nesting.\n' +
+          '\n' +
+          'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
+          '\n' +
+          '%s%s',
+        'https://react.dev/link/hydration-mismatch',
+        diff,
+      );
+    }
+  }
+}
+
 export {
   warnIfHydrating,
   enterHydrationState,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationDiffs.js b/packages/react-reconciler/src/ReactFiberHydrationDiffs.js
new file mode 100644
index 0000000000000..f6b6bee117be1
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHydrationDiffs.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactInternalTypes';
+
+export type HydrationDiffNode = {
+  fiber: Fiber,
+  children: Array<HydrationDiffNode>,
+  serverProps: void | null | $ReadOnly<{[propName: string]: mixed}> | string, // null means no matching server node
+  serverTail: Array<
+    | $ReadOnly<{type: string, props: $ReadOnly<{[propName: string]: mixed}>}>
+    | string,
+  >,
+};
+
+export function describeDiff(rootNode: HydrationDiffNode): string {
+  return '\n';
+}
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 4e4334e346a41..cc1985051339a 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -403,7 +403,7 @@
   "415": "Error parsing the data. It's probably an error code or network corruption.",
   "416": "This environment don't support binary chunks.",
   "417": "React currently only supports piping to one writable stream.",
-  "418": "Hydration failed because the initial UI does not match what was rendered on the server.",
+  "418": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n- A server/client branch `if (typeof window !== 'undefined')`.\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
   "419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
   "420": "ServerContext: %s already defined",
   "421": "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.",
@@ -502,5 +502,6 @@
   "514": "Cannot access %s on the server. You cannot dot into a temporary client reference from a server component. You can only pass the value through to the client.",
   "515": "Cannot assign to a temporary client reference from a server module.",
   "516": "Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
-  "517": "Symbols cannot be passed to a Server Function without a temporary reference set. Pass a TemporaryReferenceSet to the options.%s"
+  "517": "Symbols cannot be passed to a Server Function without a temporary reference set. Pass a TemporaryReferenceSet to the options.%s",
+  "518": "Saw multiple hydration diff roots in a pass. This is a bug in React."
 }