Skip to content

Better identify nodes in rehydration warnings #12115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
giles-v wants to merge 2 commits into from
+323 −322
Closed

Better identify nodes in rehydration warnings #12115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d083b6
Get a clearer "node signature" for debugging.
Jan 25, 2018
8d77bd1
Restructured code, fixed typechecking / tests.
Jan 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/react-dom/src/__tests__/ReactRenderDocument-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,9 @@ describe('rendering React components at document', () => {
// getTestDocument() has an extra <meta> that we didn't render.
expect(() =>
ReactDOM.hydrate(<Component text="Hello world" />, testDocument),
).toWarnDev('Did not expect server HTML to contain a <meta> in <head>.');
).toWarnDev(
'Did not expect server HTML to contain <meta charset="utf-8"> in <head>.',
);
expect(testDocument.body.innerHTML).toBe('Hello world');
});

Expand Down
25 changes: 19 additions & 6 deletions packages/react-dom/src/client/ReactDOMFiberComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ const HTML = '__html';

const {html: HTML_NAMESPACE} = Namespaces;

let getNodeSignature;

let getStack = () => '';

let warnedUnknownTags;
Expand All @@ -79,6 +81,17 @@ let normalizeHTML;
if (__DEV__) {
getStack = getCurrentFiberStackAddendum;

getNodeSignature = function(node: Element | Document) {
const attrs =
node instanceof Element
? [].slice
.call(node.attributes)
.map(item => item.name + '="' + item.value + '"')
: [];
attrs.unshift(node.nodeName.toLowerCase());
return attrs.join(' ');
};

warnedUnknownTags = {
// Chrome is the only major browser not shipping <time>. But as of July
// 2017 it intends to ship it due to widespread usage. We intentionally
Expand Down Expand Up @@ -1127,9 +1140,9 @@ export function warnForDeletedHydratableElement(
didWarnInvalidHydration = true;
warning(
false,
'Did not expect server HTML to contain a <%s> in <%s>.',
child.nodeName.toLowerCase(),
parentNode.nodeName.toLowerCase(),
'Did not expect server HTML to contain <%s> in <%s>.',
getNodeSignature(child),
getNodeSignature(parentNode),
);
}
}
Expand All @@ -1147,7 +1160,7 @@ export function warnForDeletedHydratableText(
false,
'Did not expect server HTML to contain the text node "%s" in <%s>.',
child.nodeValue,
parentNode.nodeName.toLowerCase(),
getNodeSignature(parentNode),
);
}
}
Expand All @@ -1166,7 +1179,7 @@ export function warnForInsertedHydratedElement(
false,
'Expected server HTML to contain a matching <%s> in <%s>.',
tag,
parentNode.nodeName.toLowerCase(),
getNodeSignature(parentNode),
);
}
}
Expand All @@ -1191,7 +1204,7 @@ export function warnForInsertedHydratedText(
false,
'Expected server HTML to contain a matching text node for "%s" in <%s>.',
text,
parentNode.nodeName.toLowerCase(),
getNodeSignature(parentNode),
);
}
}
Expand Down
Loading