[DevOverlay] cleanup hydration error UI

vercel · Jan 31, 2025 · 5d4e646 · 5d4e646
1 parent b9c593f
commit 5d4e646
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 31 deletions.
diff --git a/packages/next/src/client/components/is-hydration-error.ts b/packages/next/src/client/components/is-hydration-error.ts
@@ -3,7 +3,7 @@ import isError from '../../lib/is-error'
 const hydrationErrorRegex =
   /hydration failed|while hydrating|content does not match|did not match|HTML didn't match/i
 
-const reactUnifiedMismatchWarning = `Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used`
+const reactUnifiedMismatchWarning = `Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:`
 
 const reactHydrationStartMessages = [
   reactUnifiedMismatchWarning,

diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx
@@ -267,4 +267,7 @@ export const styles = css`
   .error-overlay-notes-container {
     padding: 0 var(--size-4);
   }
+  .error-overlay-notes-container p {
+    white-space: pre-wrap;
+  }
 `
diff --git a/...ev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.tsx b/...ev-overlay/_experimental/internal/container/runtime-error/component-stack-pseudo-html.tsx
@@ -304,15 +304,13 @@ export function PseudoHtmlDiff({
 
   return (
     <div data-nextjs-container-errors-pseudo-html>
-      <span>
-        <button
-          tabIndex={10} // match CallStackFrame
-          data-nextjs-container-errors-pseudo-html-collapse
-          onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}
-        >
-          <CollapseIcon collapsed={isHtmlCollapsed} />
-        </button>
-      </span>
+      <button
+        tabIndex={10} // match CallStackFrame
+        data-nextjs-container-errors-pseudo-html-collapse
+        onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}
+      >
+        <CollapseIcon collapsed={isHtmlCollapsed} />
+      </button>
       <pre {...props}>
         <code>{htmlComponents}</code>
       </pre>
@@ -371,6 +369,7 @@ export const PSEUDO_HTML_DIFF_STYLES = css`
   }
   [data-nextjs-container-errors-pseudo-html-collapse] {
     all: unset;
+    padding: var(--size-2);
     &:focus {
       outline: none;
     }
@@ -393,16 +392,10 @@ export const PSEUDO_HTML_DIFF_STYLES = css`
   [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
     color: var(--color-accents-1);
   }
-
-  [data-nextjs-container-errors-pseudo-html] > span {
-    display: block;
-    height: var(--size-5);
-  }
   [data-nextjs-container-errors-pseudo-html] > pre > code > span {
     display: block;
-    height: var(--size-5);
+    padding: var(--size-1) var(--size-4);
   }
-
   .nextjs__container_errors__component-stack {
     margin: 0;
   }

diff --git a/...ent/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx b/...ent/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx
@@ -6,20 +6,20 @@ import { CallStack } from '../../components/errors/call-stack/call-stack'
 import { noop as css } from '../../helpers/noop-template'
 import { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html'
 
-export type RuntimeErrorProps = { error: ReadyRuntimeError }
+export type RuntimeErrorProps = {
+  error: ReadyRuntimeError
+}
 
 export function RuntimeError({ error }: RuntimeErrorProps) {
-  const { firstFrame } = useMemo(() => {
+  const firstFrame = useMemo(() => {
     const firstFirstPartyFrameIndex = error.frames.findIndex(
       (entry) =>
         !entry.ignored &&
         Boolean(entry.originalCodeFrame) &&
         Boolean(entry.originalStackFrame)
     )
 
-    return {
-      firstFrame: error.frames[firstFirstPartyFrameIndex] ?? null,
-    }
+    return error.frames[firstFirstPartyFrameIndex] ?? null
   }, [error.frames])
 
   return (

diff --git a/...xt/src/client/components/react-dev-overlay/_experimental/internal/icons/collapse-icon.tsx b/...xt/src/client/components/react-dev-overlay/_experimental/internal/icons/collapse-icon.tsx
@@ -3,21 +3,20 @@ export function CollapseIcon({ collapsed }: { collapsed?: boolean } = {}) {
     <svg
       data-nextjs-call-stack-chevron-icon
       data-collapsed={collapsed}
+      width="16"
+      height="16"
       fill="none"
-      height="20"
-      width="20"
-      shapeRendering="geometricPrecision"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
       // rotate 90 degrees if not collapsed.
       {...(typeof collapsed === 'boolean'
         ? { style: { transform: collapsed ? undefined : 'rotate(90deg)' } }
         : {})}
     >
-      <path d="M9 18l6-6-6-6" />
+      <path
+        fill="#666"
+        fillRule="evenodd"
+        d="m6.75 3.94.53.53 2.824 2.823a1 1 0 0 1 0 1.414L7.28 11.53l-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5l1.06-1.06Z"
+        clipRule="evenodd"
+      />
     </svg>
   )
 }