diff --git a/src/lib/observe.ts b/src/lib/observe.ts index ce160dc0..3e46fb09 100644 --- a/src/lib/observe.ts +++ b/src/lib/observe.ts @@ -30,19 +30,21 @@ interface PerformanceEntriesHandler { * try/catch to avoid errors in unsupporting browsers. */ export const observe = ( - type: string, + types: string[], callback: PerformanceEntriesHandler, opts?: PerformanceObserverInit, ): PerformanceObserver | undefined => { try { - if (PerformanceObserver.supportedEntryTypes.includes(type)) { + if (types.every(type => PerformanceObserver.supportedEntryTypes.includes(type))) { const po: PerformanceObserver = new PerformanceObserver((list) => { callback(list.getEntries()); }); - po.observe(Object.assign({ - type, - buffered: true, - }, opts || {}) as PerformanceObserverInit); + for (let type of types) { + po.observe(Object.assign({ + type, + buffered: true, + }, opts || {}) as PerformanceObserverInit); + } return po; } } catch (e) { diff --git a/src/lib/polyfills/interactionCountPolyfill.ts b/src/lib/polyfills/interactionCountPolyfill.ts index 24280db5..f14ad8d6 100644 --- a/src/lib/polyfills/interactionCountPolyfill.ts +++ b/src/lib/polyfills/interactionCountPolyfill.ts @@ -56,7 +56,7 @@ export const getInteractionCount = () => { export const initInteractionCountPolyfill = () => { if ('interactionCount' in performance || po) return; - po = observe('event', updateEstimate, { + po = observe(['event'], updateEstimate, { type: 'event', buffered: true, durationThreshold: 0, diff --git a/src/onCLS.ts b/src/onCLS.ts index a4a8e82d..558485f7 100644 --- a/src/onCLS.ts +++ b/src/onCLS.ts @@ -82,7 +82,7 @@ export const onCLS = (onReport: ReportCallback, opts?: ReportOpts) => { }); }; - const po = observe('layout-shift', handleEntries); + const po = observe(['layout-shift'], handleEntries); if (po) { report = bindReporter(onReportWrapped, metric, opts.reportAllChanges); diff --git a/src/onFCP.ts b/src/onFCP.ts index d55c5e27..c5d13657 100644 --- a/src/onFCP.ts +++ b/src/onFCP.ts @@ -56,7 +56,7 @@ export const onFCP = (onReport: ReportCallback, opts?: ReportOpts) => { const fcpEntry = window.performance && window.performance.getEntriesByName && window.performance.getEntriesByName('first-contentful-paint')[0]; - const po = fcpEntry ? null : observe('paint', handleEntries); + const po = fcpEntry ? null : observe(['paint'], handleEntries); if (fcpEntry || po) { report = bindReporter(onReport, metric, opts.reportAllChanges); diff --git a/src/onFID.ts b/src/onFID.ts index b6f42a67..af15683d 100644 --- a/src/onFID.ts +++ b/src/onFID.ts @@ -45,7 +45,7 @@ export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => { (entries as PerformanceEventTiming[]).forEach(handleEntry); } - const po = observe('first-input', handleEntries); + const po = observe(['first-input'], handleEntries); report = bindReporter(onReport, metric, opts.reportAllChanges); if (po) { diff --git a/src/onINP.ts b/src/onINP.ts index 93bc3dd6..3c8929fa 100644 --- a/src/onINP.ts +++ b/src/onINP.ts @@ -116,7 +116,7 @@ export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => { const handleEntries = (entries: Metric['entries']) => { (entries as PerformanceEventTiming[]).forEach((entry) => { - if (entry.interactionId) { + if (entry.entryType == 'first-input' || entry.interactionId) { processEntry(entry); } }); @@ -130,7 +130,7 @@ export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => { } }; - const po = observe('event', handleEntries, { + const po = observe(['first-input', 'event'], handleEntries, { // Event Timing entries have their durations rounded to the nearest 8ms, // so a duration of 40ms would be any event that spans 2.5 or more frames // at 60Hz. This threshold is chosen to strike a balance between usefulness diff --git a/src/onLCP.ts b/src/onLCP.ts index a7b3bd53..7a010874 100644 --- a/src/onLCP.ts +++ b/src/onLCP.ts @@ -50,7 +50,7 @@ export const onLCP = (onReport: ReportCallback, opts?: ReportOpts) => { } }; - const po = observe('largest-contentful-paint', handleEntries); + const po = observe(['largest-contentful-paint'], handleEntries); if (po) { report = bindReporter(onReport, metric, opts.reportAllChanges);