add method to measure Interaction to Next Paint (INP)

`web-vitals` CHANGELOG for v3:

- [BREAKING] Report TTFB after a bfcache restore
- [BREAKING] Only include last LCP entry in metric entries
- Add support for the new INP metric
- Rename getXXX() functions to onXXX()
- Add a navigationType property to the Metric object

See https://github.com/GoogleChrome/web-vitals/blob/next/CHANGELOG.md

.github/workflows/build_test_deploy.yml

@@ -266,7 +266,7 @@ jobs:
           name: next-swc-test-binary
           path: packages/next-swc/native
 
-      - run: npm i -g playwright-chromium@1.14.1 && npx playwright install-deps
+      - run: npm i -g playwright-chromium@1.17.2 && npx playwright install-deps
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: node run-tests.js --type development

package.json

@@ -156,7 +156,7 @@
     "npm-run-all": "4.1.5",
     "nprogress": "0.2.0",
     "pixrem": "5.0.0",
-    "playwright-chromium": "1.14.1",
+    "playwright-chromium": "1.17.2",
     "plop": "3.0.5",
     "postcss-nested": "4.2.1",
     "postcss-pseudoelements": "5.0.0",

packages/next/client/performance-relayer.ts

@@ -1,17 +1,18 @@
 /* global location */
 import {
-  getCLS,
-  getFCP,
-  getFID,
-  getLCP,
-  getTTFB,
+  onCLS,
+  onFCP,
+  onFID,
+  onINP,
+  onLCP,
+  onTTFB,
   Metric,
-  ReportHandler,
+  ReportCallback,
 } from 'next/dist/compiled/web-vitals'
 
 const initialHref = location.href
 let isRegistered = false
-let userReportHandler: ReportHandler | undefined
+let userReportHandler: ReportCallback | undefined
 
 function onReport(metric: Metric): void {
   if (userReportHandler) {
@@ -71,7 +72,7 @@ function onReport(metric: Metric): void {
   }
 }
 
-export default (onPerfEntry?: ReportHandler): void => {
+export default (onPerfEntry?: ReportCallback): void => {
   // Update function if it changes:
   userReportHandler = onPerfEntry
 
@@ -81,9 +82,10 @@ export default (onPerfEntry?: ReportHandler): void => {
   }
   isRegistered = true
 
-  getCLS(onReport)
-  getFID(onReport)
-  getFCP(onReport)
-  getLCP(onReport)
-  getTTFB(onReport)
+  onCLS(onReport)
+  onFID(onReport)
+  onFCP(onReport)
+  onLCP(onReport)
+  onTTFB(onReport)
+  onINP(onReport)
 }

packages/next/package.json

@@ -269,7 +269,7 @@
     "uuid": "8.3.2",
     "vm-browserify": "1.1.2",
     "watchpack": "2.3.1",
-    "web-vitals": "2.1.0",
+    "web-vitals": "3.0.0-beta.2",
     "webpack-sources1": "npm:webpack-sources@1.4.3",
     "webpack-sources3": "npm:webpack-sources@3.2.3",
     "webpack4": "npm:webpack@4.44.1",

packages/next/shared/lib/utils.ts

@@ -47,7 +47,7 @@ export type NextWebVitalsMetric = {
 } & (
   | {
       label: 'web-vital'
-      name: 'FCP' | 'LCP' | 'CLS' | 'FID' | 'TTFB'
+      name: 'FCP' | 'LCP' | 'CLS' | 'FID' | 'TTFB' | 'INP'
     }
   | {
       label: 'custom'