Fix 228: Change onINP to also use FID duration when under durationTheshold

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) {

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,

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);
 

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);

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) {

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

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);