Add Owner Stack to attribute hydration mismatches (#32538)

Author: eps1lon

packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js

@@ -201,25 +201,24 @@ describe('ReactDOMFizzForm', () => {
     await act(async () => {
       ReactDOMClient.hydrateRoot(container, <App isClient={true} />);
     });
-    assertConsoleErrorDev(
-      [
-        "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' +
-          'https://react.dev/link/hydration-mismatch\n\n' +
-          '  <App isClient={true}>\n' +
-          '    <form\n' +
-          '+     action="action"\n' +
-          '-     action="function"\n' +
-          '    >\n',
-      ],
-      {withoutStack: true},
-    );
+    assertConsoleErrorDev([
+      "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' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <App isClient={true}>\n' +
+        '    <form\n' +
+        '+     action="action"\n' +
+        '-     action="function"\n' +
+        '    >\n' +
+        '\n    in form (at **)' +
+        '\n    in App (at **)',
+    ]);
   });
 
   it('should ideally warn when passing a string during SSR and function during hydration', async () => {
@@ -392,40 +391,39 @@ describe('ReactDOMFizzForm', () => {
     await act(async () => {
       root = ReactDOMClient.hydrateRoot(container, <App />);
     });
-    assertConsoleErrorDev(
-      [
-        "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' +
-          'https://react.dev/link/hydration-mismatch\n\n' +
-          '  <App>\n' +
-          '    <form\n' +
-          '      action={function action}\n' +
-          '      ref={{current:null}}\n' +
-          '+     method="DELETE"\n' +
-          '-     method={null}\n' +
-          '    >\n' +
-          '      <input\n' +
-          '        type="submit"\n' +
-          '        formAction={function action}\n' +
-          '        ref={{current:null}}\n' +
-          '+       formTarget="elsewhere"\n' +
-          '-       formTarget={null}\n' +
-          '      >\n' +
-          '      <button\n' +
-          '        formAction={function action}\n' +
-          '        ref={{current:null}}\n' +
-          '+       formEncType="text/plain"\n' +
-          '-       formEncType={null}\n' +
-          '      >\n',
-      ],
-      {withoutStack: true},
-    );
+    assertConsoleErrorDev([
+      "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' +
+        'https://react.dev/link/hydration-mismatch\n\n' +
+        '  <App>\n' +
+        '    <form\n' +
+        '      action={function action}\n' +
+        '      ref={{current:null}}\n' +
+        '+     method="DELETE"\n' +
+        '-     method={null}\n' +
+        '    >\n' +
+        '      <input\n' +
+        '        type="submit"\n' +
+        '        formAction={function action}\n' +
+        '        ref={{current:null}}\n' +
+        '+       formTarget="elsewhere"\n' +
+        '-       formTarget={null}\n' +
+        '      >\n' +
+        '      <button\n' +
+        '        formAction={function action}\n' +
+        '        ref={{current:null}}\n' +
+        '+       formEncType="text/plain"\n' +
+        '-       formEncType={null}\n' +
+        '      >\n' +
+        '\n    in input (at **)' +
+        '\n    in App (at **)',
+    ]);
     await act(async () => {
       root.render(<App isUpdate={true} />);
     });

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -10233,7 +10233,7 @@ describe('ReactDOMFizzServer', () => {
           '\n+         client' +
           '\n-         server' +
           '\n' +
-          '\n    in Suspense (at **)' +
+          '\n    in meta (at **)' +
           '\n    in ClientApp (at **)',
       ]);
     }