Adding new types of performance monitoring

packages/next/client/index.js

@@ -172,8 +172,14 @@ export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
   const { page: app, mod } = await pageLoader.loadPageScript('/_app')
   App = app
   if (mod && mod.unstable_onPerformanceData) {
-    onPerfEntry = function({ name, startTime, value, duration }) {
-      mod.unstable_onPerformanceData({ name, startTime, value, duration })
+    onPerfEntry = function({ name, startTime, value, duration, entryType }) {
+      mod.unstable_onPerformanceData({
+        name,
+        startTime,
+        value,
+        duration,
+        entryType,
+      })
     }
   }
 
@@ -323,14 +329,70 @@ function renderReactElement(reactEl, domEl) {
 
   if (onPerfEntry && ST) {
     try {
-      const observer = new PerformanceObserver(list => {
-        list.getEntries().forEach(onPerfEntry)
-      })
-      // Start observing paint entry types.
-      observer.observe({
-        type: 'paint',
-        buffered: true,
-      })
+      function getSupportedTypes(types) {
+        if (PerformanceObserver && PerformanceObserver.supportedEntryTypes) {
+          return types.filter(type =>
+            PerformanceObserver.supportedEntryTypes.includes(type)
+          )
+        } else {
+          return []
+        }
+      }
+
+      function observeSupportedTypes(entryTypes) {
+        const supportedTypes = getSupportedTypes(entryTypes)
+
+        /**
+         * Layout shift has special handling as this will be sent
+         * cumulative layout shift.
+         */
+        if (supportedTypes.includes('layout-shift')) {
+          // Stores the current layout shift score for the page.
+          let cumulativeLayoutShiftScore = 0
+          const observer = new PerformanceObserver(list => {
+            for (const entry of list.getEntries()) {
+              // Only count layout shifts without recent user input.
+              if (!entry.hadRecentInput) {
+                cumulativeLayoutShiftScore += entry.value
+              }
+            }
+          })
+          observer.observe({
+            type: 'layout-shift',
+            buffered: true,
+          })
+          document.addEventListener('visibilitychange', () => {
+            if (document.visibilityState === 'hidden') {
+              // Force any pending records to be dispatched.
+              observer.takeRecords()
+              observer.disconnect()
+              onPerfEntry({
+                name: 'cumulative-layout-shift',
+                value: cumulativeLayoutShiftScore,
+              })
+            }
+          })
+        }
+
+        // For all other entry types, we send values to relayer as given by PerformanceObserver
+        supportedTypes.forEach(type => {
+          if (type === 'layout-shift') {
+            return
+          }
+          const observer = new PerformanceObserver(list => {
+            list.getEntries().forEach(onPerfEntry)
+          })
+          observer.observe({
+            type,
+            buffered: true,
+          })
+        })
+      }
+      observeSupportedTypes([
+        'paint',
+        'largest-contentful-paint',
+        'layout-shift',
+      ])
     } catch (e) {
       window.addEventListener('load', () => {
         performance.getEntriesByType('paint').forEach(onPerfEntry)

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

@@ -8,5 +8,8 @@ export default class MyApp extends App {}
   Method is experimental and will eventually be handled in a Next.js plugin
 */
 export function unstable_onPerformanceData(data) {
-  localStorage.setItem(data.name, data.value || data.startTime)
+  localStorage.setItem(
+    data.name || data.entryType,
+    data.value !== undefined ? data.value : data.startTime
+  )
 }

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

@@ -1,3 +1,8 @@
 export default () => {
-  return <h1>Hello!</h1>
+  return (
+    <div>
+      <h1>Foo!</h1>
+      <h2>bar!</h2>
+    </div>
+  )
 }

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

@@ -30,13 +30,28 @@ describe('Analytics relayer', () => {
     const firstContentfulPaint = parseFloat(
       await browser.eval('localStorage.getItem("first-contentful-paint")')
     )
-    expect(h1Text).toMatch(/Hello!/)
+    const largestContentfulPaint = parseFloat(
+      await browser.eval('localStorage.getItem("largest-contentful-paint")')
+    )
+    let cls = await browser.eval(
+      'localStorage.getItem("cumulative-layout-shift")'
+    )
+    expect(h1Text).toMatch(/Foo!/)
     expect(data).not.toBeNaN()
     expect(data).toBeGreaterThan(0)
     expect(firstPaint).not.toBeNaN()
     expect(firstPaint).toBeGreaterThan(0)
     expect(firstContentfulPaint).not.toBeNaN()
     expect(firstContentfulPaint).toBeGreaterThan(0)
+    expect(largestContentfulPaint).not.toBeNaN()
+    expect(largestContentfulPaint).toBeGreaterThan(0)
+    expect(cls).toBeNull()
+    // Create an artificial layout shift
+    await browser.eval('document.querySelector("h1").style.display = "none"')
+    cls = parseFloat(
+      await browser.eval('localStorage.getItem("cumulative-layout-shift")')
+    )
+    expect(cls).not.toBeNull()
     await browser.close()
   })
 })