fix(engine-core): log warnings instead of errors on hydration mismatch (

#4848)

Co-authored-by: Nolan Lawson <nlawson@salesforce.com>

packages/@lwc/engine-core/src/framework/hydration.ts

@@ -23,7 +23,7 @@ import {
     parseStyleText,
 } from '@lwc/shared';
 
-import { logError, logWarn } from '../shared/logger';
+import { logWarn } from '../shared/logger';
 
 import { RendererAPI } from './renderer';
 import { cloneAndOmitKey, shouldBeFormAssociated } from './utils';
@@ -82,7 +82,7 @@ export function hydrateRoot(vm: VM) {
     hydrateVM(vm);
 
     if (hasMismatch && process.env.NODE_ENV !== 'production') {
-        logError('Hydration completed with errors.', vm);
+        logWarn('Hydration completed with errors.', vm);
     }
 }
 
@@ -441,7 +441,7 @@ function hydrateChildren(
                 if (process.env.NODE_ENV !== 'production') {
                     if (!hasWarned) {
                         hasWarned = true;
-                        logError(
+                        logWarn(
                             `Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`,
                             owner
                         );
@@ -473,7 +473,7 @@ function hydrateChildren(
         hasMismatch = true;
         if (process.env.NODE_ENV !== 'production') {
             if (!hasWarned) {
-                logError(
+                logWarn(
                     `Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`,
                     owner
                 );
@@ -518,7 +518,7 @@ function hasCorrectNodeType<T extends Node>(
     const { getProperty } = renderer;
     if (getProperty(node, 'nodeType') !== nodeType) {
         if (process.env.NODE_ENV !== 'production') {
-            logError('Hydration mismatch: incorrect node type received', vnode.owner);
+            logWarn('Hydration mismatch: incorrect node type received', vnode.owner);
         }
         return false;
     }
@@ -535,7 +535,7 @@ function isMatchingElement(
     const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(
+            logWarn(
                 `Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(
                     elm,
                     'tagName'
@@ -601,7 +601,7 @@ function validateAttrs(
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
                 const { getProperty } = renderer;
-                logError(
+                logWarn(
                     `Mismatch hydrating element <${getProperty(
                         elm,
                         'tagName'
@@ -703,7 +703,7 @@ function validateClassAttr(
 
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(
+            logWarn(
                 `Mismatch hydrating element <${getProperty(
                     elm,
                     'tagName'
@@ -763,7 +763,7 @@ function validateStyleAttr(
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
             const { getProperty } = renderer;
-            logError(
+            logWarn(
                 `Mismatch hydrating element <${getProperty(
                     elm,
                     'tagName'
@@ -802,7 +802,7 @@ function areCompatibleStaticNodes(client: Node, ssr: Node, vnode: VStatic, rende
     let isCompatibleElements = true;
     if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(
+            logWarn(
                 `Hydration mismatch: expecting element with tag "${getProperty(
                     client,
                     'tagName'
@@ -824,7 +824,7 @@ function areCompatibleStaticNodes(client: Node, ssr: Node, vnode: VStatic, rende
             // partId === 0 will always refer to the root element, this is guaranteed by the compiler.
             if (parts?.[0].partId !== 0) {
                 if (process.env.NODE_ENV !== 'production') {
-                    logError(
+                    logWarn(
                         `Mismatch hydrating element <${getProperty(
                             client,
                             'tagName'

packages/@lwc/integration-karma/test-hydration/attributes/falsy-mismatch/index.spec.js

@@ -29,8 +29,8 @@ export default {
         }
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            warn: [],
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <div>: attribute "data-foo" has different values, expected "undefined" but found null',
                 'Mismatch hydrating element <div>: attribute "data-foo" has different values, expected "null" but found null',
                 'Hydration completed with errors.',

packages/@lwc/integration-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js

@@ -19,7 +19,8 @@ export default {
         expect(p.getAttribute('data-another-diff')).toBe('client-val');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "title" has different values, expected "client-title" but found "ssr-title"',
                 'Mismatch hydrating element <p>: attribute "data-another-diff" has different values, expected "client-val" but found "ssr-val"',
                 'Hydration completed with errors.',

packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js

@@ -18,7 +18,8 @@ export default {
         expect(div.getAttribute('data-static')).toBe('same-value');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <div>: attribute "data-foo" has different values, expected "client" but found "server"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js

@@ -19,7 +19,8 @@ export default {
         expect(p.className).not.toBe(snapshots.classes);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "c2 c3 c4" but found "c1 c2 c3"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js

@@ -22,8 +22,8 @@ export default {
         expect(p.className).not.toBe(snapshots.className);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            warn: [],
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "null" but found null',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js

@@ -22,8 +22,8 @@ export default {
         expect(p.className).not.toBe(snapshots.className);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            warn: [],
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "" but found "null"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-throws/index.spec.js

@@ -19,7 +19,8 @@ export default {
         expect(p.className).not.toBe(snapshots.classes);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "c3 c2 c1" but found "c1 c2 c3"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js

@@ -18,7 +18,8 @@ export default {
         expect(p.className).toBe('');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "" but found "yolo"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js

@@ -18,7 +18,8 @@ export default {
         expect(p.className).toBe('yolo');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "yolo" but found null',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js

@@ -20,7 +20,8 @@ export default {
         expect(p.className).toBe('c1 c2 c3');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c1 c3"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js

@@ -20,7 +20,8 @@ export default {
         expect(p.className).toBe('c1 c3');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c3" but found "c1 c2 c3"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js

@@ -12,9 +12,10 @@ export default {
 
         const consoleCalls = consoleSpy.calls;
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Mismatch hydrating element <x-child>: attribute "class" has different values, expected "" but found "foo"\n',
-                '[LWC error]: Hydration completed with errors.\n',
+            error: [],
+            warn: [
+                '[LWC warn]: Mismatch hydrating element <x-child>: attribute "class" has different values, expected "" but found "foo"\n',
+                '[LWC warn]: Hydration completed with errors.\n',
             ],
         });
     },

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js

@@ -20,13 +20,14 @@ export default {
             expect(p).toBe(snapshots.p);
             expect(p.className).toBe(snapshots.classes);
 
-            expect(consoleCalls.error).toHaveSize(0);
+            expect(consoleCalls.warn).toHaveSize(0);
         } else {
             expect(p).not.toBe(snapshots.p);
             expect(p.className).toBe('c1 c2 c3');
 
             TestUtils.expectConsoleCallsDev(consoleCalls, {
-                error: [
+                error: [],
+                warn: [
                     'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"',
                     'Hydration completed with errors.',
                 ],

packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js

@@ -18,7 +18,8 @@ export default {
         expect(comment.nodeValue).toBe(snapshots.text.nodeValue);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Hydration mismatch: incorrect node type received',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js

@@ -22,6 +22,7 @@ export default {
         expect(p.textContent).toBe('different-content');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
+            error: [],
             warn: [
                 'Mismatch hydrating element <div>: innerHTML values do not match for element, will recover from the difference',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js

@@ -24,7 +24,8 @@ export default {
         expect(p.getAttribute('data-attrs')).toBe('client-attrs');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <p>: attribute "data-attrs" has different values, expected "client-attrs" but found "ssr-attrs"',
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "client-class" but found "ssr-class"',
                 'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"',

packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js

@@ -18,8 +18,9 @@ export default {
         expect(target.shadowRoot.querySelector('x-client')).not.toBeNull();
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Hydration mismatch: expecting element with tag "x-client" but found "x-server".',
+            error: [],
+            warn: [
+                '[LWC warn]: Hydration mismatch: expecting element with tag "x-client" but found "x-server".',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js

@@ -20,8 +20,9 @@ export default {
         expect(text.nodeType).toBe(Node.TEXT_NODE);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Hydration mismatch: incorrect node type received',
+            error: [],
+            warn: [
+                '[LWC warn]: Hydration mismatch: incorrect node type received',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js

@@ -19,6 +19,7 @@ export default {
         expect(comment.nodeValue).toBe('second');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
+            error: [],
             warn: [
                 'Hydration mismatch: comment values do not match, will recover from the difference',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js

@@ -19,6 +19,7 @@ export default {
         expect(p.textContent).toBe('bye!');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
+            error: [],
             warn: [
                 'Hydration mismatch: text values do not match, will recover from the difference',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js

@@ -25,8 +25,8 @@ export default {
         expect(child.getAttribute('class')).toBe('is-client');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            warn: [],
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <x-child>: attribute "class" has different values, expected "is-client" but found "is-server"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js

@@ -24,8 +24,8 @@ export default {
         expect(child.getAttribute('data-mismatched-attr')).toBe('is-client');
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            warn: [],
-            error: [
+            error: [],
+            warn: [
                 'Mismatch hydrating element <x-child>: attribute "data-mismatched-attr" has different values, expected "is-client" but found "is-server"',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js

@@ -16,7 +16,8 @@ export default {
         expect(hydratedSnapshot.text).not.toBe(snapshots.text);
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Server rendered more nodes than the client.',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js

@@ -14,12 +14,23 @@ export default {
         const hydratedSnapshot = this.snapshot(target);
 
         expect(hydratedSnapshot.text).not.toBe(snapshots.text);
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                'Server rendered more nodes than the client.',
-                'Hydration completed with errors.',
-            ],
-        });
+        if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
+            TestUtils.expectConsoleCallsDev(consoleCalls, {
+                error: [],
+                warn: [
+                    'Hydration mismatch: text values do not match, will recover from the difference',
+                    'Server rendered more nodes than the client.',
+                    'Hydration completed with errors.',
+                ],
+            });
+        } else {
+            TestUtils.expectConsoleCallsDev(consoleCalls, {
+                error: [],
+                warn: [
+                    'Server rendered more nodes than the client.',
+                    'Hydration completed with errors.',
+                ],
+            });
+        }
     },
 };

packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js

@@ -17,7 +17,8 @@ export default {
         expect(div).toBeDefined();
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
+            error: [],
+            warn: [
                 'Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.',
                 'Hydration completed with errors.',
             ],

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js

@@ -22,8 +22,9 @@ export default {
         );
 
         TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"',
+            error: [],
+            warn: [
+                '[LWC warn]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"',
                 'Hydration completed with errors.',
             ],
         });