@adobe/helix-rum-enhancer 2.31.0-beta.2 → 2.31.0-beta.3

package/src/plugins/cwv.js

@@ -0,0 +1,411 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+(function () {
+  'use strict';
+
+  (function (e) {
+
+    var n,
+      t,
+      r,
+      i,
+      o,
+      a = -1,
+      c = function (e) {
+        addEventListener("pageshow", function (n) {
+          n.persisted && (a = n.timeStamp, e(n));
+        }, true);
+      },
+      u = function () {
+        var e = self.performance && performance.getEntriesByType && performance.getEntriesByType("navigation")[0];
+        if (e && e.responseStart > 0 && e.responseStart < performance.now()) return e;
+      },
+      s = function () {
+        var e = u();
+        return e && e.activationStart || 0;
+      },
+      f = function (e, n) {
+        var t = u(),
+          r = "navigate";
+        a >= 0 ? r = "back-forward-cache" : t && (document.prerendering || s() > 0 ? r = "prerender" : document.wasDiscarded ? r = "restore" : t.type && (r = t.type.replace(/_/g, "-")));
+        return {
+          name: e,
+          value: undefined === n ? -1 : n,
+          rating: "good",
+          delta: 0,
+          entries: [],
+          id: "v4-".concat(Date.now(), "-").concat(Math.floor(8999999999999 * Math.random()) + 1e12),
+          navigationType: r
+        };
+      },
+      d = function (e, n, t) {
+        try {
+          if (PerformanceObserver.supportedEntryTypes.includes(e)) {
+            var r = new PerformanceObserver(function (e) {
+              Promise.resolve().then(function () {
+                n(e.getEntries());
+              });
+            });
+            return r.observe(Object.assign({
+              type: e,
+              buffered: !0
+            }, t || {})), r;
+          }
+        } catch (e) {}
+      },
+      l = function (e, n, t, r) {
+        var i, o;
+        return function (a) {
+          n.value >= 0 && (a || r) && ((o = n.value - (i || 0)) || undefined === i) && (i = n.value, n.delta = o, n.rating = function (e, n) {
+            return e > n[1] ? "poor" : e > n[0] ? "needs-improvement" : "good";
+          }(n.value, t), e(n));
+        };
+      },
+      p = function (e) {
+        requestAnimationFrame(function () {
+          return requestAnimationFrame(function () {
+            return e();
+          });
+        });
+      },
+      v = function (e) {
+        document.addEventListener("visibilitychange", function () {
+          "hidden" === document.visibilityState && e();
+        });
+      },
+      m = function (e) {
+        var n = false;
+        return function () {
+          n || (e(), n = true);
+        };
+      },
+      h = -1,
+      g = function () {
+        return "hidden" !== document.visibilityState || document.prerendering ? 1 / 0 : 0;
+      },
+      T = function (e) {
+        "hidden" === document.visibilityState && h > -1 && (h = "visibilitychange" === e.type ? e.timeStamp : 0, E());
+      },
+      y = function () {
+        addEventListener("visibilitychange", T, true), addEventListener("prerenderingchange", T, true);
+      },
+      E = function () {
+        removeEventListener("visibilitychange", T, true), removeEventListener("prerenderingchange", T, true);
+      },
+      C = function () {
+        return h < 0 && (h = g(), y(), c(function () {
+          setTimeout(function () {
+            h = g(), y();
+          }, 0);
+        })), {
+          get firstHiddenTime() {
+            return h;
+          }
+        };
+      },
+      L = function (e) {
+        document.prerendering ? addEventListener("prerenderingchange", function () {
+          return e();
+        }, true) : e();
+      },
+      S = [1800, 3e3],
+      b = function (e, n) {
+        n = n || {}, L(function () {
+          var t,
+            r = C(),
+            i = f("FCP"),
+            o = d("paint", function (e) {
+              e.forEach(function (e) {
+                "first-contentful-paint" === e.name && (o.disconnect(), e.startTime < r.firstHiddenTime && (i.value = Math.max(e.startTime - s(), 0), i.entries.push(e), t(!0)));
+              });
+            });
+          o && (t = l(e, i, S, n.reportAllChanges), c(function (r) {
+            i = f("FCP"), t = l(e, i, S, n.reportAllChanges), p(function () {
+              i.value = performance.now() - r.timeStamp, t(true);
+            });
+          }));
+        });
+      },
+      w = [.1, .25],
+      I = 0,
+      P = 1 / 0,
+      A = 0,
+      F = function (e) {
+        e.forEach(function (e) {
+          e.interactionId && (P = Math.min(P, e.interactionId), A = Math.max(A, e.interactionId), I = A ? (A - P) / 7 + 1 : 0);
+        });
+      },
+      M = function () {
+        return n ? I : performance.interactionCount || 0;
+      },
+      k = function () {
+        "interactionCount" in performance || n || (n = d("event", F, {
+          type: "event",
+          buffered: true,
+          durationThreshold: 0
+        }));
+      },
+      D = [],
+      B = new Map(),
+      R = 0,
+      x = function () {
+        var e = Math.min(D.length - 1, Math.floor((M() - R) / 50));
+        return D[e];
+      },
+      H = [],
+      N = function (e) {
+        if (H.forEach(function (n) {
+          return n(e);
+        }), e.interactionId || "first-input" === e.entryType) {
+          var n = D[D.length - 1],
+            t = B.get(e.interactionId);
+          if (t || D.length < 10 || e.duration > n.latency) {
+            if (t) e.duration > t.latency ? (t.entries = [e], t.latency = e.duration) : e.duration === t.latency && e.startTime === t.entries[0].startTime && t.entries.push(e);else {
+              var r = {
+                id: e.interactionId,
+                latency: e.duration,
+                entries: [e]
+              };
+              B.set(r.id, r), D.push(r);
+            }
+            D.sort(function (e, n) {
+              return n.latency - e.latency;
+            }), D.length > 10 && D.splice(10).forEach(function (e) {
+              return B.delete(e.id);
+            });
+          }
+        }
+      },
+      q = function (e) {
+        var n = self.requestIdleCallback || self.setTimeout,
+          t = -1;
+        return e = m(e), "hidden" === document.visibilityState ? e() : (t = n(e), v(e)), t;
+      },
+      O = [200, 500],
+      j = [2500, 4e3],
+      V = {},
+      _ = [800, 1800],
+      z = function e(n) {
+        document.prerendering ? L(function () {
+          return e(n);
+        }) : "complete" !== document.readyState ? addEventListener("load", function () {
+          return e(n);
+        }, true) : setTimeout(n, 0);
+      },
+      G = {
+        passive: true,
+        capture: true
+      },
+      J = new Date(),
+      K = function (e, n) {
+        t || (t = n, r = e, i = new Date(), W(removeEventListener), Q());
+      },
+      Q = function () {
+        if (r >= 0 && r < i - J) {
+          var e = {
+            entryType: "first-input",
+            name: t.type,
+            target: t.target,
+            cancelable: t.cancelable,
+            startTime: t.timeStamp,
+            processingStart: t.timeStamp + r
+          };
+          o.forEach(function (n) {
+            n(e);
+          }), o = [];
+        }
+      },
+      U = function (e) {
+        if (e.cancelable) {
+          var n = (e.timeStamp > 1e12 ? new Date() : performance.now()) - e.timeStamp;
+          "pointerdown" == e.type ? function (e, n) {
+            var t = function () {
+                K(e, n), i();
+              },
+              r = function () {
+                i();
+              },
+              i = function () {
+                removeEventListener("pointerup", t, G), removeEventListener("pointercancel", r, G);
+              };
+            addEventListener("pointerup", t, G), addEventListener("pointercancel", r, G);
+          }(n, e) : K(n, e);
+        }
+      },
+      W = function (e) {
+        ["mousedown", "keydown", "touchstart", "pointerdown"].forEach(function (n) {
+          return e(n, U, G);
+        });
+      },
+      X = [100, 300];
+    return e.CLSThresholds = w, e.FCPThresholds = S, e.FIDThresholds = X, e.INPThresholds = O, e.LCPThresholds = j, e.TTFBThresholds = _, e.onCLS = function (e, n) {
+      n = n || {}, b(m(function () {
+        var t,
+          r = f("CLS", 0),
+          i = 0,
+          o = [],
+          a = function (e) {
+            e.forEach(function (e) {
+              if (!e.hadRecentInput) {
+                var n = o[0],
+                  t = o[o.length - 1];
+                i && e.startTime - t.startTime < 1e3 && e.startTime - n.startTime < 5e3 ? (i += e.value, o.push(e)) : (i = e.value, o = [e]);
+              }
+            }), i > r.value && (r.value = i, r.entries = o, t());
+          },
+          u = d("layout-shift", a);
+        u && (t = l(e, r, w, n.reportAllChanges), v(function () {
+          a(u.takeRecords()), t(true);
+        }), c(function () {
+          i = 0, r = f("CLS", 0), t = l(e, r, w, n.reportAllChanges), p(function () {
+            return t();
+          });
+        }), setTimeout(t, 0));
+      }));
+    }, e.onFCP = b, e.onFID = function (e, n) {
+      n = n || {}, L(function () {
+        var i,
+          a = C(),
+          u = f("FID"),
+          s = function (e) {
+            e.startTime < a.firstHiddenTime && (u.value = e.processingStart - e.startTime, u.entries.push(e), i(true));
+          },
+          p = function (e) {
+            e.forEach(s);
+          },
+          h = d("first-input", p);
+        i = l(e, u, X, n.reportAllChanges), h && (v(m(function () {
+          p(h.takeRecords()), h.disconnect();
+        })), c(function () {
+          var a;
+          u = f("FID"), i = l(e, u, X, n.reportAllChanges), o = [], r = -1, t = null, W(addEventListener), a = s, o.push(a), Q();
+        }));
+      });
+    }, e.onINP = function (e, n) {
+      "PerformanceEventTiming" in self && "interactionId" in PerformanceEventTiming.prototype && (n = n || {}, L(function () {
+        var t;
+        k();
+        var r,
+          i = f("INP"),
+          o = function (e) {
+            q(function () {
+              e.forEach(N);
+              var n = x();
+              n && n.latency !== i.value && (i.value = n.latency, i.entries = n.entries, r());
+            });
+          },
+          a = d("event", o, {
+            durationThreshold: null !== (t = n.durationThreshold) && undefined !== t ? t : 40
+          });
+        r = l(e, i, O, n.reportAllChanges), a && (a.observe({
+          type: "first-input",
+          buffered: true
+        }), v(function () {
+          o(a.takeRecords()), r(true);
+        }), c(function () {
+          R = M(), D.length = 0, B.clear(), i = f("INP"), r = l(e, i, O, n.reportAllChanges);
+        }));
+      }));
+    }, e.onLCP = function (e, n) {
+      n = n || {}, L(function () {
+        var t,
+          r = C(),
+          i = f("LCP"),
+          o = function (e) {
+            n.reportAllChanges || (e = e.slice(-1)), e.forEach(function (e) {
+              e.startTime < r.firstHiddenTime && (i.value = Math.max(e.startTime - s(), 0), i.entries = [e], t());
+            });
+          },
+          a = d("largest-contentful-paint", o);
+        if (a) {
+          t = l(e, i, j, n.reportAllChanges);
+          var u = m(function () {
+            V[i.id] || (o(a.takeRecords()), a.disconnect(), V[i.id] = true, t(true));
+          });
+          ["keydown", "click"].forEach(function (e) {
+            addEventListener(e, function () {
+              return q(u);
+            }, {
+              once: true,
+              capture: true
+            });
+          }), v(u), c(function (r) {
+            i = f("LCP"), t = l(e, i, j, n.reportAllChanges), p(function () {
+              i.value = performance.now() - r.timeStamp, V[i.id] = true, t(true);
+            });
+          });
+        }
+      });
+    }, e.onTTFB = function (e, n) {
+      n = n || {};
+      var t = f("TTFB"),
+        r = l(e, t, _, n.reportAllChanges);
+      z(function () {
+        var i = u();
+        i && (t.value = Math.max(i.responseStart - s(), 0), t.entries = [i], r(true), c(function () {
+          t = f("TTFB", 0), (r = l(e, t, _, n.reportAllChanges))(true);
+        }));
+      });
+    }, e;
+  })({});
+
+  function addCWVTracking({
+    sampleRUM,
+    sourceSelector,
+    targetSelector,
+    fflags
+  }) {
+    setTimeout(() => {
+      try {
+        const cwvScript = new URL('.rum/web-vitals/dist/web-vitals.iife.js', sampleRUM.baseURL).href;
+        if (document.querySelector(`script[src="${cwvScript}"]`)) {
+          return;
+        }
+        const script = document.createElement('script');
+        script.src = cwvScript;
+        script.onload = () => {
+          const storeCWV = measurement => {
+            const data = {
+              cwv: {}
+            };
+            data.cwv[measurement.name] = measurement.value;
+            if (measurement.name === 'LCP' && measurement.entries.length > 0) {
+              const {
+                element
+              } = measurement.entries.pop();
+              data.target = targetSelector(element);
+              data.source = sourceSelector(element) || element && element.outerHTML.slice(0, 30);
+            }
+            sampleRUM('cwv', data);
+          };
+          const isEager = metric => ['CLS', 'LCP'].includes(metric);
+          ['INP', 'TTFB', 'CLS', 'LCP'].forEach(metric => {
+            const metricFn = window.webVitals[`on${metric}`];
+            if (typeof metricFn === 'function') {
+              let opts = {};
+              fflags.enabled('eagercwv', () => {
+                opts = {
+                  reportAllChanges: isEager(metric)
+                };
+              });
+              metricFn(storeCWV, opts);
+            }
+          });
+        };
+        document.head.appendChild(script);
+      } catch (error) {}
+    }, 2000);
+  }
+
+  return addCWVTracking;
+
+})();