INP breakdown and LoAF integration with web-vitals v4 (#177)

* Update web-vitals-extension to work with web vitals v4

* Add back interaction type

* Simplify first-start

* More simplier

* Tidy up

* TTFB redirect breakdown

* Update interaction logging to be similar to v4 INP

* Script order, invoker, and latest web-vitals v4

* With LCP fixes

* Fix marks

* Handle when no metric has target

* Import thresholds from web-vitals.js

* Standardise units

* Fix TTFB sub part name

* Latest v4 web-vitals

* Review feedback

* Move LoAF observer

* Remove interaction breakdowns to simplify code

* Better filtering of sub parts

* Improve formatting and stop hardcoding thresholds

* Further clean ups

* More clean up

* More cleanup

* Interaction threshold

* Default green status for waiting

* Merge issue

* Update to latest v4 changes

* Review feedback

* cleanup

* Fix merge issues

* clickable script sources

* formatting

* Better target

* Latest build

* Latest web-vitals build

* Add element

* t commit -a latest web-vitals v4

* Upgrade web-vitals

* Minor version bump

package.json

@@ -1,6 +1,6 @@
 {
  "name": "web-vitals-extension",
- "version": "1.4.2",
+ "version": "1.5.0",
  "description": "Instant Web Vitals metrics",
  "main": "src/browser_action/vitals.js",
  "repository": "https://github.com/googlechrome/web-vitals-extension",
@@ -21,6 +21,6 @@
  "eslint-config-google": "^0.14.0"
  },
  "dependencies": {
- "web-vitals": "^3.5.2"
+ "web-vitals": "^4.0.0"
  }
 }

src/browser_action/on-each-interaction.js

@@ -13,17 +13,44 @@
 
 import {INPThresholds} from './web-vitals.js';
 
-
 /**
  * @param {Function} callback
  */
 export function onEachInteraction(callback) {
  const valueToRating = (score) => score <= INPThresholds[0] ? 'good' : score <= INPThresholds[1] ? 'needs-improvement' : 'poor';
 
- const observer = new PerformanceObserver((list) => {
+ const eventObserver = new PerformanceObserver((list) => {
+ const entries = list.getEntries();
  const interactions = {};
 
- for (const entry of list.getEntries().filter((entry) => entry.interactionId)) {
+ const getSelector = (node, maxLen) => {
+ let sel = '';
+
+ try {
+ while (node && node.nodeType !== 9) {
+ const el = node;
+ const part = el.id
+ ? '#' + el.id
+ : getName(el) +
+ (el.classList &&
+ el.classList.value &&
+ el.classList.value.trim() &&
+ el.classList.value.trim().length
+ ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
+ : '');
+ if (sel.length + part.length > (maxLen || 100) - 1) return sel || part;
+ sel = sel ? part + '>' + sel : part;
+ if (el.id) break;
+ node = el.parentNode;
+ }
+ } catch (err) {
+ // Do nothing...
+ }
+ return sel;
+ };
+
+ // Filter all events to those with interactionids
+ for (const entry of entries.filter((entry) => entry.interactionId)) {
  interactions[entry.interactionId] = interactions[entry.interactionId] || [];
  interactions[entry.interactionId].push(entry);
  }
@@ -33,12 +60,24 @@ export function onEachInteraction(callback) {
  for (const interaction of Object.values(interactions)) {
  const entry = interaction.reduce((prev, curr) => prev.duration >= curr.duration ? prev : curr);
  const value = entry.duration;
+ const interactionId = entry.interactionId;
+
+ // Filter down LoAFs to ones that intersected any event startTime and any processingEnd
+ const longAnimationFrameEntries = getIntersectingLoAFs(entry.startTime, entry.startTime + entry.value)
+
+ let firstEntryWithTarget = interaction[0].target;
+ firstEntryWithTarget = null;
+ if (!firstEntryWithTarget) {
+ firstEntryWithTarget = Object.values(interactions).flat().find(entry => entry.interactionId === interactionId && entry.target)?.target;
+ }
 
  callback({
  attribution: {
- eventEntry: entry,
- eventTime: entry.startTime,
- eventType: entry.name,
+ interactionTarget: getSelector(firstEntryWithTarget),
+ interactionTargetElement: firstEntryWithTarget,
+ interactionTime: entry.startTime,
+ interactionType: entry.name.startsWith('key') ? 'keyboard' : 'pointer',
+ longAnimationFrameEntries: longAnimationFrameEntries
  },
  entries: interaction,
  name: 'Interaction',
@@ -48,9 +87,39 @@ export function onEachInteraction(callback) {
  }
  });
 
- observer.observe({
+ eventObserver.observe({
  type: 'event',
  durationThreshold: 0,
  buffered: true,
  });
+
+ let recentLoAFs = [];
+
+ const getIntersectingLoAFs = (start, end) => {
+ const intersectingLoAFs = [];
+
+ for (let i = 0, loaf; (loaf = recentLoAFs[i]); i++) {
+ // If the LoAF ends before the given start time, ignore it.
+ if (loaf.startTime + loaf.duration < start) continue;
+
+ // If the LoAF starts after the given end time, ignore it and all
+ // subsequent pending LoAFs (because they're in time order).
+ if (loaf.startTime > end) break;
+
+ // Still here? If so this LoAF intersects with the interaction.
+ intersectingLoAFs.push(loaf);
+ }
+ return intersectingLoAFs;
+ };
+
+ const loafObserver = new PerformanceObserver((list) => {
+ // We report interactions immediately, so don't need to keep many LoAFs around.
+ // Let's keep the last 5.
+ recentLoAFs = recentLoAFs.concat(list.getEntries()).slice(-5);
+
+ });
+ loafObserver.observe({
+ type: 'long-animation-frame',
+ buffered: true,
+ });
 }