feat: added softnav util and update metric APIs

Author: logaretm

packages/browser-utils/src/metrics/web-vitals/lib/initMetric.ts

@@ -19,24 +19,33 @@ import type { MetricType } from '../types';
 import { generateUniqueID } from './generateUniqueID';
 import { getActivationStart } from './getActivationStart';
 import { getNavigationEntry } from './getNavigationEntry';
+import { getSoftNavigationEntry } from './softNavs';
 
-export const initMetric = <MetricName extends MetricType['name']>(name: MetricName, value: number = -1) => {
-  const navEntry = getNavigationEntry();
+export const initMetric = <MetricName extends MetricType['name']>(
+  name: MetricName,
+  value: number = -1,
+  navigation?: MetricType['navigationType'],
+  navigationId?: string,
+) => {
+  const hardNavId = getNavigationEntry()?.navigationId || '1';
+  const hardNavEntry = getNavigationEntry();
   let navigationType: MetricType['navigationType'] = 'navigate';
 
-  if (navEntry) {
+  if (navigation) {
+    // If it was passed in, then use that
+    navigationType = navigation;
+  } else if (hardNavEntry) {
     if (WINDOW.document?.prerendering || getActivationStart() > 0) {
       navigationType = 'prerender';
     } else if (WINDOW.document?.wasDiscarded) {
       navigationType = 'restore';
-    } else if (navEntry.type) {
-      navigationType = navEntry.type.replace(/_/g, '-') as MetricType['navigationType'];
+    } else if (hardNavEntry.type) {
+      navigationType = hardNavEntry.type.replace(/_/g, '-') as MetricType['navigationType'];
     }
   }
 
   // Use `entries` type specific for the metric.
   const entries: Extract<MetricType, { name: MetricName }>['entries'] = [];
-
   return {
     name,
     value,
@@ -45,5 +54,7 @@ export const initMetric = <MetricName extends MetricType['name']>(name: MetricNa
     entries,
     id: generateUniqueID(),
     navigationType,
+    navigationId: navigationId || hardNavId,
+    navigationURL: getSoftNavigationEntry(navigationId)?.name || getNavigationEntry()?.name,
   };
 };

packages/browser-utils/src/metrics/web-vitals/lib/observe.ts

@@ -13,16 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { softNavs } from './softNavs';
 
 interface PerformanceEntryMap {
   event: PerformanceEventTiming[];
   'first-input': PerformanceEventTiming[];
+  'interaction-contentful-paint': InteractionContentfulPaint[];
   'layout-shift': LayoutShift[];
   'largest-contentful-paint': LargestContentfulPaint[];
   'long-animation-frame': PerformanceLongAnimationFrameTiming[];
   paint: PerformancePaintTiming[];
   navigation: PerformanceNavigationTiming[];
   resource: PerformanceResourceTiming[];
+  'soft-navigation': SoftNavigationEntry[];
   // Sentry-specific change:
   // We add longtask as a supported entry type as we use this in
   // our `instrumentPerformanceObserver` function also observes 'longtask'
@@ -46,6 +49,8 @@ export const observe = <K extends keyof PerformanceEntryMap>(
   callback: (entries: PerformanceEntryMap[K]) => void,
   opts: PerformanceObserverInit = {},
 ): PerformanceObserver | undefined => {
+  const includeSoftNavigationObservations = softNavs(opts);
+
   try {
     if (PerformanceObserver.supportedEntryTypes.includes(type)) {
       const po = new PerformanceObserver(list => {
@@ -57,7 +62,13 @@ export const observe = <K extends keyof PerformanceEntryMap>(
           callback(list.getEntries() as PerformanceEntryMap[K]);
         });
       });
-      po.observe({ type, buffered: true, ...opts });
+      po.observe({
+        type,
+        buffered: true,
+        includeSoftNavigationObservations,
+        ...opts,
+      } as PerformanceObserverInit);
+
       return po;
     }
   } catch {

packages/browser-utils/src/metrics/web-vitals/lib/polyfills/interactionCountPolyfill.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { getNavigationEntry } from '../getNavigationEntry';
 import { observe } from '../observe';
 
 declare global {
@@ -25,10 +25,23 @@ declare global {
 let interactionCountEstimate = 0;
 let minKnownInteractionId = Infinity;
 let maxKnownInteractionId = 0;
+let currentNavId = '';
+let softNavsEnabled = false;
 
 const updateEstimate = (entries: PerformanceEventTiming[]) => {
+  if (!currentNavId) {
+    currentNavId = getNavigationEntry()?.navigationId || '1';
+  }
+
   entries.forEach(e => {
     if (e.interactionId) {
+      if (softNavsEnabled && e.navigationId && e.navigationId !== currentNavId) {
+        currentNavId = e.navigationId;
+        interactionCountEstimate = 0;
+        minKnownInteractionId = Infinity;
+        maxKnownInteractionId = 0;
+      }
+
       minKnownInteractionId = Math.min(minKnownInteractionId, e.interactionId);
       maxKnownInteractionId = Math.max(maxKnownInteractionId, e.interactionId);
 
@@ -50,12 +63,15 @@ export const getInteractionCount = (): number => {
 /**
  * Feature detects native support or initializes the polyfill if needed.
  */
-export const initInteractionCountPolyfill = (): void => {
+export const initInteractionCountPolyfill = (softNavs?: boolean) => {
   if ('interactionCount' in performance || po) return;
 
+  softNavsEnabled = softNavs || false;
+
   po = observe('event', updateEstimate, {
     type: 'event',
     buffered: true,
     durationThreshold: 0,
+    includeSoftNavigationObservations: softNavsEnabled,
   } as PerformanceObserverInit);
 };

packages/browser-utils/src/metrics/web-vitals/lib/softNavs.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed 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
+ *
+ *     https://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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReportOpts } from '../types';
+
+export const softNavs = (opts?: ReportOpts) => {
+  return PerformanceObserver.supportedEntryTypes.includes('soft-navigation') && opts && opts.reportSoftNavs;
+};
+
+export const getSoftNavigationEntry = (navigationId?: string): SoftNavigationEntry | undefined => {
+  if (!navigationId) return;
+
+  const softNavEntry = globalThis.performance
+    .getEntriesByType('soft-navigation')
+    .filter(entry => entry.navigationId === navigationId);
+  if (softNavEntry) return softNavEntry[0];
+
+  return;
+};