Skip to content

Commit cf492c2

Browse files
authored
Polish error feedback row (vercel#74880)
### Updates 1. **Hide "Was it helpful" component for errors without codes** Errors without specific codes (e.g., from third-party libraries) will no longer display the "Was it helpful" component. 2. **Improved footer styling** Enhanced layout for long footer messages to improve readability and consistency. | **Before** | **After** | |----------------------------------------------------------------------------|----------------------------------------------------------------------------| | ![Before](https://github.com/user-attachments/assets/3f72ba33-8eee-4815-ac33-0f91c42b2747) | ![After](https://github.com/user-attachments/assets/e493c6b4-3d2e-46e0-815d-e694bbe6b333) |
1 parent 7999f96 commit cf492c2

File tree

4 files changed

+38
-9
lines changed

4 files changed

+38
-9
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
7171
export const styles = css`
7272
.error-feedback {
7373
display: flex;
74-
align-items: center;
7574
gap: var(--size-gap);
75+
white-space: nowrap;
7676
}
7777
7878
.error-feedback-thanks {

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { styles as feedbackStyles } from './error-feedback/error-feedback'
33
import { noop as css } from '../../../helpers/noop-template'
44

55
export type ErrorOverlayFooterProps = {
6-
errorCode: string
7-
footerMessage?: string
6+
errorCode: string | undefined
7+
footerMessage: string | undefined
88
}
99

1010
export function ErrorOverlayFooter({
@@ -13,17 +13,21 @@ export function ErrorOverlayFooter({
1313
}: ErrorOverlayFooterProps) {
1414
return (
1515
<footer className="error-overlay-footer">
16-
<p className="error-overlay-footer-message">{footerMessage}</p>
17-
<ErrorFeedback errorCode={errorCode} />
16+
{footerMessage ? (
17+
<p className="error-overlay-footer-message">{footerMessage}</p>
18+
) : null}
19+
{errorCode ? <ErrorFeedback errorCode={errorCode} /> : null}
1820
</footer>
1921
)
2022
}
2123

2224
export const styles = css`
2325
.error-overlay-footer {
2426
display: flex;
25-
align-items: center;
27+
flex-direction: row;
2628
justify-content: space-between;
29+
30+
gap: var(--size-gap);
2731
padding: var(--size-3);
2832
background: var(--color-background-200);
2933
border-top: 1px solid var(--color-gray-400);

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ export const Default: Story = {
2222
installed: '15.0.0',
2323
staleness: 'fresh',
2424
},
25-
children: "Module not found: Cannot find module './missing-module'",
25+
children: (
26+
<div style={{ margin: '1rem' }}>
27+
Module not found: Cannot find module './missing-module'
28+
</div>
29+
),
2630
},
2731
}
2832

@@ -32,3 +36,25 @@ export const Turbopack: Story = {
3236
isTurbopack: true,
3337
},
3438
}
39+
40+
export const NoErrorCode: Story = {
41+
args: {
42+
...Default.args,
43+
errorCode: undefined,
44+
},
45+
}
46+
47+
export const WithLongFooterMessage: Story = {
48+
args: {
49+
...Default.args,
50+
footerMessage:
51+
'This is a very long footer message that demonstrates how the footer handles lengthy text. It could contain important information about the error or additional context for debugging.',
52+
},
53+
}
54+
55+
export const WithShortFooterMessage: Story = {
56+
args: {
57+
...Default.args,
58+
footerMessage: 'A brief error description.',
59+
},
60+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,9 @@ export function ErrorOverlayLayout({
9595
<ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
9696

9797
<DialogFooter>
98-
{/* TODO: errorCode should not be undefined whatsoever */}
9998
<ErrorOverlayFooter
10099
footerMessage={footerMessage}
101-
errorCode={errorCode!}
100+
errorCode={errorCode}
102101
/>
103102
<ErrorOverlayBottomStacks
104103
errorsCount={readyErrors?.length ?? 0}

0 commit comments

Comments
 (0)