Skip to content

docs: explain complementary Web Vitals and custom metrics APIs - #98968

Merged
icyJoseph merged 3 commits into
vercel:canaryfrom
adityareddy-dev:docs/use-report-web-vitals-custom-metrics
Nov 11, 2026
Merged

icyJoseph merged 3 commits into
vercel:canaryfrom
adityareddy-dev:docs/use-report-web-vitals-custom-metrics

Conversation

@adityareddy-dev

@adityareddy-dev adityareddy-dev commented Sep 20, 2026 •

Copy link
Copy Markdown
Contributor

What

useReportWebVitals gets the Web Vitals and the reportWebVitals export from pages/_app gets the Next.js custom metrics, so the docs now show both in one pages/_app example. Also updated both page descriptions and fixed a missing closing parenthesis in the Google Analytics sample.

Why

The page read like one replaces the other, but each one only gets its own set of metrics.

Refs #63657

Checklist

  • Prettier 3.6.2 check passed on both changed MDX files.
  • Read the Docs Contribution Guide.

@icyJoseph

Copy link
Copy Markdown
Member

Reviewing this. Could you please remove the Closes claim though? I don't think it is sufficient. We need to make a statement on that issue too.

@adityareddy-dev

adityareddy-dev commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor Author

Done, it's Refs #63657 now and I left a note on the issue.

…hook

Show the custom metrics accessed via the reportWebVitals export from
pages/_app rather than the useReportWebVitals hook. Also remove "custom
performance metrics" from the Pages router reference description and fix
a broken bracket syntax error (} instead of })) in the Google Analytics
sample on the same page.
Custom metrics only reach the reportWebVitals export from pages/_app,
and Web Vitals only reach the useReportWebVitals hook, so show both
entry points used together instead of replacing one with the other.
Update both page descriptions to highlight the difference.
@adityareddy-dev
adityareddy-dev force-pushed the docs/use-report-web-vitals-custom-metrics branch from 9b5baed to 0fcc18b Compare September 25, 2026 05:09
@adityareddy-dev

Copy link
Copy Markdown
Contributor Author

@icyJoseph both review threads are resolved, and the example now shows the hook and export together. Could you take another look and approve the workflow run? It still shows action_required.

@icyJoseph

Copy link
Copy Markdown
Member

Awesome, sorry I had to take a pause the last couple of weeks. Just catching up with PRs and stuff.

@adityareddy-dev adityareddy-dev changed the title docs: document custom metrics through reportWebVitals instead of the hook docs: explain complementary Web Vitals and custom metrics APIs Oct 15, 2026
@adityareddy-dev

Copy link
Copy Markdown
Contributor Author

@icyJoseph could you check why the build-and-test run failed before creating any jobs?

@icyJoseph

Copy link
Copy Markdown
Member

The checks don't run for all PRs, it has to be allowed to run. I'll pick this up soon.

Core Web Vitals are LCP, CLS and INP. List FCP and TTFB as the extra
metrics the hook also reports.
@adityareddy-dev
adityareddy-dev force-pushed the docs/use-report-web-vitals-custom-metrics branch from 7a75f8d to 0fcc18b Compare November 10, 2026 23:32
@github-actions github-actions Bot added the Documentation Related to Next.js' official documentation. label Nov 10, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Tests Passed

Commit: 231b5e7
View workflow run

@icyJoseph
icyJoseph merged commit 9ec93b5 into vercel:canary Nov 11, 2026
56 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Documentation Related to Next.js' official documentation.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants