use relayer

vercel · Nov 21, 2019 · a9fdd5f · a9fdd5f
1 parent d1a54bd
commit a9fdd5f
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -1,4 +1,4 @@
-/* global location */
+/* global location, hydrationMetrics */
 import React from 'react'
 import ReactDOM from 'react-dom'
 import HeadManager from './head-manager'
@@ -368,7 +368,7 @@ function clearMeasures() {
   ].forEach(measure => performance.clearMeasures(measure))
 }
 
-function measureFid () {
+function measureFid() {
   hydrationMetrics.onInputDelay((delay, event) => {
     const hydrationMeasures = performance.getEntriesByName(
       'Next.js-hydration',
@@ -379,22 +379,26 @@ function measureFid () {
       const { startTime, duration } = hydrationMeasures[0]
       const hydrateEnd = startTime + duration
 
-      // TODO: Instead of console.logs, expose values to user code through perf relayer (next.js/pull/8480)
-      console.log(
-        'First input after hydration',
-        `start: ${event.timeStamp}`,
-        `delay: ${delay}`
-      )
-      console.log(
-        'Delta between hydration end and first input',
-        `diff: ${event.timeStamp - hydrateEnd}`
-      )
+      if (onPerfEntry) {
+        onPerfEntry({
+          name: 'first-input-delay-after-hydration',
+          startTime: event.timeStamp,
+          value: delay,
+        })
+        onPerfEntry({
+          name: 'time-to-first-input-after-hydration',
+          startTime: hydrateEnd,
+          value: event.timeStamp - hydrateEnd,
+        })
+      }
     } else {
-      console.log(
-        'First input before hydration',
-        `start: ${event.timeStamp}`,
-        `delay: ${delay}`
-      )
+      if (onPerfEntry) {
+        onPerfEntry({
+          name: 'first-input-delay-before-hydration',
+          startTime: event.timeStamp,
+          value: delay,
+        })
+      }
     }
   })