feat(error-overlay): style tweaks (#63522)

vercel · Mar 25, 2024 · 752d6e4 · 752d6e4
1 parent 043bbaa
commit 752d6e4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
@@ -255,8 +255,8 @@ export function Errors({
                 <span>{activeIdx + 1}</span> of{' '}
                 <span data-nextjs-dialog-header-total-count>
                   {readyErrors.length}
-                </span>{' '}
-                unhandled error
+                </span>
+                {' error'}
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
               {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
@@ -316,10 +316,10 @@ export const styles = css`
     margin-left: var(--size-gap-double);
   }
   .nextjs-container-errors-header small > span {
-    font-family: var(--font-stack-monospace);
+    font-family: sans-serif;
   }
   .nextjs-container-errors-header p {
-    font-family: var(--font-stack-monospace);
+    font-family: sans-serif;
     font-size: var(--size-font-small);
     line-height: var(--size-font-big);
     font-weight: bold;
@@ -328,14 +328,13 @@ export const styles = css`
     white-space: pre-wrap;
   }
   .nextjs__container_errors_desc--error {
-    color: var(--color-ansi-red);
+    padding-left: var(--size-gap);
+    border-left: 4px solid var(--color-accents-1);
+    color: var(--color-font);
   }
   .nextjs__container_errors__extra {
     margin: 20px 0;
   }
-  nextjs__container_errors__extra__code {
-    margin: 10px 0;
-  }
   .nextjs-container-errors-header > div > small {
     margin: 0;
     margin-top: var(--size-gap-half);

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -3,6 +3,7 @@ import { sandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import { outdent } from 'outdent'
+import { getRedboxTotalErrorCount } from 'next-test-utils'
 
 // https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js used as a reference
 
@@ -373,10 +374,7 @@ describe('Error overlay for hydration errors', () => {
     await session.waitForAndOpenRuntimeError()
     expect(await session.hasRedbox()).toBe(true)
 
-    const totalErrorCount = await browser
-      .elementByCss('[data-nextjs-dialog-header-total-count]')
-      .text()
-    expect(totalErrorCount).toBe('1')
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
     expect(description).toContain(
@@ -436,10 +434,7 @@ describe('Error overlay for hydration errors', () => {
     await session.waitForAndOpenRuntimeError()
     expect(await session.hasRedbox()).toBe(true)
 
-    const totalErrorCount = await browser
-      .elementByCss('[data-nextjs-dialog-header-total-count]')
-      .text()
-    expect(totalErrorCount).toBe('1')
+    expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
     expect(description).toContain(

diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
@@ -790,6 +790,13 @@ export async function getRedboxHeader(browser: BrowserInterface) {
   )
 }
 
+export async function getRedboxTotalErrorCount(browser: BrowserInterface) {
+  return parseInt(
+    (await getRedboxHeader(browser)).match(/\d+ of (\d+) error/)?.[1],
+    10
+  )
+}
+
 export async function getRedboxSource(browser: BrowserInterface) {
   return retry(
     () =>