refactor: Improve hydration mismatch errors for third-party scripts

aparzi · aparzi · commit 6578a995e8b9 · 2026-04-14T09:59:14.000+02:00
Improves error messages shown during hydration mismatches to better surface cases where third-party scripts or browser extensions have modified the DOM outside of Angular's control. Fixed #59224
diff --git a/packages/core/src/hydration/error_handling.ts b/packages/core/src/hydration/error_handling.ts
@@ -14,10 +14,14 @@ import {HOST, LView, TVIEW} from '../render3/interfaces/view';
 import {getParentRElement} from '../render3/node_manipulation';
 import {unwrapRNode} from '../render3/util/view_utils';
 
+import {readPatchedData} from '../render3/context_discovery';
 import {markRNodeAsHavingHydrationMismatch} from './utils';
+import {DOC_PAGE_BASE_URL} from '../../../core/src/error_details_base_url';
 
 const AT_THIS_LOCATION = '<-- AT THIS LOCATION';
 
+const THIRD_PARTY_SCRIPTS_URL = `/guide/hydration#third-party-scripts-with-dom-manipulation`;
+
 /**
  * Retrieves a user friendly string for a given TNodeType for use in
  * friendly error messages
@@ -100,7 +104,18 @@ export function validateMatchingNode(
     }
 
     const footer = getHydrationErrorFooter(componentClassName);
-    const message = header + expected + actual + getHydrationAttributeNote() + footer;
+    let message = header + expected + actual + getHydrationAttributeNote() + footer;
+
+    // Check both when a mismatching node is found AND when the expected node is missing,
+    // since third-party scripts can both inject extra nodes and remove existing ones.
+    if (!node || (node && isLikelyExternalSourceNode(node))) {
+      message +=
+        `Note: It looks like this mismatch may have been caused by a third-party script or ` +
+        `browser extension that modified the DOM outside of Angular's control. ` +
+        `Angular hydration does not support nodes injected or removed outside of the Angular-managed DOM. ` +
+        `Note: If you know which element in the DOM this will be inserted, consider adding ngSkipHydration to prevent this error. \n\n`;
+    }
+
     throw new RuntimeError(RuntimeErrorCode.HYDRATION_NODE_MISMATCH, message);
   }
 }
@@ -413,11 +428,32 @@ function getHydrationErrorFooter(componentClassName?: string): string {
     `To fix this problem:\n` +
     `  * check ${componentInfo} component for hydration-related issues\n` +
     `  * check to see if your template has valid HTML structure\n` +
+    `  * check if there are any third-party scripts that manipulate the DOM. More info: ${DOC_PAGE_BASE_URL}${THIRD_PARTY_SCRIPTS_URL}\n` +
     `  * or skip hydration by adding the \`ngSkipHydration\` attribute ` +
     `to its host node in a template\n\n`
   );
 }
 
+/**
+ * Checks if a given RNode is likely to have been added by a third-party script
+ * or browser extension, by checking whether Angular has any knowledge of it
+ * via patched data. Nodes created and managed by Angular will always have
+ * patched data attached to them.
+ */
+function isLikelyExternalSourceNode(rNode: RNode): boolean {
+  const node = rNode as Node;
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  // If Angular has patched this node, it was created within Angular's context.
+  if (readPatchedData(node as HTMLElement)) {
+    return false;
+  }
+  // No patched data means Angular has no record of this node —
+  // it was likely injected by a third-party script or browser extension.
+  return true;
+}
+
 /**
  * An attribute related note for hydration errors
  */
diff --git a/packages/platform-server/test/full_app_hydration_spec.ts b/packages/platform-server/test/full_app_hydration_spec.ts
@@ -6197,10 +6197,39 @@ describe('platform-server full application hydration integration', () => {
           expect(message).toContain('During hydration Angular expected <b> but found <span>');
           expect(message).toContain('<b>…</b>  <-- AT THIS LOCATION');
           expect(message).toContain('<span>…</span>  <-- AT THIS LOCATION');
+          expect(message).toContain('/guide/hydration#third-party-scripts-with-dom-manipulation');
           verifyNodeHasMismatchInfo(doc);
         });
       });
 
+      it('should if there are any third-party scripts that manipulate the DOM', async () => {
+        @Component({
+          selector: 'app',
+          template: `<div>Original content</div>`,
+        })
+        class SimpleComponent {
+          private doc = inject(DOCUMENT);
+          ngAfterViewInit() {
+            const div = this.doc.querySelector('div');
+            const ins = this.doc.createElement('ins');
+            ins.setAttribute('data-ad-client', 'ca-pub-1234');
+            ins.textContent = 'Ad content';
+            div?.parentNode?.insertBefore(ins, div);
+          }
+        }
+
+        const html = await ssr(SimpleComponent);
+        resetTViewsFor(SimpleComponent);
+
+        await prepareEnvironmentAndHydrate(doc, html, SimpleComponent, {
+          envProviders: [withNoopErrorHandler()],
+        }).catch((err: unknown) => {
+          const message = (err as Error).message;
+          expect(message).toContain('During hydration Angular expected <div> but found <ins>');
+          expect(message).toContain('/guide/hydration#third-party-scripts-with-dom-manipulation');
+        });
+      });
+
       it('should handle <ng-container> node mismatch', async () => {
         @Component({
           selector: 'app',
