From 7d8768e8a4de42fa2251b46d3be680f33d6c4916 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 8 Sep 2021 17:03:19 +0800 Subject: [PATCH] remove condition of onPerfEntry --- packages/next/client/index.tsx | 75 +++++++++---------- packages/next/client/performance-relayer.ts | 1 + packages/next/vitals/{index.tsx => index.ts} | 0 .../next/vitals/{vitals.tsx => vitals.ts} | 5 +- .../relay-analytics/test/hook-impl-app.js | 2 - .../relay-analytics/test/index.test.js | 1 - 6 files changed, 39 insertions(+), 45 deletions(-) rename packages/next/vitals/{index.tsx => index.ts} (100%) rename packages/next/vitals/{vitals.tsx => vitals.ts} (80%) diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx index fdd821a9708979..694acd0cf30df4 100644 --- a/packages/next/client/index.tsx +++ b/packages/next/client/index.tsx @@ -280,39 +280,37 @@ export async function initNext(opts: { webpackHMR?: any } = {}) { const { component: app, exports: mod } = appEntrypoint CachedApp = app as AppComponent const exportedReportWebVitals = mod && mod.reportWebVitals - if (exportedReportWebVitals) { - onPerfEntry = ({ - id, - name, - startTime, - value, - duration, - entryType, - entries, - }): void => { - // Combines timestamp with random number for unique ID - const uniqueID: string = `${Date.now()}-${ - Math.floor(Math.random() * (9e12 - 1)) + 1e12 - }` - let perfStartEntry: string | undefined - - if (entries && entries.length) { - perfStartEntry = entries[0].startTime - } + onPerfEntry = ({ + id, + name, + startTime, + value, + duration, + entryType, + entries, + }: any): void => { + // Combines timestamp with random number for unique ID + const uniqueID: string = `${Date.now()}-${ + Math.floor(Math.random() * (9e12 - 1)) + 1e12 + }` + let perfStartEntry: string | undefined + + if (entries && entries.length) { + perfStartEntry = entries[0].startTime + } - const webVitals: NextWebVitalsMetric = { - id: id || uniqueID, - name, - startTime: startTime || perfStartEntry, - value: value == null ? duration : value, - label: - entryType === 'mark' || entryType === 'measure' - ? 'custom' - : 'web-vital', - } - exportedReportWebVitals?.(webVitals) - webVitalsCallbacks.forEach((callback) => callback(webVitals)) + const webVitals: NextWebVitalsMetric = { + id: id || uniqueID, + name, + startTime: startTime || perfStartEntry, + value: value == null ? duration : value, + label: + entryType === 'mark' || entryType === 'measure' + ? 'custom' + : 'web-vital', } + exportedReportWebVitals?.(webVitals) + webVitalsCallbacks.forEach((callback) => callback(webVitals)) } const pageEntrypoint = @@ -555,9 +553,7 @@ function markHydrateComplete(): void { ) performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate') - if (onPerfEntry) { - performance.getEntriesByName('Next.js-hydration').forEach(onPerfEntry) - } + performance.getEntriesByName('Next.js-hydration').forEach(onPerfEntry) clearMarks() } @@ -578,12 +574,11 @@ function markRenderComplete(): void { 'beforeRender' ) performance.measure('Next.js-render', 'beforeRender', 'afterRender') - if (onPerfEntry) { - performance.getEntriesByName('Next.js-render').forEach(onPerfEntry) - performance - .getEntriesByName('Next.js-route-change-to-render') - .forEach(onPerfEntry) - } + performance.getEntriesByName('Next.js-render').forEach(onPerfEntry) + performance + .getEntriesByName('Next.js-route-change-to-render') + .forEach(onPerfEntry) + clearMarks() ;['Next.js-route-change-to-render', 'Next.js-render'].forEach((measure) => performance.clearMeasures(measure) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 2dbaf634b4aa14..3f386dbc12d3bd 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -1,3 +1,4 @@ +/* global location */ import { getCLS, getFCP, diff --git a/packages/next/vitals/index.tsx b/packages/next/vitals/index.ts similarity index 100% rename from packages/next/vitals/index.tsx rename to packages/next/vitals/index.ts diff --git a/packages/next/vitals/vitals.tsx b/packages/next/vitals/vitals.ts similarity index 80% rename from packages/next/vitals/vitals.tsx rename to packages/next/vitals/vitals.ts index 857e285a2b3e4b..79cbca55eb8d2e 100644 --- a/packages/next/vitals/vitals.tsx +++ b/packages/next/vitals/vitals.ts @@ -3,16 +3,17 @@ import { NextWebVitalsMetric } from '../pages/_app' type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any export const webVitalsCallbacks = new Set() +const isClient = typeof window !== 'undefined' export function useWebVitalsReport(callback: ReportWebVitalsCallback) { // call on initial render, in a very early phase useState(() => { - webVitalsCallbacks.add(callback) + if (isClient) webVitalsCallbacks.add(callback) }) useEffect(() => { return () => { webVitalsCallbacks.delete(callback) } - }) + }, [callback]) } diff --git a/test/integration/relay-analytics/test/hook-impl-app.js b/test/integration/relay-analytics/test/hook-impl-app.js index bc45abcbb42615..38dd43ae668fad 100644 --- a/test/integration/relay-analytics/test/hook-impl-app.js +++ b/test/integration/relay-analytics/test/hook-impl-app.js @@ -10,5 +10,3 @@ export default function MyApp({ Component, pageProps }) { }) return } - -export function reportWebVitals() {} diff --git a/test/integration/relay-analytics/test/index.test.js b/test/integration/relay-analytics/test/index.test.js index c2130602653d8d..5ce8b1078dc7b2 100644 --- a/test/integration/relay-analytics/test/index.test.js +++ b/test/integration/relay-analytics/test/index.test.js @@ -10,7 +10,6 @@ import { nextBuild, nextStart, check, - waitFor, } from 'next-test-utils' const appDir = join(__dirname, '../')