feat: connect error rating buttons to telemetry API #74496

gaojude · 2025-01-03T19:04:34Z

We're adding a new feature to the error overlay that allows developers to rate the current error message. Developers can rate the error message by clicking on the thumb up or down icon in the error overlay footer.

This pull request adds the click handler for the error rating buttons. When the buttons are clicked, the click handler calls a previously implemented internal API endpoint. The endpoint is connected to the usual Next.js Telemetry.

To test the UI, run pnpm storybook and go to http://localhost:6006/?path=/story/erroroverlaylayout--default.

CleanShot.2025-01-06.at.12.10.00.mp4

gaojude · 2025-01-03T19:04:55Z

feat: connect error rating buttons to telemetry API #74496 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2025-01-03T19:32:14Z

Failing test suites

Commit: ae14342

pnpm test-start test/production/graceful-shutdown/index.test.ts

Graceful Shutdown > production (standalone mode) > should not accept new requests during shutdown cleanup > when there is no activity

Expand output

● Graceful Shutdown › production (standalone mode) › should not accept new requests during shutdown cleanup › when there is no activity

expect(received).toEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
-   0,
    null,
+   "SIGTERM",
  ]

  233 |
  234 |         // App finally shuts down
> 235 |         expect(await appKilledPromise).toEqual([0, null])
      |                                        ^
  236 |         expect(app.exitCode).toBe(0)
  237 |       })
  238 |     })

  at Object.toEqual (production/graceful-shutdown/index.test.ts:235:40)

Read more about building and testing Next.js in contributing.md.

ijjk · 2025-01-03T19:34:09Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
buildDuration	18s	16.1s	N/A
buildDurationCached	15.2s	13.1s	N/A
nodeModulesSize	417 MB	417 MB	N/A
nextStartRea..uration (ms)	471ms	476ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
1187-HASH.js gzip	52.6 kB	52.6 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.44 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.57 kB	4.57 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
index.html gzip	523 B	523 B	✓
link.html gzip	538 B	535 B	N/A
withRouter.html gzip	519 B	519 B	✓
Overall change	1.04 kB	1.04 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
middleware-b..fest.js gzip	670 B	666 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	363 kB	363 kB	N/A
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page.run...dev.js gzip	352 kB	352 kB	N/A
app-page.run..prod.js gzip	125 kB	125 kB	✓
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.73 MB	1.73 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03--implemented_api_invocation_logic_for_feedback_thumb_up_down-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc	Change
0.pack gzip	2.08 MB	2.09 MB	⚠️ +2.48 kB
index.pack gzip	74.1 kB	74.3 kB	⚠️ +214 B
Overall change	2.16 MB	2.16 MB	⚠️ +2.69 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: 451f55e

packages/next/package.json

...rlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.test.tsx

ztanner · 2025-01-06T17:54:50Z

...perimental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx

+    async (wasHelpful: boolean) => {
+      try {
+        const response = await fetch(
+          `/__nextjs_error_feedback?errorCode=${errorCode}&wasHelpful=${wasHelpful}`


do we need any special handling for assetPrefix or basePath here?

good catch. just added, similar to how the other internal endpoints do this.. https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/react-dev-overlay/internal/helpers/use-open-in-editor.ts#L23

- added component test to ErrorOverlayLayout and fixed bug in "clip-rule" etc

eps1lon · 2025-01-06T19:29:58Z

...perimental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx

+            <button
+              aria-label="Mark as not helpful"
+              onClick={() => handleFeedback(false)}
+              disabled={hasVoted}


We should aria-disable this while we process feedback to avoid duplicate submissions. Not disabled because that causes focus loss.

Or do we handle duplicate submissions already on the backend?

will follow up

Addressing this comment in #74563
apology again it auto-merged
@eps1lon

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 3, 2025

gaojude changed the title ~~- implemented API invocation logic for feedback thumb up/down - added component test to ErrorOverlayLayout and fixed bug in "clip-rule" etc~~ Error Feedback: Integrate API endpoint Jan 3, 2025

gaojude changed the title ~~Error Feedback: Integrate API endpoint~~ Error Feedback: Integrate API endpoint to UI Jan 3, 2025

gaojude marked this pull request as ready for review January 3, 2025 19:06

gaojude changed the title ~~Error Feedback: Integrate API endpoint to UI~~ Add error feedback UI and telemetry to dev overlayfea Jan 3, 2025

gaojude changed the title ~~Add error feedback UI and telemetry to dev overlayfea~~ feat: link error rating buttons to internal feedback API Jan 3, 2025

gaojude requested a review from devjiwonchoi January 3, 2025 19:14

gaojude force-pushed the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch from 892838a to cd719d1 Compare January 3, 2025 19:14

devjiwonchoi approved these changes Jan 6, 2025

View reviewed changes

Netail reviewed Jan 6, 2025

View reviewed changes

packages/next/package.json Outdated Show resolved Hide resolved

huozhi reviewed Jan 6, 2025

View reviewed changes

...rlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.test.tsx Outdated Show resolved Hide resolved

gaojude force-pushed the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch 5 times, most recently from 5728c3e to 335a08a Compare January 6, 2025 16:27

huozhi approved these changes Jan 6, 2025

View reviewed changes

gaojude force-pushed the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch 3 times, most recently from 1db943e to 8b34472 Compare January 6, 2025 17:15

gaojude changed the title ~~feat: link error rating buttons to internal feedback API~~ feat: connect error rating buttons to telemetry API Jan 6, 2025

gaojude requested a review from Netail January 6, 2025 17:53

ztanner reviewed Jan 6, 2025

View reviewed changes

gaojude requested a review from ztanner January 6, 2025 18:05

ztanner approved these changes Jan 6, 2025

View reviewed changes

gaojude force-pushed the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch from ae14342 to 9dd4704 Compare January 6, 2025 18:54

gaojude enabled auto-merge (squash) January 6, 2025 18:55

gaojude added 4 commits January 6, 2025 14:19

- implemented API invocation logic for feedback thumb up/down

ee73629

- added component test to ErrorOverlayLayout and fixed bug in "clip-rule" etc

address feedback

2e4e77a

vertically center text

0551fde

prepend basepath if any

770184a

gaojude force-pushed the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch from 9dd4704 to 770184a Compare January 6, 2025 19:20

merge conflict

451f55e

eps1lon reviewed Jan 6, 2025

View reviewed changes

gaojude merged commit fca7358 into canary Jan 6, 2025
125 of 130 checks passed

gaojude deleted the 01-03--_implemented_api_invocation_logic_for_feedback_thumb_up_down_-_added_component_test_to_erroroverlaylayout_and_fixed_bug_in_clip-rule_etc branch January 6, 2025 19:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: connect error rating buttons to telemetry API #74496

feat: connect error rating buttons to telemetry API #74496

gaojude commented Jan 3, 2025 •

edited

Loading

gaojude commented Jan 3, 2025

ijjk commented Jan 3, 2025 •

edited

Loading

ijjk commented Jan 3, 2025 •

edited

Loading

ztanner Jan 6, 2025

gaojude Jan 6, 2025 •

edited

Loading

eps1lon Jan 6, 2025

gaojude Jan 6, 2025

gaojude Jan 6, 2025 •

edited

Loading

feat: connect error rating buttons to telemetry API #74496

feat: connect error rating buttons to telemetry API #74496

Conversation

gaojude commented Jan 3, 2025 • edited Loading

gaojude commented Jan 3, 2025

ijjk commented Jan 3, 2025 • edited Loading

Failing test suites

ijjk commented Jan 3, 2025 • edited Loading

Stats from current PR

ztanner Jan 6, 2025

Choose a reason for hiding this comment

gaojude Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

eps1lon Jan 6, 2025

Choose a reason for hiding this comment

gaojude Jan 6, 2025

Choose a reason for hiding this comment

gaojude Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

gaojude commented Jan 3, 2025 •

edited

Loading

ijjk commented Jan 3, 2025 •

edited

Loading

ijjk commented Jan 3, 2025 •

edited

Loading

gaojude Jan 6, 2025 •

edited

Loading

gaojude Jan 6, 2025 •

edited

Loading