Skip to content

Commit 18ee367

Browse files
authored
[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
1 parent c94fdef commit 18ee367

File tree

6 files changed

+90
-27
lines changed

6 files changed

+90
-27
lines changed

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
22
import type { DebugInfo } from '../../../../../types'
33
import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
4+
import type { ErrorMessageType } from '../error-message/error-message'
5+
46
import {
57
Dialog,
68
DialogHeader,
@@ -14,9 +16,14 @@ import { ToolButtonsGroup } from '../../ToolButtonsGroup/ToolButtonsGroup'
1416
import { VersionStalenessInfo } from '../../VersionStalenessInfo'
1517
import { ErrorOverlayBottomStacks } from '../error-overlay-bottom-stacks/error-overlay-bottom-stacks'
1618
import { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'
19+
import {
20+
ErrorMessage,
21+
styles as errorMessageStyles,
22+
} from '../error-message/error-message'
23+
import { noop as css } from '../../../helpers/noop-template'
1724

1825
type ErrorOverlayLayoutProps = {
19-
errorMessage: string | React.ReactNode
26+
errorMessage: ErrorMessageType
2027
errorType:
2128
| 'Build Error'
2229
| 'Runtime Error'
@@ -83,12 +90,7 @@ export function ErrorOverlayLayout({
8390
<ToolButtonsGroup error={error} debugInfo={debugInfo} />
8491
</div>
8592
<VersionStalenessInfo versionInfo={versionInfo} />
86-
<p
87-
id="nextjs__container_errors_desc"
88-
className="nextjs__container_errors_desc"
89-
>
90-
{errorMessage}
91-
</p>
93+
<ErrorMessage errorMessage={errorMessage} />
9294
</DialogHeader>
9395
<DialogBody className="nextjs-container-errors-body">
9496
{children}
@@ -109,3 +111,7 @@ export function ErrorOverlayLayout({
109111
</Overlay>
110112
)
111113
}
114+
115+
export const styles = css`
116+
${errorMessageStyles}
117+
`
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
import { ErrorMessage } from './error-message'
3+
import { withShadowPortal } from '../../../storybook/with-shadow-portal'
4+
5+
const meta: Meta<typeof ErrorMessage> = {
6+
title: 'ErrorMessage',
7+
component: ErrorMessage,
8+
parameters: {
9+
layout: 'fullscreen',
10+
},
11+
decorators: [withShadowPortal],
12+
}
13+
14+
export default meta
15+
type Story = StoryObj<typeof ErrorMessage>
16+
17+
export const ShortString: Story = {
18+
args: {
19+
errorMessage: 'A simple error message',
20+
},
21+
}
22+
23+
export const LongString: Story = {
24+
args: {
25+
errorMessage: `
26+
Lorem ipsum dolor sit amet consectetur.
27+
Aliquet nulla ut fames eu posuere leo.
28+
Sed dolor lacus sit risus diam aliquam augue.
29+
Amet dictum donec scelerisque morbi aliquam volutpat.
30+
Sit nec sit faucibus elit id ultrices est.
31+
Nunc elementum fames at mattis nisi.
32+
Quisque lectus nec ultrices morbi aliquam vestibulum.
33+
Tempor quis volutpat urna proin.
34+
`,
35+
},
36+
}
37+
38+
export const ReactNode: Story = {
39+
args: {
40+
errorMessage: (
41+
<span>
42+
An error message with <strong>formatted</strong> content
43+
</span>
44+
),
45+
},
46+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { noop as css } from '../../../helpers/noop-template'
2+
3+
export type ErrorMessageType = React.ReactNode
4+
5+
type ErrorMessageProps = {
6+
errorMessage: ErrorMessageType
7+
}
8+
9+
export function ErrorMessage({ errorMessage }: ErrorMessageProps) {
10+
return (
11+
<p
12+
id="nextjs__container_errors_desc"
13+
className="nextjs__container_errors_desc"
14+
>
15+
{errorMessage}
16+
</p>
17+
)
18+
}
19+
20+
export const styles = css`
21+
.nextjs__container_errors_desc {
22+
color: var(--color-red-900);
23+
font-weight: 500;
24+
font-size: var(--size-font);
25+
letter-spacing: -0.32px;
26+
line-height: var(--size-6);
27+
white-space: pre-wrap;
28+
}
29+
`

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,6 @@ export const styles = css`
3131
font-weight: bold;
3232
margin: var(--size-gap-double) 0;
3333
}
34-
.nextjs-container-errors-header p {
35-
font-size: var(--size-font-small);
36-
line-height: var(--size-font-big);
37-
white-space: pre-wrap;
38-
}
3934
.nextjs-container-errors-body footer {
4035
margin-top: var(--size-gap);
4136
}

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -329,21 +329,6 @@ export const styles = css`
329329
.nextjs-container-errors-header small > span {
330330
font-family: var(--font-stack-monospace);
331331
}
332-
.nextjs-container-errors-header p {
333-
font-size: var(--size-font-small);
334-
line-height: var(--size-font-big);
335-
white-space: pre-wrap;
336-
}
337-
.nextjs__container_errors_desc {
338-
font-family: var(--font-stack-monospace);
339-
padding: var(--size-gap) var(--size-gap-double);
340-
border-left: 2px solid var(--color-text-color-red-1);
341-
margin-top: var(--size-gap);
342-
margin-bottom: 0;
343-
font-weight: bold;
344-
color: var(--color-text-color-red-1);
345-
background-color: var(--color-text-background-red-1);
346-
}
347332
p.nextjs__container_errors__link {
348333
color: var(--color-text-color-red-1);
349334
font-weight: 600;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { styles as codeFrame } from '../components/CodeFrame/styles'
22
import { styles as dialog } from '../components/Dialog'
3+
import { styles as errorLayout } from '../components/Errors/ErrorOverlayLayout/ErrorOverlayLayout'
34
import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
45
import { styles as pagination } from '../components/Errors/ErrorPagination/styles'
56
import { styles as overlay } from '../components/Overlay/styles'
@@ -19,6 +20,7 @@ export function ComponentStyles() {
1920
${overlay}
2021
${toast}
2122
${dialog}
23+
${errorLayout}
2224
${footer}
2325
${bottomStacks}
2426
${pagination}

0 commit comments

Comments
 (0)