Update onINP to also observe first-input entries #232

philipwalton · 2022-05-30T00:30:14Z

Fixes #228 by having the observer created in onINP() also observe first-input entries (in addition to event)—given that they are both instances of PerformanceEventTiming.

This PR also includes logic to remove duplicate interactions by checking to see if a first-input and event entry both have the same startTime and duration values. This logic is needed until crbug/1325826 is fixed in Chrome, which adds support for the interactionId property on first-input entries.

/cc @mmocny

mmocny

I don't think this is perfect either, but I think its a good change and cleaner than the one I suggested.

Cheers!

mmocny · 2022-05-30T14:29:28Z

src/onINP.ts

+      // Note that this logic assumes that `event` entries are dispatched
+      // before `first-input` entries. This is true in Chrome but it is not
+      // true in Firefox; however, Firefox doesn't support interactionId, so
+      // it's not an issue at the moment.


I was surprised to learn this, since I think we fire FID first.

However, I guess you mean that the order of Entries in the PO callbacks, when there are multiple observe() calls of different types... This I haven't tested and I'm not sure if order is guaranteed or arbitrary right now.

Yeah, I only tested this in Chrome on Mac (desktop), but no matter what I did, which order I called observe() in, or which event I used, I always got the event entry processed before the first-input entry.

mmocny · 2022-05-30T14:32:44Z

src/onINP.ts

+          });
+        });
+        if (noMatchingEntry) {
+          processEntry(entry);


What happens if:

FID is pointerdown, but we do not get a pointerdown event timing entry

Then we do get an pointerup event timing entry (for the same interaction)

I think it will be treated as 2 different interactions here, also affecting p98.

Yeah, I think so. My hope is we can remove this logic entirely once first-input entries have an interactionId property. My goal here was to minimize these types of occurrences .

mmocny · 2022-05-30T14:33:44Z

src/onINP.ts

@@ -143,6 +163,10 @@ export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => {
  report = bindReporter(onReport, metric, opts.reportAllChanges);

  if (po) {
+    // Also observe entries of type `first-input`. This is useful in cases
+    // where the first interaction is less than the `durationThreshold`.
+    po.observe({type: 'first-input', buffered: true});


Yeah this seems better :)

mmocny · 2022-05-30T14:34:20Z

test/views/inp.njk

@@ -89,7 +89,7 @@
      inp.entries = inp.entries.map((e) => ({
        ...e.toJSON(),
        interactionId: e.interactionId,
-        target: e.target.nodeName.toLowerCase(),
+        target: e.target?.nodeName.toLowerCase(),


Is this related to FID entry?

Yeah, not sure why but I started noticing lots of cases where target was undefined on first-input entries. I didn't look much further into repo-ing why.

##### [`v4.2.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v423-2024-08-06) - Fix missing LoAF entries in INP attribution ([#512](GoogleChrome/web-vitals#512)) ##### [`v4.2.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v422-2024-07-17) - Fix interaction count after bfcache restore ([#505](GoogleChrome/web-vitals#505)) ##### [`v4.2.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v421-2024-06-30) - Fix compatibility issues with TypeScript v5.5 ([#497](GoogleChrome/web-vitals#497)) ##### [`v4.2.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v420-2024-06-20) - Refactor INP attribution code to fix errors on Windows 10 ([#495](GoogleChrome/web-vitals#495)) ##### [`v4.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v411-2024-06-10) - Fix pending LoAF cleanup logic ([#493](GoogleChrome/web-vitals#493)) ##### [`v4.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v410-2024-06-06) - Move the support check to the top of the onINP() function ([#490](GoogleChrome/web-vitals#490)) - Fix missing LoAF attribution when entries are dispatched before event entries ([#487](GoogleChrome/web-vitals#487)) ##### [`v4.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v401-2024-05-21) - Add the `ReportCallback` type back but deprecate it ([#483](GoogleChrome/web-vitals#483)) ##### [`v4.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v400-2024-05-13) - **\[BREAKING]** Update types to support more generic usage ([#471](GoogleChrome/web-vitals#471)) - **\[BREAKING]** Split `waitingDuration` to make it easier to understand redirect delays ([#458](GoogleChrome/web-vitals#458)) - **\[BREAKING]** Rename `TTFBAttribution` fields from `*Time` to `*Duration` ([#453](GoogleChrome/web-vitals#453)) - **\[BREAKING]** Rename `resourceLoadTime` to `resourceLoadDuration` in LCP attribution ([#450](GoogleChrome/web-vitals#450)) - **\[BREAKING]** Add INP breakdown timings and LoAF attribution ([#442](GoogleChrome/web-vitals#442)) - **\[BREAKING]** Deprecate `onFID()` and remove previously deprecated APIs ([#435](GoogleChrome/web-vitals#435)) - Expose the target element in INP attribution ([#479](GoogleChrome/web-vitals#479)) - Save INP target after interactions to reduce null values when removed from the DOM ([#477](GoogleChrome/web-vitals#477)) - Cap TTFB in attribution ([#440](GoogleChrome/web-vitals#440)) - Fix `reportAllChanges` behavior for LCP when library is loaded late ([#468](GoogleChrome/web-vitals#468)) ##### [`v3.5.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v352-2024-01-25) - Pick the first non-null `target` for INP attribution ([#421](GoogleChrome/web-vitals#421)) ##### [`v3.5.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v351-2023-12-27) - Add extra guard for `PerformanceEventTiming` not existing ([#403](GoogleChrome/web-vitals#403)) ##### [`v3.5.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v350-2023-09-28) - Run `onLCP` callback in separate task ([#386](GoogleChrome/web-vitals#386)) - Fix INP durationThreshold bug when set to 0 ([#372](GoogleChrome/web-vitals#372)) - Prevent FID entries being emitted as INP for non-supporting browsers ([#368](GoogleChrome/web-vitals#368)) ##### [`v3.4.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v340-2023-07-11) - Make `bindReporter` generic over metric type ([#359](GoogleChrome/web-vitals#359)) - Update INP status in README ([#362](GoogleChrome/web-vitals#362)) - Fix Metric types for better TypeScript support ([#356](GoogleChrome/web-vitals#356)) - Fix selector for SVGs for attribution build ([#354](GoogleChrome/web-vitals#354)) ##### [`v3.3.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v332-2023-05-29) - Fix attribution types ([#348](GoogleChrome/web-vitals#348)) - Safe access navigation entry type ([#290](GoogleChrome/web-vitals#290)) ##### [`v3.3.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v331-2023-04-04) - Export metric rating thresholds in attribution build as well. ##### [`v3.3.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v330-2023-03-09) - Export metric rating thresholds, add explicit `MetricRatingThresholds` type ([#323](GoogleChrome/web-vitals#323)) - Trim classname selector ([#328](GoogleChrome/web-vitals#328)) - Add link to CrUX versus RUM blog post ([#327](GoogleChrome/web-vitals#327)) - Prevent LCP being reported for hidden prerendered pages ([#326](GoogleChrome/web-vitals#326)) - Add Server Timing information to docs ([#324](GoogleChrome/web-vitals#324)) - Fix link in `onINP()` thresholds comment ([#318](GoogleChrome/web-vitals#318)) - Update web.dev link for `onINP()` ([#307](GoogleChrome/web-vitals#307)) - Add a note about when to load the library ([#305](GoogleChrome/web-vitals#305)) ##### [`v3.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v311-2023-01-10) - Defer CLS logic until after `onFCP()` callback ([#297](GoogleChrome/web-vitals#297)) ##### [`v3.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v310-2022-11-15) - Add support for `'restore'` as a `navigationType` ([#284](GoogleChrome/web-vitals#284)) - Report initial CLS value when `reportAllChanges` is true ([#283](GoogleChrome/web-vitals#283)) - Defer all observers until after activation ([#282](GoogleChrome/web-vitals#282)) - Ignore TTFB for loads where responseStart is zero ([#281](GoogleChrome/web-vitals#281)) - Defer execution of observer callbacks ([#278](GoogleChrome/web-vitals#278)) ##### [`v3.0.4](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v304-2022-10-18) - Clamp LCP and FCP to 0 for prerendered pages ([#270](GoogleChrome/web-vitals#270)) ##### [`v3.0.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v303-2022-10-04) - Ensure `attribution` object is always present in attribution build ([#265](GoogleChrome/web-vitals#265)) ##### [`v3.0.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v302-2022-09-14) - Set an explicit unpkg dist file ([#261](GoogleChrome/web-vitals#261)) ##### [`v3.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v301-2022-08-31) - Use the cjs extension for all UMD builds ([#257](GoogleChrome/web-vitals#257)) ##### [`v3.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v300-2022-08-24) - **\[BREAKING]** Add a config object param to all metric functions ([#225](GoogleChrome/web-vitals#225)) - **\[BREAKING]** Report TTFB after a bfcache restore ([#220](GoogleChrome/web-vitals#220)) - **\[BREAKING]** Only include last LCP entry in metric entries ([#218](GoogleChrome/web-vitals#218)) - Update the metric ID prefix for v3 ([#251](GoogleChrome/web-vitals#251)) - Move the Navigation Timing API polyfill to the base+polyfill build ([#248](GoogleChrome/web-vitals#248)) - Add a metric rating property ([#246](GoogleChrome/web-vitals#246)) - Add deprecation notices for base+polyfill builds ([#242](GoogleChrome/web-vitals#242)) - Add a new attribution build for debugging issues in the field ([#237](GoogleChrome/web-vitals#237), [#244](GoogleChrome/web-vitals#244)) - Add support for prerendered pages ([#233](GoogleChrome/web-vitals#233)) - Rename the `ReportHandler` type to `ReportCallback`, with alias for back-compat ([#225](GoogleChrome/web-vitals#225), [#227](GoogleChrome/web-vitals#227)) - Add support for the new INP metric ([#221](GoogleChrome/web-vitals#221), [#232](GoogleChrome/web-vitals#232)) - Rename `getXXX()` functions to `onXXX()` ([#222](GoogleChrome/web-vitals#222)) - Add a `navigationType` property to the Metric object ([#219](GoogleChrome/web-vitals#219))

Update onINP to also observe first-input entries

b1994b5

philipwalton mentioned this pull request May 30, 2022

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

Closed

mmocny approved these changes May 30, 2022

View reviewed changes

philipwalton merged commit 83f5842 into next May 30, 2022

philipwalton deleted the first-input branch July 20, 2022 23:56

philipwalton mentioned this pull request Oct 6, 2022

INP still says “waiting for user input” even after I clicked / typed GoogleChrome/web-vitals-extension#108

Closed

timfish mentioned this pull request Oct 18, 2022

feat(tracing): Update to Web Vitals v3 getsentry/sentry-javascript#5987

Merged

lisr mentioned this pull request May 24, 2023

bump web-vitals to 3.3.1 instana/weasel#124

Closed

sethulakshmi-pm mentioned this pull request Oct 10, 2023

web vital upgrade to 3.5.0 instana/weasel#129

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update onINP to also observe first-input entries #232

Update onINP to also observe first-input entries #232

philipwalton commented May 30, 2022

mmocny left a comment

mmocny May 30, 2022

philipwalton May 30, 2022

mmocny May 30, 2022

philipwalton May 30, 2022

mmocny May 30, 2022

mmocny May 30, 2022

philipwalton May 30, 2022

Update onINP to also observe first-input entries #232

Update onINP to also observe first-input entries #232

Conversation

philipwalton commented May 30, 2022

mmocny left a comment

Choose a reason for hiding this comment

mmocny May 30, 2022

Choose a reason for hiding this comment

philipwalton May 30, 2022

Choose a reason for hiding this comment

mmocny May 30, 2022

Choose a reason for hiding this comment

philipwalton May 30, 2022

Choose a reason for hiding this comment

mmocny May 30, 2022

Choose a reason for hiding this comment

mmocny May 30, 2022

Choose a reason for hiding this comment

philipwalton May 30, 2022

Choose a reason for hiding this comment