add method to measure Interaction to Next Paint (INP)

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

@@ -270,7 +270,7 @@
     "uuid": "8.3.2",
     "vm-browserify": "1.1.2",
     "watchpack": "2.4.0",
-    "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'

test/integration/relay-analytics/pages/index.js

@@ -16,12 +16,21 @@ if (typeof navigator !== 'undefined') {
   }
 }
 
+function toggleText(e) {
+  const startTime = performance.now()
+  while (performance.now() < startTime + 100) {
+    // busy waiting
+  }
+  e.target.textContent = e.target.textContent === 'Click' ? 'Press' : 'Click'
+}
+
 export default () => {
   // Below comment will be used for replacing exported report method with hook based one.
   return (
     <div>
       <h1>Foo!</h1>
       <h2>bar!</h2>
+      <button onClick={toggleText}>Click</button>
     </div>
   )
 }

test/integration/relay-analytics/test/index.test.js

@@ -108,4 +108,18 @@ function runTest() {
     expect(stdout).toMatch('Next.js Analytics')
     await browser.close()
   })
+
+  it('reports INP metric', async () => {
+    const browser = await webdriver(appPort, '/')
+    await browser.elementByCss('button').click()
+    await browser.waitForCondition(
+      'document.querySelector("button").textContent === "Press"'
+    )
+    // INP metric is only reported on pagehide or visibilitychange event, so refresh the page
+    await browser.refresh()
+    const INP = parseInt(await browser.eval('localStorage.getItem("INP")'), 10)
+    // We introduced a delay of 100ms, so INP duration should be >= 100
+    expect(INP).toBeGreaterThanOrEqual(100)
+    await browser.close()
+  })
 }