feat: add config options for reportAll CLS and LCP

Author: williazz

docs/configuration.md

@@ -188,6 +188,10 @@ 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.
 

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

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

src/orchestration/Orchestration.ts

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

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -28,12 +28,18 @@ 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 {
-    constructor() {
+    private config: PerformancePluginConfig;
+    constructor(config?: Partial<PerformancePluginConfig>) {
         super(WEB_VITAL_EVENT_PLUGIN_ID);
+        this.config = { ...defaultPerformancePluginConfig, ...config };
     }
     private resourceEventIds = new Map<string, string>();
     private navigationEventId?: string;
@@ -45,14 +51,15 @@ 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));
+        onLCP((metric) => this.handleLCP(metric), {
+            reportAllChanges: this.config.reportAllLCP
+        });
         onFID((metric) => this.handleFID(metric));
-        onCLS((metric) => this.handleCLS(metric));
+        onCLS((metric) => this.handleCLS(metric), {
+            reportAllChanges: this.config.reportAllCLS
+        });
     }
 
     private handleEvent = (event: ParsedRumEvent) => {

src/plugins/utils/performance-utils.ts

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