revert: web vitals 4.x upgrade, reportAllLCP, and reportAllCLS (#633)

Author: williazz

docs/configuration.md

@@ -188,10 +188,6 @@ const awsRum: AwsRum = new AwsRum(
 | --- | --- | --- | --- |
 | eventLimit | Number | `10` | The maximum number of resources to record load timing. <br/><br/>There may be many similar resources on a page (e.g., images) and recording all resources may add expense without adding value. The web client records all HTML files and JavaScript files, while recording a sample of stylesheets, images and fonts. Increasing the event limit increases the maximum number of sampled resources. |
 | ignore | Function(event: PerformanceEntry) : any | `(entry: PerformanceEntry) => entry.entryType === 'resource' && !/^https?:/.test(entry.name)` | A function which accepts a [PerformanceEntry](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry) and returns a value that coerces to true when the PerformanceEntry should be ignored.</br></br> By default, [PerformanceResourceTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) entries with URLs that do not have http(s) schemes are ignored. This causes resources loaded by browser extensions to be ignored. |
-| recordAllTypes | String[] | ['document', 'script', 'stylesheet', 'font'] | A list of resource types that are always recorded, no matter if the resource event limit has been reached. Possible values are 'other', 'stylesheet', 'document', 'script', 'image', and 'font'. |
-| sampleTypes | String[] | ['image', 'other'] | A list of resource types that are only recorded if the resource event limit has not been reached. Possible values are 'other', 'stylesheet', 'document', 'script', 'image', and 'font'. |
-| reportAllLCP | boolean | FALSE | If true, then all increases to LCP are recorded. |
-| reportAllCLS | boolean | FALSE | If true, then all increases to CLS are recorded. |
 
 For example, the following telemetry config array causes the web client to ignore all resource entries.
 

package-lock.json

@@ -125,7 +125,7 @@
         "shimmer": "^1.2.1",
         "ua-parser-js": "^1.0.33",
         "uuid": "^9.0.0",
-        "web-vitals": "^4.0.0"
+        "web-vitals": "^3.0.2"
     },
     "lint-staged": {
         "*.ts": "npm run lint:errors",

package.json

@@ -9,9 +9,7 @@ loader('cwr', 'abc123', '1.0', 'us-west-2', './rum_javascript_telemetry.js', {
     eventPluginsToLoad: [
         new ResourcePlugin(),
         new NavigationPlugin(),
-        new WebVitalsPlugin({
-            reportAllCLS: true
-        })
+        new WebVitalsPlugin()
     ],
     telemetries: [],
     clientBuilder: showRequestClientBuilder

src/loader/loader-web-vital-event.js

@@ -493,7 +493,7 @@ export class Orchestration {
                 return [
                     new NavigationPlugin(config),
                     new ResourcePlugin(config),
-                    new WebVitalsPlugin(config)
+                    new WebVitalsPlugin()
                 ];
             },
             [TelemetryEnum.Interaction]: (config: object): InternalPlugin[] => {

src/orchestration/Orchestration.ts

@@ -28,18 +28,12 @@ import {
     RumLCPAttribution,
     isLCPSupported
 } from '../../utils/common-utils';
-import {
-    defaultPerformancePluginConfig,
-    PerformancePluginConfig
-} from '../../plugins/utils/performance-utils';
 
 export const WEB_VITAL_EVENT_PLUGIN_ID = 'web-vitals';
 
 export class WebVitalsPlugin extends InternalPlugin {
-    private config: PerformancePluginConfig;
-    constructor(config?: Partial<PerformancePluginConfig>) {
+    constructor() {
         super(WEB_VITAL_EVENT_PLUGIN_ID);
-        this.config = { ...defaultPerformancePluginConfig, ...config };
     }
     private resourceEventIds = new Map<string, string>();
     private navigationEventId?: string;
@@ -51,15 +45,14 @@ export class WebVitalsPlugin extends InternalPlugin {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     disable(): void {}
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    configure(config: any): void {}
+
     protected onload(): void {
         this.context.eventBus.subscribe(Topic.EVENT, this.handleEvent); // eslint-disable-line @typescript-eslint/unbound-method
-        onLCP((metric) => this.handleLCP(metric), {
-            reportAllChanges: this.config.reportAllLCP
-        });
+        onLCP((metric) => this.handleLCP(metric));
         onFID((metric) => this.handleFID(metric));
-        onCLS((metric) => this.handleCLS(metric), {
-            reportAllChanges: this.config.reportAllCLS
-        });
+        onCLS((metric) => this.handleCLS(metric));
     }
 
     private handleEvent = (event: ParsedRumEvent) => {
@@ -90,7 +83,7 @@ export class WebVitalsPlugin extends InternalPlugin {
             url: a.url,
             timeToFirstByte: a.timeToFirstByte,
             resourceLoadDelay: a.resourceLoadDelay,
-            resourceLoadTime: a.resourceLoadDuration,
+            resourceLoadTime: a.resourceLoadTime,
             elementRenderDelay: a.elementRenderDelay
         };
         if (a.lcpResourceEntry) {

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -18,11 +18,6 @@ import { context, record } from '../../../test-utils/test-utils';
 import { Topic } from '../../../event-bus/EventBus';
 import { WebVitalsPlugin } from '../WebVitalsPlugin';
 import { navigationEvent } from '../../../test-utils/mock-data';
-import {
-    CLSMetricWithAttribution,
-    FIDMetricWithAttribution,
-    LCPMetricWithAttribution
-} from 'web-vitals';
 
 const mockLCPData = {
     delta: 239.51,
@@ -34,10 +29,10 @@ const mockLCPData = {
         url: 'example.com/source.png',
         timeToFirstByte: 1000,
         resourceLoadDelay: 250,
-        resourceLoadDuration: 1000,
+        resourceLoadTime: 1000,
         elementRenderDelay: 250
     }
-} as LCPMetricWithAttribution;
+};
 
 const mockFIDData = {
     delta: 1.2799999676644802,
@@ -50,7 +45,7 @@ const mockFIDData = {
         eventType: 'keydown',
         loadState: 'dom-interactive'
     }
-} as FIDMetricWithAttribution;
+};
 
 const mockCLSData = {
     delta: 0,
@@ -63,7 +58,7 @@ const mockCLSData = {
         largestShiftTime: 3447485.600000024,
         loadState: 'dom-interactive'
     }
-} as CLSMetricWithAttribution;
+};
 
 // only need hasLatency fields
 const imagePerformanceEntry = {
@@ -133,8 +128,7 @@ describe('WebVitalsPlugin tests', () => {
                     timeToFirstByte: mockLCPData.attribution.timeToFirstByte,
                     resourceLoadDelay:
                         mockLCPData.attribution.resourceLoadDelay,
-                    resourceLoadTime:
-                        mockLCPData.attribution.resourceLoadDuration,
+                    resourceLoadTime: mockLCPData.attribution.resourceLoadTime,
                     elementRenderDelay:
                         mockLCPData.attribution.elementRenderDelay
                 })

src/plugins/event-plugins/__tests__/WebVitalsPlugin.test.ts

@@ -12,8 +12,6 @@ export type PerformancePluginConfig = {
     ignore: (event: PerformanceEntry) => any;
     recordAllTypes: ResourceType[];
     sampleTypes: ResourceType[];
-    reportAllLCP: boolean;
-    reportAllCLS: boolean;
 };
 
 export const defaultPerformancePluginConfig = {
@@ -25,7 +23,5 @@ export const defaultPerformancePluginConfig = {
         ResourceType.STYLESHEET,
         ResourceType.FONT
     ],
-    sampleTypes: [ResourceType.IMAGE, ResourceType.OTHER],
-    reportAllLCP: false,
-    reportAllCLS: false
+    sampleTypes: [ResourceType.IMAGE, ResourceType.OTHER]
 };