feat(perf): Add experimental option to improve LCP collection

This will add an experimental option (options._metricOptions._reportAllChanges) that will set 'getLCP' to always report. Now that we are recording LCP element, it should be sufficient to collection the additional information and let the user pick the appropriate LCP element in the ui to improve accuracy dynamically instead. We'd like to test this out on Sentry first.

Author: k-fish

packages/tracing/src/browser/browsertracing.ts

@@ -60,6 +60,15 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
    */
   markBackgroundTransactions: boolean;
 
+  /**
+   * _metricOptions allows the user to send options to change how metrics are collected.
+   *
+   * _metricOptions is currently experimental.
+   *
+   * Default: undefined
+   */
+  _metricOptions?: BrowserMetricOptions;
+
   /**
    * beforeNavigate is called before a pageload/navigation transaction is created and allows users to modify transaction
    * context data, or drop the transaction entirely (by setting `sampled = false` in the context).
@@ -83,6 +92,13 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
   ): void;
 }
 
+/**
+ * Exports a way to add options to our metric collection. Currently experimental.
+ */
+export interface BrowserMetricOptions {
+  _reportAllChanges?: boolean;
+}
+
 const DEFAULT_BROWSER_TRACING_OPTIONS = {
   idleTimeout: DEFAULT_IDLE_TIMEOUT,
   markBackgroundTransactions: true,
@@ -116,7 +132,7 @@ export class BrowserTracing implements Integration {
 
   private _getCurrentHub?: () => Hub;
 
-  private readonly _metrics: MetricsInstrumentation = new MetricsInstrumentation();
+  private readonly _metrics: MetricsInstrumentation;
 
   private readonly _emitOptionsWarning: boolean = false;
 
@@ -139,6 +155,8 @@ export class BrowserTracing implements Integration {
       ..._options,
       tracingOrigins,
     };
+
+    this._metrics = new MetricsInstrumentation(this.options._metricOptions);
   }
 
   /**

packages/tracing/src/browser/metrics.ts

@@ -6,6 +6,7 @@ import { browserPerformanceTimeOrigin, getGlobalObject, htmlTreeAsString, isNode
 import { Span } from '../span';
 import { Transaction } from '../transaction';
 import { msToSec } from '../utils';
+import { BrowserMetricOptions } from './browsertracing';
 import { getCLS, LayoutShift } from './web-vitals/getCLS';
 import { getFID } from './web-vitals/getFID';
 import { getLCP, LargestContentfulPaint } from './web-vitals/getLCP';
@@ -22,15 +23,15 @@ export class MetricsInstrumentation {
   private _lcpEntry: LargestContentfulPaint | undefined;
   private _clsEntry: LayoutShift | undefined;
 
-  public constructor() {
+  public constructor(_options?: BrowserMetricOptions) {
     if (!isNodeEnv() && global?.performance) {
       if (global.performance.mark) {
         global.performance.mark('sentry-tracing-init');
       }
 
-      this._trackCLS();
-      this._trackLCP();
-      this._trackFID();
+      this._trackCLS(_options);
+      this._trackLCP(_options);
+      this._trackFID(_options);
     }
   }
 
@@ -230,7 +231,7 @@ export class MetricsInstrumentation {
   }
 
   /** Starts tracking the Cumulative Layout Shift on the current page. */
-  private _trackCLS(): void {
+  private _trackCLS(_options?: BrowserMetricOptions): void {
     // See:
     // https://web.dev/evolving-cls/
     // https://web.dev/cls-web-tooling/
@@ -285,7 +286,7 @@ export class MetricsInstrumentation {
   }
 
   /** Starts tracking the Largest Contentful Paint on the current page. */
-  private _trackLCP(): void {
+  private _trackLCP(_options?: BrowserMetricOptions): void {
     getLCP(metric => {
       const entry = metric.entries.pop();
 
@@ -299,11 +300,11 @@ export class MetricsInstrumentation {
       this._measurements['lcp'] = { value: metric.value };
       this._measurements['mark.lcp'] = { value: timeOrigin + startTime };
       this._lcpEntry = entry as LargestContentfulPaint;
-    });
+    }, _options?._reportAllChanges);
   }
 
   /** Starts tracking the First Input Delay on the current page. */
-  private _trackFID(): void {
+  private _trackFID(_options?: BrowserMetricOptions): void {
     getFID(metric => {
       const entry = metric.entries.pop();