[DevOverlay] Pass footer message from error containers

vercel · Jan 3, 2025 · 68e35d3 · 68e35d3
1 parent d061b56
commit 68e35d3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx b/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
@@ -34,6 +34,7 @@ type ErrorOverlayLayoutProps = {
   readyErrors?: ReadyRuntimeError[]
   activeIdx?: number
   setActiveIndex?: (index: number) => void
+  footerMessage?: string
 }
 
 export function ErrorOverlayLayout({
@@ -49,6 +50,7 @@ export function ErrorOverlayLayout({
   readyErrors,
   activeIdx,
   setActiveIndex,
+  footerMessage,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
@@ -94,7 +96,10 @@ export function ErrorOverlayLayout({
           <DialogFooter>
             {/* TODO: Replace message from BuildError.tsx */}
             {/* TODO: errorCode should not be undefined whatsoever */}
-            <ErrorOverlayFooter message={''} errorCode={errorCode!} />
+            <ErrorOverlayFooter
+              footerMessage={footerMessage}
+              errorCode={errorCode!}
+            />
           </DialogFooter>
         </DialogContent>
       </Dialog>

diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
@@ -2,16 +2,16 @@ import { ErrorFeedback } from './error-feedback/error-feedback'
 
 export type ErrorOverlayFooterProps = {
   errorCode: string
-  message: string
+  footerMessage?: string
 }
 
 export function ErrorOverlayFooter({
   errorCode,
-  message,
+  footerMessage,
 }: ErrorOverlayFooterProps) {
   return (
     <footer className="error-overlay-footer">
-      <p>{message}</p>
+      <p className="error-overlay-footer-message">{footerMessage}</p>
       <ErrorFeedback errorCode={errorCode} />
     </footer>
   )

diff --git a/...react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/...react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
@@ -15,6 +15,15 @@ const styles = css`
   .error-overlay-footer p {
     color: var(--color-gray-900);
     margin: 0;
+    line-height: var(--size-font-big);
+  }
+
+  .error-overlay-footer-message {
+    color: var(--color-gray-900);
+    margin: 0;
+    font-size: var(--size-font-small);
+    font-weight: 400;
+    line-height: var(--size-font-big);
   }
 
   .error-feedback {

diff --git a/...t/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx b/...t/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx
@@ -17,16 +17,9 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
       errorMessage="Failed to compile"
       onClose={noop}
       versionInfo={versionInfo}
+      footerMessage="This error occurred during the build process and can only be dismissed by fixing the error."
     >
       <Terminal content={message} />
-      <footer>
-        <p id="nextjs__container_build_error_desc">
-          <small>
-            This error occurred during the build process and can only be
-            dismissed by fixing the error.
-          </small>
-        </p>
-      </footer>
     </ErrorOverlayLayout>
   )
 }

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
@@ -244,6 +244,10 @@ export function Errors({
 
   const errorCode = extractNextErrorCode(error)
 
+  const footerMessage = isServerError
+    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'
+    : undefined
+
   return (
     <ErrorOverlayLayout
       errorCode={errorCode}
@@ -263,6 +267,7 @@ export function Errors({
       readyErrors={readyErrors}
       activeIdx={activeIdx}
       setActiveIndex={setActiveIndex}
+      footerMessage={footerMessage}
     >
       {notes ? (
         <>
@@ -295,14 +300,6 @@ export function Errors({
           reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}
         />
       ) : null}
-      {isServerError ? (
-        <div>
-          <small>
-            This error happened while generating the page. Any console logs will
-            be displayed in the terminal window.
-          </small>
-        </div>
-      ) : undefined}
       <RuntimeError key={activeError.id.toString()} error={activeError} />
     </ErrorOverlayLayout>
   )