feat(web-sdk): add webVitalsInstrumentation.trackAttribution, enable by default

CHANGELOG.md

@@ -4,7 +4,10 @@
 
 - Feature (`@grafana/faro-web-sdk`): Provide a `webVitalsInstrumentation.reportAllChanges` option to report
   all changes for web vitals (#981)
-- feat (`@grafana/faro-web-sdk`): Enhance user meta properties to align with OTEL semantic
+- Feature (`@grafana/faro-web-sdk`): Provide a `webVitalsInstrumentation.trackAttribution` option to track
+  web vitals attribution (#991)
+- Feature (`@grafana/faro-web-sdk`): Change `trackWebVitalsAttribution` default value to true (#991)
+- Feature (`@grafana/faro-web-sdk`): Enhance user meta properties to align with OTEL semantic
   conventions for user attributes (#990)
 - Chore (`@grafana/faro-web-tracing`): Add user attributes to spans (#990)
 

packages/core/src/config/types.ts

@@ -159,7 +159,7 @@ export interface Config<P = APIEvent> {
   trackResources?: boolean;
 
   /**
-   * Track web vitals attribution data (default: false)
+   * Track web vitals attribution data (default: true)
    */
   trackWebVitalsAttribution?: boolean;
 
@@ -178,6 +178,13 @@ export interface Config<P = APIEvent> {
      * for measuring these metrics in production.
      */
     reportAllChanges?: boolean;
+
+    /**
+     * Track web vitals attribution data (default: true)
+     *
+     * Functionally the same as setting `trackWebVitalsAttribution` to true.
+     */
+    trackAttribution?: boolean;
   };
 
   /**

packages/web-sdk/src/config/makeCoreConfig.test.ts

@@ -99,6 +99,22 @@ describe('config', () => {
     expect(config?.webVitalsInstrumentation?.reportAllChanges).toBe(true);
   });
 
+  it('enables web vitals feature when webVitalsInstrumentation.trackAttribution is true', () => {
+    const browserConfig = {
+      url: 'http://example.com/my-collector',
+      app: {},
+      webVitalsInstrumentation: {
+        reportAllChanges: true,
+        trackAttribution: true,
+      },
+    };
+    const config = makeCoreConfig(browserConfig);
+
+    expect(config).toBeTruthy();
+    expect(config?.webVitalsInstrumentation?.reportAllChanges).toBe(true);
+    expect(config?.webVitalsInstrumentation?.trackAttribution).toBe(true);
+  });
+
   it('merges configured urls with default URLs into ignoreUrls list', () => {
     const browserConfig = {
       url: 'http://example.com/my-collector',

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

@@ -13,7 +13,7 @@ describe('WebVitals Instrumentation', () => {
     jest.clearAllMocks();
   });
 
-  it('load WebVitalsBasic by default', () => {
+  it('load WebVitalsWithAttribution by default', () => {
     const transport = new MockTransport();
 
     initializeFaro(
@@ -23,16 +23,33 @@ describe('WebVitals Instrumentation', () => {
       })
     );
 
+    expect(WebVitalsBasic).toHaveBeenCalledTimes(0);
+    expect(WebVitalsWithAttribution).toHaveBeenCalledTimes(1);
+  });
+
+  it('load WebVitalsBasic when trackWebVitalAttribution is false', () => {
+    const transport = new MockTransport();
+
+    initializeFaro(
+      mockConfig({
+        trackWebVitalsAttribution: false,
+        transports: [transport],
+        instrumentations: [new WebVitalsInstrumentation()],
+      })
+    );
+
     expect(WebVitalsBasic).toHaveBeenCalledTimes(1);
     expect(WebVitalsWithAttribution).toHaveBeenCalledTimes(0);
   });
 
-  it('load WebVitalsWithAttribution when trackWebVitalAttribution is true', () => {
+  it('load WebVitalsWithAttribution when webVitalsInstrumentation.trackAttribution is true', () => {
     const transport = new MockTransport();
 
     initializeFaro(
       mockConfig({
-        trackWebVitalsAttribution: true,
+        webVitalsInstrumentation: {
+          trackAttribution: true,
+        },
         transports: [transport],
         instrumentations: [new WebVitalsInstrumentation()],
       })

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

@@ -14,9 +14,12 @@ export class WebVitalsInstrumentation extends BaseInstrumentation {
   }
 
   private intializeWebVitalsInstrumentation() {
-    if (this.config?.trackWebVitalsAttribution) {
-      return new WebVitalsWithAttribution(this.api.pushMeasurement, this.config.webVitalsInstrumentation);
+    if (
+      this.config?.trackWebVitalsAttribution === false ||
+      this.config?.webVitalsInstrumentation?.trackAttribution === false
+    ) {
+      return new WebVitalsBasic(this.api.pushMeasurement, this.config.webVitalsInstrumentation);
     }
-    return new WebVitalsBasic(this.api.pushMeasurement, this.config.webVitalsInstrumentation);
+    return new WebVitalsWithAttribution(this.api.pushMeasurement, this.config.webVitalsInstrumentation);
   }
 }