[DevOverlay] Add error message (vercel#74541)

This PR separated the error message component.

### Light

![CleanShot 2025-01-06 at 18 20 31](https://github.com/user-attachments/assets/3379bf69-743c-4431-8e03-e051be7f30e2)

### Dark

![CleanShot 2025-01-06 at 18 21 47](https://github.com/user-attachments/assets/d70309c5-df35-4f32-82a6-e9776976c632)

Closes NDX-608

Author: devjiwonchoi

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

@@ -1,6 +1,8 @@
 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 {
   Dialog,
   DialogHeader,
@@ -14,9 +16,14 @@ 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 {
+  ErrorMessage,
+  styles as errorMessageStyles,
+} from '../error-message/error-message'
+import { noop as css } from '../../../helpers/noop-template'
 
 type ErrorOverlayLayoutProps = {
-  errorMessage: string | React.ReactNode
+  errorMessage: ErrorMessageType
   errorType:
     | 'Build Error'
     | 'Runtime Error'
@@ -83,12 +90,7 @@ export function ErrorOverlayLayout({
               <ToolButtonsGroup error={error} debugInfo={debugInfo} />
             </div>
             <VersionStalenessInfo versionInfo={versionInfo} />
-            <p
-              id="nextjs__container_errors_desc"
-              className="nextjs__container_errors_desc"
-            >
-              {errorMessage}
-            </p>
+            <ErrorMessage errorMessage={errorMessage} />
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
             {children}
@@ -109,3 +111,7 @@ export function ErrorOverlayLayout({
     </Overlay>
   )
 }
+
+export const styles = css`
+  ${errorMessageStyles}
+`

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorMessage } from './error-message'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorMessage> = {
+  title: 'ErrorMessage',
+  component: ErrorMessage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorMessage>
+
+export const ShortString: Story = {
+  args: {
+    errorMessage: 'A simple error message',
+  },
+}
+
+export const LongString: Story = {
+  args: {
+    errorMessage: `
+    Lorem ipsum dolor sit amet consectetur.
+    Aliquet nulla ut fames eu posuere leo.
+    Sed dolor lacus sit risus diam aliquam augue.
+    Amet dictum donec scelerisque morbi aliquam volutpat.
+    Sit nec sit faucibus elit id ultrices est.
+    Nunc elementum fames at mattis nisi.
+    Quisque lectus nec ultrices morbi aliquam vestibulum.
+    Tempor quis volutpat urna proin.
+    `,
+  },
+}
+
+export const ReactNode: Story = {
+  args: {
+    errorMessage: (
+      <span>
+        An error message with <strong>formatted</strong> content
+      </span>
+    ),
+  },
+}

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

@@ -0,0 +1,29 @@
+import { noop as css } from '../../../helpers/noop-template'
+
+export type ErrorMessageType = React.ReactNode
+
+type ErrorMessageProps = {
+  errorMessage: ErrorMessageType
+}
+
+export function ErrorMessage({ errorMessage }: ErrorMessageProps) {
+  return (
+    <p
+      id="nextjs__container_errors_desc"
+      className="nextjs__container_errors_desc"
+    >
+      {errorMessage}
+    </p>
+  )
+}
+
+export const styles = css`
+  .nextjs__container_errors_desc {
+    color: var(--color-red-900);
+    font-weight: 500;
+    font-size: var(--size-font);
+    letter-spacing: -0.32px;
+    line-height: var(--size-6);
+    white-space: pre-wrap;
+  }
+`

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

@@ -31,11 +31,6 @@ export const styles = css`
     font-weight: bold;
     margin: var(--size-gap-double) 0;
   }
-  .nextjs-container-errors-header p {
-    font-size: var(--size-font-small);
-    line-height: var(--size-font-big);
-    white-space: pre-wrap;
-  }
   .nextjs-container-errors-body footer {
     margin-top: var(--size-gap);
   }

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

@@ -329,21 +329,6 @@ export const styles = css`
   .nextjs-container-errors-header small > span {
     font-family: var(--font-stack-monospace);
   }
-  .nextjs-container-errors-header p {
-    font-size: var(--size-font-small);
-    line-height: var(--size-font-big);
-    white-space: pre-wrap;
-  }
-  .nextjs__container_errors_desc {
-    font-family: var(--font-stack-monospace);
-    padding: var(--size-gap) var(--size-gap-double);
-    border-left: 2px solid var(--color-text-color-red-1);
-    margin-top: var(--size-gap);
-    margin-bottom: 0;
-    font-weight: bold;
-    color: var(--color-text-color-red-1);
-    background-color: var(--color-text-background-red-1);
-  }
   p.nextjs__container_errors__link {
     color: var(--color-text-color-red-1);
     font-weight: 600;

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx

@@ -1,5 +1,6 @@
 import { styles as codeFrame } from '../components/CodeFrame/styles'
 import { styles as dialog } from '../components/Dialog'
+import { styles as errorLayout } from '../components/Errors/ErrorOverlayLayout/ErrorOverlayLayout'
 import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { styles as pagination } from '../components/Errors/ErrorPagination/styles'
 import { styles as overlay } from '../components/Overlay/styles'
@@ -19,6 +20,7 @@ export function ComponentStyles() {
         ${overlay}
         ${toast}
         ${dialog}
+        ${errorLayout}
         ${footer}
         ${bottomStacks}
         ${pagination}