BuildError use ErrorOverlay

vercel · Dec 18, 2024 · f45ea40 · f45ea40
1 parent baf7a54
commit f45ea40
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 54 deletions.
diff --git a/...ponents/react-dev-overlay/_experimental/internal/components/ErrorOverlay/ErrorOverlay.tsx b/...ponents/react-dev-overlay/_experimental/internal/components/ErrorOverlay/ErrorOverlay.tsx
@@ -3,23 +3,34 @@ import { Dialog, DialogHeader, DialogBody, DialogContent } from '../Dialog'
 import { Overlay } from '../Overlay'
 import { VersionStalenessInfo } from '../VersionStalenessInfo'
 
+type ErrorOverlayProps = {
+  errorType:
+    | 'Build Error'
+    | 'Runtime Error'
+    | 'Console Error'
+    | 'Unhandled Runtime Error'
+    | 'Missing Required HTML Tag'
+  errorMessage: string
+  onClose: () => void
+  children: React.ReactNode
+  versionInfo?: VersionInfo
+}
+
 export function ErrorOverlay({
   errorType,
   errorMessage,
-  versionInfo,
+  onClose,
   children,
-}: {
-  errorType: string
-  errorMessage: string
-  children: React.ReactNode
-  versionInfo?: VersionInfo
-}) {
+  versionInfo,
+}: ErrorOverlayProps) {
+  const isBuildError = errorType === 'Build Error'
   return (
-    <Overlay>
+    <Overlay fixed={isBuildError}>
       <Dialog
         type="error"
         aria-labelledby="nextjs__container_errors_label"
         aria-describedby="nextjs__container_errors_desc"
+        onClose={onClose}
       >
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">

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
@@ -1,61 +1,33 @@
 import * as React from 'react'
 import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogHeader,
-} from '../components/Dialog'
-import { Overlay } from '../components/Overlay'
 import { Terminal } from '../components/Terminal'
-import { VersionStalenessInfo } from '../components/VersionStalenessInfo'
 import { noop as css } from '../helpers/noop-template'
+import { ErrorOverlay } from '../components/ErrorOverlay/ErrorOverlay'
 
 export type BuildErrorProps = { message: string; versionInfo?: VersionInfo }
 
 export const BuildError: React.FC<BuildErrorProps> = function BuildError({
   message,
   versionInfo,
 }) {
-  const noop = React.useCallback(() => {}, [])
+  const onClose = React.useCallback(() => {}, [])
   return (
-    <Overlay fixed>
-      <Dialog
-        type="error"
-        aria-labelledby="nextjs__container_error_label"
-        aria-describedby="nextjs__container_error_desc"
-        onClose={noop}
-      >
-        <DialogContent>
-          <DialogHeader className="nextjs-container-errors-header">
-            <h1
-              id="nextjs__container_errors_label"
-              className="nextjs__container_errors_label"
-            >
-              {'Build Error'}
-            </h1>
-            <VersionStalenessInfo versionInfo={versionInfo} />
-            <p
-              id="nextjs__container_errors_desc"
-              className="nextjs__container_errors_desc"
-            >
-              Failed to compile
-            </p>
-          </DialogHeader>
-          <DialogBody className="nextjs-container-errors-body">
-            <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>
-          </DialogBody>
-        </DialogContent>
-      </Dialog>
-    </Overlay>
+    <ErrorOverlay
+      errorType="Build Error"
+      errorMessage="Failed to compile"
+      onClose={onClose}
+      versionInfo={versionInfo}
+    >
+      <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>
+    </ErrorOverlay>
   )
 }