@kubesense/kubesense-browser-rum-core 1.0.0

package/src/domain/view/viewMetrics/interactionCountPolyfill.ts

@@ -0,0 +1,55 @@
+/**
+ * performance.interactionCount polyfill
+ *
+ * The interactionCount is an integer which counts the total number of distinct user interactions,
+ * for which there was a unique interactionId.
+ *
+ * The interactionCount polyfill is an estimate based on a convention specific to Chrome. Cf: https://github.com/GoogleChrome/web-vitals/pull/213
+ * This is currently not an issue as the polyfill is only used for INP which is currently only supported on Chrome.
+ * Hopefully when/if other browsers will support INP, they will also implement performance.interactionCount at the same time, so we won't need that polyfill.
+ *
+ * Reference implementation: https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/polyfills/interactionCountPolyfill.ts
+ */
+
+import { monitor } from '@kubesense/kubesense-browser-core'
+import type {
+  BrowserWindow,
+  RumPerformanceEventTiming,
+  RumPerformanceObserver,
+} from '../../../browser/performanceObservable'
+
+let observer: RumPerformanceObserver | undefined
+
+let interactionCountEstimate = 0
+let minKnownInteractionId = Infinity
+let maxKnownInteractionId = 0
+
+export function initInteractionCountPolyfill() {
+  if ('interactionCount' in performance || observer) {
+    return
+  }
+
+  observer = new (window as BrowserWindow).PerformanceObserver(
+    monitor((entries: PerformanceObserverEntryList) => {
+      entries.getEntries().forEach((e) => {
+        const entry = e as unknown as RumPerformanceEventTiming
+
+        if (entry.interactionId) {
+          minKnownInteractionId = Math.min(minKnownInteractionId, entry.interactionId)
+          maxKnownInteractionId = Math.max(maxKnownInteractionId, entry.interactionId)
+
+          interactionCountEstimate = (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
+        }
+      })
+    })
+  )
+
+  observer.observe({ type: 'event', buffered: true, durationThreshold: 0 })
+}
+
+/**
+ * Returns the `interactionCount` value using the native API (if available)
+ * or the polyfill estimate in this module.
+ */
+export const getInteractionCount = () =>
+  observer ? interactionCountEstimate : (window as BrowserWindow).performance.interactionCount! || 0

package/src/domain/view/viewMetrics/startInitialViewMetricsTelemetry.ts

@@ -0,0 +1,70 @@
+import type { Context, Telemetry } from '@kubesense/kubesense-browser-core'
+import { addTelemetryMetrics, noop, TelemetryMetrics } from '@kubesense/kubesense-browser-core'
+import type { LifeCycle } from '../../lifeCycle'
+import { LifeCycleEventType } from '../../lifeCycle'
+import type { LargestContentfulPaint } from './trackLargestContentfulPaint'
+import type { NavigationTimings } from './trackNavigationTimings'
+
+interface CoreInitialViewMetrics extends Context {
+  lcp: {
+    value: number
+  }
+  navigation: {
+    domComplete: number
+    domContentLoaded: number
+    domInteractive: number
+    firstByte: number | undefined
+    loadEvent: number
+  }
+}
+
+export function startInitialViewMetricsTelemetry(lifeCycle: LifeCycle, telemetry: Telemetry) {
+  if (!telemetry.metricsEnabled) {
+    return { stop: noop }
+  }
+
+  const { unsubscribe } = lifeCycle.subscribe(LifeCycleEventType.VIEW_UPDATED, ({ initialViewMetrics }) => {
+    if (!initialViewMetrics.largestContentfulPaint || !initialViewMetrics.navigationTimings) {
+      return
+    }
+
+    // The navigation timings become available shortly after the load event fires, so
+    // we're snapshotting the LCP value available at that point. However, more LCP values
+    // can be emitted until the page is scrolled or interacted with, so it's possible that
+    // the final LCP value may differ. These metrics are intended to help diagnose
+    // performance issues early in the page load process, and using LCP-at-page-load is a
+    // good fit for that use case, but it's important to be aware that this is not
+    // necessarily equivalent to the normal LCP metric.
+    // monitor-until: 2026-07-01
+    addTelemetryMetrics(TelemetryMetrics.INITIAL_VIEW_METRICS_TELEMETRY_NAME, {
+      metrics: createCoreInitialViewMetrics(
+        initialViewMetrics.largestContentfulPaint,
+        initialViewMetrics.navigationTimings
+      ),
+    })
+
+    unsubscribe()
+  })
+
+  return {
+    stop: unsubscribe,
+  }
+}
+
+function createCoreInitialViewMetrics(
+  lcp: LargestContentfulPaint,
+  navigation: NavigationTimings
+): CoreInitialViewMetrics {
+  return {
+    lcp: {
+      value: lcp.value,
+    },
+    navigation: {
+      domComplete: navigation.domComplete,
+      domContentLoaded: navigation.domContentLoaded,
+      domInteractive: navigation.domInteractive,
+      firstByte: navigation.firstByte,
+      loadEvent: navigation.loadEvent,
+    },
+  }
+}

package/src/domain/view/viewMetrics/trackBfcacheMetrics.ts

@@ -0,0 +1,20 @@
+import type { RelativeTime, ClocksState } from '@kubesense/kubesense-browser-core'
+import type { InitialViewMetrics } from './trackInitialViewMetrics'
+import { trackRestoredFirstContentfulPaint } from './trackFirstContentfulPaint'
+
+/**
+ * BFCache keeps a full in-memory snapshot of the DOM. When the page is restored, nothing needs to be fetched, so the whole
+ * viewport repaints in a single frame. Consequently, LCP almost always equals FCP.
+ * (See: https://github.com/GoogleChrome/web-vitals/pull/87)
+ */
+export function trackBfcacheMetrics(
+  viewStart: ClocksState,
+  metrics: InitialViewMetrics,
+  scheduleViewUpdate: () => void
+) {
+  trackRestoredFirstContentfulPaint(viewStart.relative, (paintTime) => {
+    metrics.firstContentfulPaint = paintTime
+    metrics.largestContentfulPaint = { value: paintTime as RelativeTime }
+    scheduleViewUpdate()
+  })
+}

package/src/domain/view/viewMetrics/trackCommonViewMetrics.ts

@@ -0,0 +1,78 @@
+import type { ClocksState, Duration, Observable } from '@kubesense/kubesense-browser-core'
+import type { ViewLoadingType } from '../../../rawRumEvent.types'
+import type { RumConfiguration } from '../../configuration'
+import type { LifeCycle } from '../../lifeCycle'
+import type { RumMutationRecord } from '../../../browser/domMutationObservable'
+import type { CumulativeLayoutShift } from './trackCumulativeLayoutShift'
+import { trackCumulativeLayoutShift } from './trackCumulativeLayoutShift'
+import type { InteractionToNextPaint } from './trackInteractionToNextPaint'
+import { trackInteractionToNextPaint } from './trackInteractionToNextPaint'
+import { trackLoadingTime } from './trackLoadingTime'
+import type { ScrollMetrics } from './trackScrollMetrics'
+import { trackScrollMetrics } from './trackScrollMetrics'
+
+export interface CommonViewMetrics {
+  loadingTime?: Duration
+  cumulativeLayoutShift?: CumulativeLayoutShift
+  interactionToNextPaint?: InteractionToNextPaint
+  scroll?: ScrollMetrics
+}
+
+export function trackCommonViewMetrics(
+  lifeCycle: LifeCycle,
+  domMutationObservable: Observable<RumMutationRecord[]>,
+  windowOpenObservable: Observable<void>,
+  configuration: RumConfiguration,
+  scheduleViewUpdate: () => void,
+  loadingType: ViewLoadingType,
+  viewStart: ClocksState
+) {
+  const commonViewMetrics: CommonViewMetrics = {}
+
+  const { stop: stopLoadingTimeTracking, setLoadEvent } = trackLoadingTime(
+    lifeCycle,
+    domMutationObservable,
+    windowOpenObservable,
+    configuration,
+    loadingType,
+    viewStart,
+    (newLoadingTime) => {
+      commonViewMetrics.loadingTime = newLoadingTime
+      scheduleViewUpdate()
+    }
+  )
+
+  const { stop: stopScrollMetricsTracking } = trackScrollMetrics(configuration, viewStart, (newScrollMetrics) => {
+    commonViewMetrics.scroll = newScrollMetrics
+  })
+
+  const { stop: stopCLSTracking } = trackCumulativeLayoutShift(
+    configuration,
+    viewStart.relative,
+    (cumulativeLayoutShift) => {
+      commonViewMetrics.cumulativeLayoutShift = cumulativeLayoutShift
+      scheduleViewUpdate()
+    }
+  )
+
+  const {
+    stop: stopINPTracking,
+    getInteractionToNextPaint,
+    setViewEnd,
+  } = trackInteractionToNextPaint(configuration, viewStart.relative, loadingType)
+
+  return {
+    stop: () => {
+      stopLoadingTimeTracking()
+      stopCLSTracking()
+      stopScrollMetricsTracking()
+    },
+    stopINPTracking,
+    setLoadEvent,
+    setViewEnd,
+    getCommonViewMetrics: () => {
+      commonViewMetrics.interactionToNextPaint = getInteractionToNextPaint()
+      return commonViewMetrics
+    },
+  }
+}

package/src/domain/view/viewMetrics/trackCumulativeLayoutShift.ts

@@ -0,0 +1,180 @@
+import { round, ONE_SECOND, noop, elapsed } from '@kubesense/kubesense-browser-core'
+import type { Duration, RelativeTime, WeakRef, WeakRefConstructor } from '@kubesense/kubesense-browser-core'
+import { isElementNode } from '../../../browser/htmlDomUtils'
+import type { RumLayoutShiftAttribution, RumLayoutShiftTiming } from '../../../browser/performanceObservable'
+import {
+  supportPerformanceTimingEvent,
+  RumPerformanceEntryType,
+  createPerformanceObservable,
+} from '../../../browser/performanceObservable'
+import { getSelectorFromElement } from '../../getSelectorFromElement'
+import type { RumConfiguration } from '../../configuration'
+import type { RumRect } from '../../../rumEvent.types'
+import { getClsAttributionImpactedArea } from './getClsAttributionImpactedArea'
+
+declare const WeakRef: WeakRefConstructor
+
+export interface CumulativeLayoutShift {
+  value: number
+  targetSelector?: string
+  time?: Duration
+  previousRect?: RumRect
+  currentRect?: RumRect
+  devicePixelRatio?: number
+}
+
+interface LayoutShiftInstance {
+  target: WeakRef<Element> | undefined
+  time: Duration
+  previousRect: DOMRectReadOnly | undefined
+  currentRect: DOMRectReadOnly | undefined
+  devicePixelRatio: number
+}
+
+/**
+ * Track the cumulative layout shifts (CLS).
+ * Layout shifts are grouped into session windows.
+ * The minimum gap between session windows is 1 second.
+ * The maximum duration of a session window is 5 second.
+ * The session window layout shift value is the sum of layout shifts inside it.
+ * The CLS value is the max of session windows values.
+ *
+ * This yields a new value whenever the CLS value is updated (a higher session window value is computed).
+ *
+ * See isLayoutShiftSupported to check for browser support.
+ *
+ * Documentation:
+ * https://web.dev/cls/
+ * https://web.dev/evolving-cls/
+ * Reference implementation: https://github.com/GoogleChrome/web-vitals/blob/master/src/getCLS.ts
+ */
+export function trackCumulativeLayoutShift(
+  configuration: RumConfiguration,
+  viewStart: RelativeTime,
+  callback: (cumulativeLayoutShift: CumulativeLayoutShift) => void
+) {
+  if (!isLayoutShiftSupported()) {
+    return {
+      stop: noop,
+    }
+  }
+
+  let maxClsValue = 0
+  let biggestShift: LayoutShiftInstance | undefined
+
+  // if no layout shift happen the value should be reported as 0
+  callback({
+    value: 0,
+  })
+
+  const slidingWindow = slidingSessionWindow()
+  const performanceSubscription = createPerformanceObservable(configuration, {
+    type: RumPerformanceEntryType.LAYOUT_SHIFT,
+    buffered: true,
+  }).subscribe((entries) => {
+    for (const entry of entries) {
+      if (entry.hadRecentInput || entry.startTime < viewStart) {
+        continue
+      }
+
+      const { cumulatedValue, isMaxValue } = slidingWindow.update(entry)
+
+      if (isMaxValue) {
+        const attribution = getTopImpactedElement(entry.sources)
+        biggestShift = {
+          target: attribution?.node ? new WeakRef(attribution.node) : undefined,
+          time: elapsed(viewStart, entry.startTime),
+          previousRect: attribution?.previousRect,
+          currentRect: attribution?.currentRect,
+          devicePixelRatio: window.devicePixelRatio,
+        }
+      }
+
+      if (cumulatedValue > maxClsValue) {
+        maxClsValue = cumulatedValue
+        const target = biggestShift?.target?.deref()
+
+        callback({
+          value: round(maxClsValue, 4),
+          targetSelector: target && getSelectorFromElement(target, configuration.actionNameAttribute),
+          time: biggestShift?.time,
+          previousRect: biggestShift?.previousRect ? asRumRect(biggestShift.previousRect) : undefined,
+          currentRect: biggestShift?.currentRect ? asRumRect(biggestShift.currentRect) : undefined,
+          devicePixelRatio: biggestShift?.devicePixelRatio,
+        })
+      }
+    }
+  })
+
+  return {
+    stop: () => {
+      performanceSubscription.unsubscribe()
+    },
+  }
+}
+
+function getTopImpactedElement(
+  sources: RumLayoutShiftAttribution[]
+): (RumLayoutShiftAttribution & { node: Element }) | undefined {
+  let topImpactedSource: (RumLayoutShiftAttribution & { node: Element }) | undefined
+  for (const source of sources) {
+    if (source.node && isElementNode(source.node)) {
+      const currentImpactedArea = getClsAttributionImpactedArea(source)
+      if (!topImpactedSource || getClsAttributionImpactedArea(topImpactedSource) < currentImpactedArea) {
+        topImpactedSource = source as RumLayoutShiftAttribution & { node: Element }
+      }
+    }
+  }
+  return topImpactedSource
+}
+
+function asRumRect({ x, y, width, height }: DOMRectReadOnly): RumRect {
+  return { x, y, width, height }
+}
+
+export const MAX_WINDOW_DURATION = 5 * ONE_SECOND
+const MAX_UPDATE_GAP = ONE_SECOND
+
+function slidingSessionWindow() {
+  let cumulatedValue = 0
+  let startTime: RelativeTime
+  let endTime: RelativeTime
+  let maxValue = 0
+
+  return {
+    update: (entry: RumLayoutShiftTiming) => {
+      const shouldCreateNewWindow =
+        startTime === undefined ||
+        entry.startTime - endTime >= MAX_UPDATE_GAP ||
+        entry.startTime - startTime >= MAX_WINDOW_DURATION
+
+      let isMaxValue: boolean
+
+      if (shouldCreateNewWindow) {
+        startTime = endTime = entry.startTime
+        maxValue = cumulatedValue = entry.value
+        isMaxValue = true
+      } else {
+        cumulatedValue += entry.value
+        endTime = entry.startTime
+        isMaxValue = entry.value > maxValue
+
+        if (isMaxValue) {
+          maxValue = entry.value
+        }
+      }
+
+      return {
+        cumulatedValue,
+        isMaxValue,
+      }
+    },
+  }
+}
+
+/**
+ * Check whether `layout-shift` is supported by the browser.
+ */
+export function isLayoutShiftSupported() {
+  return supportPerformanceTimingEvent(RumPerformanceEntryType.LAYOUT_SHIFT) && 'WeakRef' in window
+}

package/src/domain/view/viewMetrics/trackFirstContentfulPaint.ts

@@ -0,0 +1,47 @@
+import type { Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
+import { ONE_MINUTE, elapsed, relativeNow } from '@kubesense/kubesense-browser-core'
+import type { RumPerformancePaintTiming } from '../../../browser/performanceObservable'
+import { createPerformanceObservable, RumPerformanceEntryType } from '../../../browser/performanceObservable'
+import type { RumConfiguration } from '../../configuration'
+import type { FirstHidden } from './trackFirstHidden'
+
+// Discard FCP timings above a certain delay to avoid incorrect data
+// It happens in some cases like sleep mode or some browser implementations
+export const FCP_MAXIMUM_DELAY = 10 * ONE_MINUTE
+
+export function trackFirstContentfulPaint(
+  configuration: RumConfiguration,
+  firstHidden: FirstHidden,
+  callback: (fcpTiming: RelativeTime) => void
+) {
+  const performanceSubscription = createPerformanceObservable(configuration, {
+    type: RumPerformanceEntryType.PAINT,
+    buffered: true,
+  }).subscribe((entries) => {
+    const fcpEntry = entries.find(
+      (entry): entry is RumPerformancePaintTiming =>
+        entry.name === 'first-contentful-paint' &&
+        entry.startTime < firstHidden.timeStamp &&
+        entry.startTime < FCP_MAXIMUM_DELAY
+    )
+    if (fcpEntry) {
+      callback(fcpEntry.startTime)
+    }
+  })
+  return {
+    stop: performanceSubscription.unsubscribe,
+  }
+}
+
+/**
+ * Measure the First Contentful Paint after a BFCache restoration.
+ * The DOM is restored synchronously, so we approximate the FCP with the first frame
+ * rendered just after the pageshow event, using two nested requestAnimationFrame calls.
+ */
+export function trackRestoredFirstContentfulPaint(viewStartRelative: RelativeTime, callback: (fcp: Duration) => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      callback(elapsed(viewStartRelative, relativeNow()))
+    })
+  })
+}

package/src/domain/view/viewMetrics/trackFirstHidden.ts

@@ -0,0 +1,53 @@
+import type { ClocksState, RelativeTime } from '@kubesense/kubesense-browser-core'
+import { addEventListeners, DOM_EVENT, noop } from '@kubesense/kubesense-browser-core'
+import type { RumConfiguration } from '../../configuration'
+import { supportPerformanceTimingEvent, RumPerformanceEntryType } from '../../../browser/performanceObservable'
+
+export type FirstHidden = ReturnType<typeof trackFirstHidden>
+
+export interface Options {
+  viewStart: ClocksState
+}
+
+export function trackFirstHidden(
+  configuration: RumConfiguration,
+  viewStart: ClocksState,
+  eventTarget: Window = window
+) {
+  if (document.visibilityState === 'hidden') {
+    return { timeStamp: 0 as RelativeTime, stop: noop }
+  }
+
+  if (supportPerformanceTimingEvent(RumPerformanceEntryType.VISIBILITY_STATE)) {
+    const firstHiddenEntry = performance
+      .getEntriesByType(RumPerformanceEntryType.VISIBILITY_STATE)
+      .filter((entry) => entry.name === 'hidden')
+      .find((entry) => entry.startTime >= viewStart.relative)
+
+    if (firstHiddenEntry) {
+      return { timeStamp: firstHiddenEntry.startTime as RelativeTime, stop: noop }
+    }
+  }
+
+  let timeStamp: RelativeTime = Infinity as RelativeTime
+
+  const { stop } = addEventListeners(
+    configuration,
+    eventTarget,
+    [DOM_EVENT.PAGE_HIDE, DOM_EVENT.VISIBILITY_CHANGE],
+    (event) => {
+      if (event.type === DOM_EVENT.PAGE_HIDE || document.visibilityState === 'hidden') {
+        timeStamp = event.timeStamp as RelativeTime
+        stop()
+      }
+    },
+    { capture: true }
+  )
+
+  return {
+    get timeStamp() {
+      return timeStamp
+    },
+    stop,
+  }
+}

package/src/domain/view/viewMetrics/trackFirstInput.ts

@@ -0,0 +1,59 @@
+import type { Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
+import { elapsed } from '@kubesense/kubesense-browser-core'
+import { isElementNode } from '../../../browser/htmlDomUtils'
+import type { RumConfiguration } from '../../configuration'
+import { createPerformanceObservable, RumPerformanceEntryType } from '../../../browser/performanceObservable'
+import type { RumFirstInputTiming } from '../../../browser/performanceObservable'
+import { getSelectorFromElement } from '../../getSelectorFromElement'
+import type { FirstHidden } from './trackFirstHidden'
+
+export interface FirstInput {
+  delay: Duration
+  time: RelativeTime
+  targetSelector?: string
+}
+
+/**
+ * Track the first input occurring during the initial View to return:
+ * - First Input Delay
+ * - First Input Time
+ * Callback is called at most one time.
+ * Documentation: https://web.dev/fid/
+ * Reference implementation: https://github.com/GoogleChrome/web-vitals/blob/master/src/getFID.ts
+ */
+export function trackFirstInput(
+  configuration: RumConfiguration,
+  firstHidden: FirstHidden,
+  callback: (firstInput: FirstInput) => void
+) {
+  const performanceFirstInputSubscription = createPerformanceObservable(configuration, {
+    type: RumPerformanceEntryType.FIRST_INPUT,
+    buffered: true,
+  }).subscribe((entries) => {
+    const firstInputEntry = entries.find(
+      (entry): entry is RumFirstInputTiming => entry.startTime < firstHidden.timeStamp
+    )
+    if (firstInputEntry) {
+      const firstInputDelay = elapsed(firstInputEntry.startTime, firstInputEntry.processingStart)
+      let firstInputTargetSelector
+
+      if (firstInputEntry.target && isElementNode(firstInputEntry.target)) {
+        firstInputTargetSelector = getSelectorFromElement(firstInputEntry.target, configuration.actionNameAttribute)
+      }
+
+      callback({
+        // Ensure firstInputDelay to be positive, see
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1185815
+        delay: firstInputDelay >= 0 ? firstInputDelay : (0 as Duration),
+        time: firstInputEntry.startTime,
+        targetSelector: firstInputTargetSelector,
+      })
+    }
+  })
+
+  return {
+    stop: () => {
+      performanceFirstInputSubscription.unsubscribe()
+    },
+  }
+}

package/src/domain/view/viewMetrics/trackInitialViewMetrics.ts

@@ -0,0 +1,66 @@
+import type { ClocksState, Duration } from '@kubesense/kubesense-browser-core'
+import type { RumConfiguration } from '../../configuration'
+import { trackFirstContentfulPaint } from './trackFirstContentfulPaint'
+import type { FirstInput } from './trackFirstInput'
+import { trackFirstInput } from './trackFirstInput'
+import type { NavigationTimings } from './trackNavigationTimings'
+import { trackNavigationTimings } from './trackNavigationTimings'
+import type { LargestContentfulPaint } from './trackLargestContentfulPaint'
+import { trackLargestContentfulPaint } from './trackLargestContentfulPaint'
+import { trackFirstHidden } from './trackFirstHidden'
+
+export interface InitialViewMetrics {
+  firstContentfulPaint?: Duration
+  navigationTimings?: NavigationTimings
+  largestContentfulPaint?: LargestContentfulPaint
+  firstInput?: FirstInput
+}
+
+export function trackInitialViewMetrics(
+  configuration: RumConfiguration,
+  viewStart: ClocksState,
+  setLoadEvent: (loadEnd: Duration) => void,
+  scheduleViewUpdate: () => void
+) {
+  const initialViewMetrics: InitialViewMetrics = {}
+
+  const { stop: stopNavigationTracking } = trackNavigationTimings(configuration, (navigationTimings) => {
+    setLoadEvent(navigationTimings.loadEvent)
+    initialViewMetrics.navigationTimings = navigationTimings
+    scheduleViewUpdate()
+  })
+
+  const firstHidden = trackFirstHidden(configuration, viewStart)
+  const { stop: stopFCPTracking } = trackFirstContentfulPaint(configuration, firstHidden, (firstContentfulPaint) => {
+    initialViewMetrics.firstContentfulPaint = firstContentfulPaint
+    scheduleViewUpdate()
+  })
+
+  const { stop: stopLCPTracking } = trackLargestContentfulPaint(
+    configuration,
+    firstHidden,
+    window,
+    (largestContentfulPaint) => {
+      initialViewMetrics.largestContentfulPaint = largestContentfulPaint
+      scheduleViewUpdate()
+    }
+  )
+
+  const { stop: stopFIDTracking } = trackFirstInput(configuration, firstHidden, (firstInput) => {
+    initialViewMetrics.firstInput = firstInput
+    scheduleViewUpdate()
+  })
+
+  function stop() {
+    stopNavigationTracking()
+    stopFCPTracking()
+    stopLCPTracking()
+    stopFIDTracking()
+    firstHidden.stop()
+  }
+
+  return {
+    stop,
+    initialViewMetrics,
+  }
+}