adding ability to track all changes for web vitals

Author: eskirk

packages/core/src/config/types.ts

@@ -163,6 +163,15 @@ export interface Config<P = APIEvent> {
    */
   trackWebVitalsAttribution?: boolean;
 
+  /**
+   * Report all changes for web vitals (default: false)
+   *
+   * In most cases, you only want the callback function to be called when the metric is ready to be reported.
+   * However, it is possible to report every change (e.g. each larger layout shift as it happens)
+   * by setting reportAllChanges to true.
+   */
+  reportAllWebVitalChanges?: boolean;
+
   /**
    * Configuration for the console instrumentation
    */

packages/web-sdk/src/instrumentations/webVitals/instrumentation.ts

@@ -15,8 +15,8 @@ export class WebVitalsInstrumentation extends BaseInstrumentation {
 
   private intializeWebVitalsInstrumentation() {
     if (this.config.trackWebVitalsAttribution) {
-      return new WebVitalsWithAttribution(this.api.pushMeasurement);
+      return new WebVitalsWithAttribution(this.api.pushMeasurement, this.config.reportAllWebVitalChanges);
     }
-    return new WebVitalsBasic(this.api.pushMeasurement);
+    return new WebVitalsBasic(this.api.pushMeasurement, this.config.reportAllWebVitalChanges);
   }
 }

packages/web-sdk/src/instrumentations/webVitals/webVitalsBasic.ts

@@ -12,7 +12,7 @@ export class WebVitalsBasic {
     ttfb: onTTFB,
   };
 
-  constructor(private pushMeasurement: MeasurementsAPI['pushMeasurement']) {}
+  constructor(private pushMeasurement: MeasurementsAPI['pushMeasurement'], private reportAllChanges?: boolean) {}
 
   initialize(): void {
     Object.entries(WebVitalsBasic.mapping).forEach(([indicator, executor]) => {
@@ -24,7 +24,7 @@ export class WebVitalsBasic {
             [indicator]: metric.value,
           },
         });
-      });
+      }, { reportAllChanges: this.reportAllChanges });
     });
   }
 }

packages/web-sdk/src/instrumentations/webVitals/webVitalsWithAttribution.ts

@@ -16,7 +16,7 @@ const loadStateKey = 'load_state';
 const timeToFirstByteKey = 'time_to_first_byte';
 
 export class WebVitalsWithAttribution {
-  constructor(private corePushMeasurement: MeasurementsAPI['pushMeasurement']) {}
+  constructor(private corePushMeasurement: MeasurementsAPI['pushMeasurement'], private reportAllChanges?: boolean) {}
 
   initialize(): void {
     this.measureCLS();
@@ -40,7 +40,7 @@ export class WebVitalsWithAttribution {
       this.addIfPresent(context, 'largest_shift_target', largestShiftTarget);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private measureFCP(): void {
@@ -55,7 +55,7 @@ export class WebVitalsWithAttribution {
       this.addIfPresent(context, loadStateKey, loadState);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private measureFID(): void {
@@ -71,7 +71,7 @@ export class WebVitalsWithAttribution {
       this.addIfPresent(context, loadStateKey, loadState);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private measureINP(): void {
@@ -100,7 +100,7 @@ export class WebVitalsWithAttribution {
       this.addIfPresent(context, 'interaction_type', interactionType);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private measureLCP(): void {
@@ -118,7 +118,7 @@ export class WebVitalsWithAttribution {
       this.addIfPresent(context, 'element', element);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private measureTTFB(): void {
@@ -135,7 +135,7 @@ export class WebVitalsWithAttribution {
       const context = this.buildInitialContext(metric);
 
       this.pushMeasurement(values, context);
-    });
+    }, { reportAllChanges: this.reportAllChanges });
   }
 
   private buildInitialValues(metric: Metric): Values {