.

node_modules/next/dist/esm/next-devtools/userspace/pages/hydration-error-state.js

@@ -0,0 +1,131 @@
+import { getHydrationWarningType, isHydrationError as isReact18HydrationError, isHydrationWarning as isReact18HydrationWarning } from '../../shared/react-18-hydration-error';
+import { isHydrationError as isReact19HydrationError, isErrorMessageWithComponentStackDiff as isReact19HydrationWarning } from '../../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();
+export function getSquashedHydrationErrorDetails(error) {
+    return squashedHydrationErrorDetails.has(error) ? squashedHydrationErrorDetails.get(error) : null;
+}
+export function attachHydrationErrorState(error) {
+    if (!isReact18HydrationError(error) && !isReact19HydrationError(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);
+    }
+}
+// TODO: Only handle React 18. Once we surface console.error in the dev overlay in pages router,
+// we can use the same behavior as App Router.
+export function storeHydrationErrorStateFromConsoleArgs(...args) {
+    let [message, firstContent, secondContent, ...rest] = args;
+    if (isReact18HydrationWarning(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 (isReact19HydrationWarning(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 = 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;
+}
+
+//# sourceMappingURL=hydration-error-state.js.map

node_modules/next/dist/esm/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.js

@@ -0,0 +1,20 @@
+import React from 'react';
+export class PagesDevOverlayErrorBoundary extends React.PureComponent {
+    static getDerivedStateFromError(error) {
+        return {
+            error
+        };
+    }
+    // Explicit type is needed to avoid the generated `.d.ts` having a wide return type that could be specific to the `@types/react` version.
+    render() {
+        // The component has to be unmounted or else it would continue to error
+        return this.state.error ? null : this.props.children;
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            error: null
+        };
+    }
+}
+
+//# sourceMappingURL=pages-dev-overlay-error-boundary.js.map

node_modules/next/dist/esm/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.tsx"],"sourcesContent":["import React from 'react'\n\ntype PagesDevOverlayErrorBoundaryProps = {\n  children?: React.ReactNode\n}\ntype PagesDevOverlayErrorBoundaryState = { error: Error | null }\n\nexport class PagesDevOverlayErrorBoundary extends React.PureComponent<\n  PagesDevOverlayErrorBoundaryProps,\n  PagesDevOverlayErrorBoundaryState\n> {\n  state = { error: null }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  // Explicit type is needed to avoid the generated `.d.ts` having a wide return type that could be specific to the `@types/react` version.\n  render(): React.ReactNode {\n    // The component has to be unmounted or else it would continue to error\n    return this.state.error ? null : this.props.children\n  }\n}\n"],"names":["React","PagesDevOverlayErrorBoundary","PureComponent","getDerivedStateFromError","error","render","state","props","children"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AAOzB,OAAO,MAAMC,qCAAqCD,MAAME,aAAa;IAMnE,OAAOC,yBAAyBC,KAAY,EAAE;QAC5C,OAAO;YAAEA;QAAM;IACjB;IAEA,yIAAyI;IACzIC,SAA0B;QACxB,uEAAuE;QACvE,OAAO,IAAI,CAACC,KAAK,CAACF,KAAK,GAAG,OAAO,IAAI,CAACG,KAAK,CAACC,QAAQ;IACtD;;QAdK,qBAILF,QAAQ;YAAEF,OAAO;QAAK;;AAWxB","ignoreList":[0]}

node_modules/next/dist/esm/next-devtools/userspace/pages/pages-dev-overlay-setup.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { renderPagesDevOverlay } from 'next/dist/compiled/next-devtools';
+import { dispatcher } from 'next/dist/compiled/next-devtools';
+import { attachHydrationErrorState, storeHydrationErrorStateFromConsoleArgs } from './hydration-error-state';
+import { Router } from '../../../client/router';
+import { getOwnerStack } from '../app/errors/stitched-error';
+import { isRecoverableError } from '../../../client/react-client-callbacks/on-recoverable-error';
+import { getSquashedHydrationErrorDetails } from './hydration-error-state';
+import { PagesDevOverlayErrorBoundary } from './pages-dev-overlay-error-boundary';
+import { initializeDebugLogForwarding, forwardUnhandledError, logUnhandledRejection, forwardErrorLog } from '../app/forward-logs';
+const usePagesDevOverlayBridge = ()=>{
+    React.useInsertionEffect(()=>{
+        // NDT uses a different React instance so it's not technically a state update
+        // scheduled from useInsertionEffect.
+        renderPagesDevOverlay(getOwnerStack, getSquashedHydrationErrorDetails, isRecoverableError);
+    }, []);
+    React.useEffect(()=>{
+        const { handleStaticIndicator } = require('../../../client/dev/hot-reloader/pages/hot-reloader-pages');
+        Router.events.on('routeChangeComplete', handleStaticIndicator);
+        return function() {
+            Router.events.off('routeChangeComplete', handleStaticIndicator);
+        };
+    }, []);
+};
+export function PagesDevOverlayBridge({ children }) {
+    usePagesDevOverlayBridge();
+    return /*#__PURE__*/ _jsx(PagesDevOverlayErrorBoundary, {
+        children: children
+    });
+}
+let isRegistered = false;
+function handleError(error) {
+    if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show. :-(
+        return;
+    }
+    attachHydrationErrorState(error);
+    // Skip ModuleBuildError and ModuleNotFoundError, as it will be sent through onBuildError callback.
+    // This is to avoid same error as different type showing up on client to cause flashing.
+    if (error.name !== 'ModuleBuildError' && error.name !== 'ModuleNotFoundError') {
+        dispatcher.onUnhandledError(error);
+    }
+}
+let origConsoleError = console.error;
+function nextJsHandleConsoleError(...args) {
+    // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
+    const maybeError = process.env.NODE_ENV !== 'production' ? args[1] : args[0];
+    storeHydrationErrorStateFromConsoleArgs(...args);
+    // TODO: Surfaces non-errors logged via `console.error`.
+    handleError(maybeError);
+    forwardErrorLog(args);
+    origConsoleError.apply(window.console, args);
+}
+function onUnhandledError(event) {
+    const error = event?.error;
+    handleError(error);
+    if (error) {
+        forwardUnhandledError(error);
+    }
+}
+function onUnhandledRejection(ev) {
+    const reason = ev?.reason;
+    if (!reason || !(reason instanceof Error) || typeof reason.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show. :-(
+        return;
+    }
+    dispatcher.onUnhandledRejection(reason);
+    logUnhandledRejection(reason);
+}
+export function register() {
+    if (isRegistered) {
+        return;
+    }
+    isRegistered = true;
+    try {
+        Error.stackTraceLimit = 50;
+    } catch  {}
+    initializeDebugLogForwarding('pages');
+    window.addEventListener('error', onUnhandledError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+    window.console.error = nextJsHandleConsoleError;
+}
+
+//# sourceMappingURL=pages-dev-overlay-setup.js.map