[DevOverlay] Add error type label (#74543)

This PR added the error type label.

### Light

![CleanShot 2025-01-06 at 19 08 56](https://github.com/user-attachments/assets/1e85d19e-b989-4e1a-914d-567abfb309d2)

### Dark

![CleanShot 2025-01-06 at 19 08 50](https://github.com/user-attachments/assets/c5d2e6a6-f43e-4134-b1b7-0dc13eb83cd4)

Closes NDX-607

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx

@@ -2,6 +2,7 @@ import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
 import type { DebugInfo } from '../../../../../types'
 import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
 import type { ErrorMessageType } from '../error-message/error-message'
+import type { ErrorType } from '../error-type-label/error-type-label'
 
 import {
   Dialog,
@@ -16,20 +17,19 @@ import { ToolButtonsGroup } from '../../ToolButtonsGroup/ToolButtonsGroup'
 import { VersionStalenessInfo } from '../../VersionStalenessInfo'
 import { ErrorOverlayBottomStacks } from '../error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'
+import { noop as css } from '../../../helpers/noop-template'
 import {
   ErrorMessage,
   styles as errorMessageStyles,
 } from '../error-message/error-message'
-import { noop as css } from '../../../helpers/noop-template'
+import {
+  ErrorTypeLabel,
+  styles as errorTypeLabelStyles,
+} from '../error-type-label/error-type-label'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
-  errorType:
-    | 'Build Error'
-    | 'Runtime Error'
-    | 'Console Error'
-    | 'Unhandled Runtime Error'
-    | 'Missing Required HTML Tag'
+  errorType: ErrorType
   children?: React.ReactNode
   errorCode?: string
   error?: Error
@@ -80,13 +80,7 @@ export function ErrorOverlayLayout({
               // allow assertion in tests before error rating is implemented
               data-nextjs-error-code={errorCode}
             >
-              <h1
-                id="nextjs__container_errors_label"
-                className="nextjs__container_errors_label"
-              >
-                {errorType}
-                {/* TODO: Need to relocate this so consider data flow. */}
-              </h1>
+              <ErrorTypeLabel errorType={errorType} />
               <ToolButtonsGroup error={error} debugInfo={debugInfo} />
             </div>
             <VersionStalenessInfo versionInfo={versionInfo} />
@@ -113,5 +107,6 @@ export function ErrorOverlayLayout({
 }
 
 export const styles = css`
+  ${errorTypeLabelStyles}
   ${errorMessageStyles}
 `

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-type-label/error-type-label.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorTypeLabel } from './error-type-label'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorTypeLabel> = {
+  title: 'ErrorTypeLabel',
+  component: ErrorTypeLabel,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorTypeLabel>
+
+export const BuildError: Story = {
+  args: {
+    errorType: 'Build Error',
+  },
+}
+
+export const RuntimeError: Story = {
+  args: {
+    errorType: 'Runtime Error',
+  },
+}
+
+export const ConsoleError: Story = {
+  args: {
+    errorType: 'Console Error',
+  },
+}
+
+export const UnhandledRuntimeError: Story = {
+  args: {
+    errorType: 'Unhandled Runtime Error',
+  },
+}
+
+export const MissingRequiredHTMLTag: Story = {
+  args: {
+    errorType: 'Missing Required HTML Tag',
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-type-label/error-type-label.tsx

@@ -0,0 +1,37 @@
+import { noop as css } from '../../../helpers/noop-template'
+
+export type ErrorType =
+  | 'Build Error'
+  | 'Runtime Error'
+  | 'Console Error'
+  | 'Unhandled Runtime Error'
+  | 'Missing Required HTML Tag'
+
+type ErrorTypeLabelProps = {
+  errorType: ErrorType
+}
+
+export function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps) {
+  return (
+    <h1
+      id="nextjs__container_errors_label"
+      className="nextjs__container_errors_label"
+    >
+      {errorType}
+    </h1>
+  )
+}
+
+export const styles = css`
+  .nextjs__container_errors_label {
+    padding: var(--size-1_5);
+    margin: var(--size-gap-double) 0;
+    border-radius: var(--rounded-lg);
+    background: var(--color-red-100);
+    font-weight: 600;
+    font-size: var(--size-3);
+    color: var(--color-red-900);
+    font-family: var(--font-stack-monospace);
+    line-height: var(--size-5);
+  }
+`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx

@@ -25,12 +25,6 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
 }
 
 export const styles = css`
-  h1.nextjs__container_errors_label {
-    font-size: var(--size-font-big);
-    line-height: var(--size-font-bigger);
-    font-weight: bold;
-    margin: var(--size-gap-double) 0;
-  }
   .nextjs-container-errors-body footer {
     margin-top: var(--size-gap);
   }