161 lines
7.2 KiB
JavaScript
161 lines
7.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
0 && (module.exports = {
|
|
attachHydrationErrorState: null,
|
|
getSquashedHydrationErrorDetails: null,
|
|
storeHydrationErrorStateFromConsoleArgs: null
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
attachHydrationErrorState: function() {
|
|
return attachHydrationErrorState;
|
|
},
|
|
getSquashedHydrationErrorDetails: function() {
|
|
return getSquashedHydrationErrorDetails;
|
|
},
|
|
storeHydrationErrorStateFromConsoleArgs: function() {
|
|
return storeHydrationErrorStateFromConsoleArgs;
|
|
}
|
|
});
|
|
const _react18hydrationerror = require("../../shared/react-18-hydration-error");
|
|
const _react19hydrationerror = require("../../shared/react-19-hydration-error");
|
|
// We only need this for React 18 or hydration console errors in React 19.
|
|
// Once we surface console.error in the dev overlay in pages router, we should only
|
|
// use this for React 18.
|
|
let hydrationErrorState = {};
|
|
const squashedHydrationErrorDetails = new WeakMap();
|
|
function getSquashedHydrationErrorDetails(error) {
|
|
return squashedHydrationErrorDetails.has(error) ? squashedHydrationErrorDetails.get(error) : null;
|
|
}
|
|
function attachHydrationErrorState(error) {
|
|
if (!(0, _react18hydrationerror.isHydrationError)(error) && !(0, _react19hydrationerror.isHydrationError)(error)) {
|
|
return;
|
|
}
|
|
let parsedHydrationErrorState = {};
|
|
// If there's any extra information in the error message to display,
|
|
// append it to the error message details property
|
|
if (hydrationErrorState.warning) {
|
|
// The patched console.error found hydration errors logged by React
|
|
// Append the logged warning to the error message
|
|
parsedHydrationErrorState = {
|
|
// It contains the warning, component stack, server and client tag names
|
|
...hydrationErrorState
|
|
};
|
|
// Consume the cached hydration diff.
|
|
// This is only required for now when we still squashed the hydration diff log into hydration error.
|
|
// Once the all error is logged to dev overlay in order, this will go away.
|
|
if (hydrationErrorState.reactOutputComponentDiff) {
|
|
parsedHydrationErrorState.reactOutputComponentDiff = hydrationErrorState.reactOutputComponentDiff;
|
|
}
|
|
squashedHydrationErrorDetails.set(error, parsedHydrationErrorState);
|
|
}
|
|
}
|
|
function storeHydrationErrorStateFromConsoleArgs(...args) {
|
|
let [message, firstContent, secondContent, ...rest] = args;
|
|
if ((0, _react18hydrationerror.isHydrationWarning)(message)) {
|
|
// Some hydration warnings has 4 arguments, some has 3, fallback to the last argument
|
|
// when the 3rd argument is not the component stack but an empty string
|
|
// For some warnings, there's only 1 argument for template.
|
|
// The second argument is the diff or component stack.
|
|
if (args.length === 3) {
|
|
secondContent = '';
|
|
}
|
|
const warning = message.replace(/Warning: /, '').replace('%s', firstContent).replace('%s', secondContent)// remove the last %s from the message
|
|
.replace(/%s/g, '');
|
|
const lastArg = (rest[rest.length - 1] || '').trim();
|
|
hydrationErrorState.reactOutputComponentDiff = generateHydrationDiffReact18(message, firstContent, secondContent, lastArg);
|
|
hydrationErrorState.warning = warning;
|
|
} else if ((0, _react19hydrationerror.isErrorMessageWithComponentStackDiff)(message)) {
|
|
// Some hydration warnings has 4 arguments, some has 3, fallback to the last argument
|
|
// when the 3rd argument is not the component stack but an empty string
|
|
// For some warnings, there's only 1 argument for template.
|
|
// The second argument is the diff or component stack.
|
|
if (args.length === 3) {
|
|
secondContent = '';
|
|
}
|
|
const warning = message.replace('%s', firstContent).replace('%s', secondContent)// remove the last %s from the message
|
|
.replace(/%s/g, '');
|
|
const lastArg = (args[args.length - 1] || '').trim();
|
|
hydrationErrorState.reactOutputComponentDiff = lastArg;
|
|
hydrationErrorState.warning = warning;
|
|
}
|
|
}
|
|
/*
|
|
* Some hydration errors in React 18 does not have the diff in the error message.
|
|
* Instead it has the error stack trace which is component stack that we can leverage.
|
|
* Will parse the diff from the error stack trace
|
|
* e.g.
|
|
* Warning: Expected server HTML to contain a matching <div> in <p>.
|
|
* at div
|
|
* at p
|
|
* at div
|
|
* at div
|
|
* at Page
|
|
* output:
|
|
* <Page>
|
|
* <div>
|
|
* <p>
|
|
* > <div>
|
|
*
|
|
*/ function generateHydrationDiffReact18(message, firstContent, secondContent, lastArg) {
|
|
const componentStack = lastArg;
|
|
let firstIndex = -1;
|
|
let secondIndex = -1;
|
|
const hydrationWarningType = (0, _react18hydrationerror.getHydrationWarningType)(message);
|
|
// at div\n at Foo\n at Bar (....)\n -> [div, Foo]
|
|
const components = componentStack.split('\n')// .reverse()
|
|
.map((line, index)=>{
|
|
// `<space>at <component> (<location>)` -> `at <component> (<location>)`
|
|
line = line.trim();
|
|
// extract `<space>at <component>` to `<<component>>`
|
|
// e.g. ` at Foo` -> `<Foo>`
|
|
const [, component, location] = /at (\w+)( \((.*)\))?/.exec(line) || [];
|
|
// If there's no location then it's user-land stack frame
|
|
if (!location) {
|
|
if (component === firstContent && firstIndex === -1) {
|
|
firstIndex = index;
|
|
} else if (component === secondContent && secondIndex === -1) {
|
|
secondIndex = index;
|
|
}
|
|
}
|
|
return location ? '' : component;
|
|
}).filter(Boolean).reverse();
|
|
let diff = '';
|
|
for(let i = 0; i < components.length; i++){
|
|
const component = components[i];
|
|
const matchFirstContent = hydrationWarningType === 'tag' && i === components.length - firstIndex - 1;
|
|
const matchSecondContent = hydrationWarningType === 'tag' && i === components.length - secondIndex - 1;
|
|
if (matchFirstContent || matchSecondContent) {
|
|
const spaces = ' '.repeat(Math.max(i * 2 - 2, 0) + 2);
|
|
diff += `> ${spaces}<${component}>\n`;
|
|
} else {
|
|
const spaces = ' '.repeat(i * 2 + 2);
|
|
diff += `${spaces}<${component}>\n`;
|
|
}
|
|
}
|
|
if (hydrationWarningType === 'text') {
|
|
const spaces = ' '.repeat(components.length * 2);
|
|
diff += `+ ${spaces}"${firstContent}"\n`;
|
|
diff += `- ${spaces}"${secondContent}"\n`;
|
|
} else if (hydrationWarningType === 'text-in-tag') {
|
|
const spaces = ' '.repeat(components.length * 2);
|
|
diff += `> ${spaces}<${secondContent}>\n`;
|
|
diff += `> ${spaces}"${firstContent}"\n`;
|
|
}
|
|
return diff;
|
|
}
|
|
|
|
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
|
Object.defineProperty(exports.default, '__esModule', { value: true });
|
|
Object.assign(exports.default, exports);
|
|
module.exports = exports.default;
|
|
}
|
|
|
|
//# sourceMappingURL=hydration-error-state.js.map
|