feat: Ignore resources with non-http scheme (#419)

---------

Co-authored-by: Quinn Hanam <[email protected]>

Author: williazz

docs/configuration.md

@@ -194,3 +194,21 @@ const awsRum: AwsRum = new AwsRum(
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | 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. |
+
+For example, the following telemetry config array causes the web client to ignore all resource entries.
+
+```javascript
+telemetries: [
+    [
+        'errors',
+        'http',
+        'performance',
+        {
+            ignore: (entry: PerformanceEntry) => {
+                return entry.entryType === 'resource';
+            }
+        }
+    ],
+]
+```

src/orchestration/Orchestration.ts

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

src/plugins/event-plugins/NavigationPlugin.ts

@@ -1,6 +1,11 @@
 import { InternalPlugin } from '../InternalPlugin';
 import { NavigationEvent } from '../../events/navigation-event';
 import { PERFORMANCE_NAVIGATION_EVENT_TYPE } from '../utils/constant';
+import {
+    PartialPerformancePluginConfig,
+    PerformancePluginConfig,
+    defaultPerformancePluginConfig
+} from '../utils/performance-utils';
 
 export const NAVIGATION_EVENT_PLUGIN_ID = 'navigation';
 
@@ -13,8 +18,10 @@ const LOAD = 'load';
  * For RUM, these event types are inter-dependent. So they are recorded under one plugin.
  */
 export class NavigationPlugin extends InternalPlugin {
-    constructor() {
+    private config: PerformancePluginConfig;
+    constructor(config?: PartialPerformancePluginConfig) {
         super(NAVIGATION_EVENT_PLUGIN_ID);
+        this.config = { ...defaultPerformancePluginConfig, ...config };
     }
 
     enable(): void {
@@ -70,13 +77,14 @@ export class NavigationPlugin extends InternalPlugin {
             this.performanceNavigationEventHandlerTimingLevel1();
         } else {
             const navigationObserver = new PerformanceObserver((list) => {
-                list.getEntries().forEach((event) => {
-                    if (event.entryType === NAVIGATION) {
+                list.getEntries()
+                    .filter((e) => e.entryType === NAVIGATION)
+                    .filter((e) => !this.config.ignore(e))
+                    .forEach((event) => {
                         this.performanceNavigationEventHandlerTimingLevel2(
-                            event
+                            event as PerformanceNavigationTiming
                         );
-                    }
-                });
+                    });
             });
             navigationObserver.observe({
                 entryTypes: [NAVIGATION]
@@ -184,11 +192,20 @@ export class NavigationPlugin extends InternalPlugin {
     /**
      * W3C specification: https://www.w3.org/TR/navigation-timing-2/#bib-navigation-timing
      */
-    performanceNavigationEventHandlerTimingLevel2 = (entryData: any): void => {
+    performanceNavigationEventHandlerTimingLevel2 = (
+        entryData: PerformanceNavigationTiming
+    ): void => {
         const eventDataNavigationTimingLevel2: NavigationEvent = {
             version: '1.0.0',
-            initiatorType: entryData.initiatorType,
-            navigationType: entryData.type,
+            initiatorType: entryData.initiatorType as
+                | 'navigation'
+                | 'route_change',
+            navigationType: entryData.type as
+                | 'back_forward'
+                | 'navigate'
+                | 'reload'
+                | 'reserved'
+                | undefined,
             startTime: entryData.startTime,
             unloadEventStart: entryData.unloadEventStart,
             promptForUnload:
@@ -262,10 +279,14 @@ export class NavigationPlugin extends InternalPlugin {
     protected onload(): void {
         if (this.enabled) {
             if (this.hasTheWindowLoadEventFired()) {
-                const navData = window.performance.getEntriesByType(
-                    NAVIGATION
-                )[0] as PerformanceNavigationTiming;
-                this.performanceNavigationEventHandlerTimingLevel2(navData);
+                window.performance
+                    .getEntriesByType(NAVIGATION)
+                    .filter((e) => !this.config.ignore(e))
+                    .forEach((event) =>
+                        this.performanceNavigationEventHandlerTimingLevel2(
+                            event
+                        )
+                    );
             } else {
                 window.addEventListener(LOAD, this.eventListener);
             }

src/plugins/event-plugins/ResourcePlugin.ts

@@ -6,44 +6,26 @@ import {
 } from '../../utils/common-utils';
 import { ResourceEvent } from '../../events/resource-event';
 import { PERFORMANCE_RESOURCE_EVENT_TYPE } from '../utils/constant';
+import {
+    defaultPerformancePluginConfig,
+    PartialPerformancePluginConfig,
+    PerformancePluginConfig
+} from '../utils/performance-utils';
 
 export const RESOURCE_EVENT_PLUGIN_ID = 'resource';
 
 const RESOURCE = 'resource';
 const LOAD = 'load';
 
-export type PartialResourcePluginConfig = {
-    eventLimit?: number;
-    recordAllTypes?: ResourceType[];
-    sampleTypes?: ResourceType[];
-};
-
-export type ResourcePluginConfig = {
-    eventLimit: number;
-    recordAllTypes: ResourceType[];
-    sampleTypes: ResourceType[];
-};
-
-export const defaultConfig = {
-    eventLimit: 10,
-    recordAllTypes: [ResourceType.DOCUMENT, ResourceType.SCRIPT],
-    sampleTypes: [
-        ResourceType.STYLESHEET,
-        ResourceType.IMAGE,
-        ResourceType.FONT,
-        ResourceType.OTHER
-    ]
-};
-
 /**
  * This plugin records resource performance timing events generated during every page load/re-load.
  */
 export class ResourcePlugin extends InternalPlugin {
-    private config: ResourcePluginConfig;
+    private config: PerformancePluginConfig;
 
-    constructor(config?: PartialResourcePluginConfig) {
+    constructor(config?: PartialPerformancePluginConfig) {
         super(RESOURCE_EVENT_PLUGIN_ID);
-        this.config = { ...defaultConfig, ...config };
+        this.config = { ...defaultPerformancePluginConfig, ...config };
     }
 
     enable(): void {
@@ -72,6 +54,7 @@ export class ResourcePlugin extends InternalPlugin {
         const resourceObserver = new PerformanceObserver((list) => {
             list.getEntries()
                 .filter((e) => e.entryType === RESOURCE)
+                .filter((e) => !this.config.ignore(e))
                 .forEach((event) => {
                     // Out of n resource events, x events are recorded using Observer API
                     const type: ResourceType = getResourceFileType(event.name);
@@ -90,14 +73,16 @@ export class ResourcePlugin extends InternalPlugin {
         // Note: IE11 browser does not support Performance Observer API. Handle the failure gracefully
         const events = performance.getEntriesByType(RESOURCE);
         if (events !== undefined && events.length > 0) {
-            events.forEach((event) => {
-                const type: ResourceType = getResourceFileType(event.name);
-                if (this.config.recordAllTypes.includes(type)) {
-                    recordAll.push(event);
-                } else if (this.config.sampleTypes.includes(type)) {
-                    sample.push(event);
-                }
-            });
+            events
+                .filter((e) => !this.config.ignore(e))
+                .forEach((event) => {
+                    const type: ResourceType = getResourceFileType(event.name);
+                    if (this.config.recordAllTypes.includes(type)) {
+                        recordAll.push(event);
+                    } else if (this.config.sampleTypes.includes(type)) {
+                        sample.push(event);
+                    }
+                });
         }
 
         // Record events for resources in recordAllTypes

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

@@ -10,9 +10,10 @@ import {
 import { NavigationPlugin } from '../NavigationPlugin';
 import { context, record } from '../../../test-utils/test-utils';
 import { PERFORMANCE_NAVIGATION_EVENT_TYPE } from '../../utils/constant';
+import { PartialPerformancePluginConfig } from 'plugins/utils/performance-utils';
 
-const buildNavigationPlugin = () => {
-    return new NavigationPlugin();
+const buildNavigationPlugin = (config?: PartialPerformancePluginConfig) => {
+    return new NavigationPlugin(config);
 };
 
 describe('NavigationPlugin tests', () => {
@@ -105,6 +106,19 @@ describe('NavigationPlugin tests', () => {
         // Assert
         expect(record).toHaveBeenCalledTimes(0);
     });
+    test('when entry is ignored then level 2 navigation is not recorded', async () => {
+        // enables plugin by default
+        const plugin: NavigationPlugin = buildNavigationPlugin({
+            ignore: (event) => true
+        });
+
+        plugin.load(context);
+        window.dispatchEvent(new Event('load'));
+        plugin.disable();
+
+        // Assert
+        expect(record).not.toHaveBeenCalled();
+    });
 
     test('when window.load fires after plugin loads then navigation timing is recorded', async () => {
         // Setting up new mocked window that has not loaded

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

@@ -11,7 +11,7 @@ import {
     putRumEventsGammaDocument,
     dataPlaneDocument
 } from '../../../test-utils/mock-data';
-import { PartialResourcePluginConfig, ResourcePlugin } from '../ResourcePlugin';
+import { ResourcePlugin } from '../ResourcePlugin';
 import { mockRandom } from 'jest-mock-random';
 import {
     context,
@@ -23,8 +23,9 @@ import {
 import { PERFORMANCE_RESOURCE_EVENT_TYPE } from '../../utils/constant';
 import { ResourceEvent } from '../../../events/resource-event';
 import { PluginContext } from '../../types';
+import { PartialPerformancePluginConfig } from 'plugins/utils/performance-utils';
 
-const buildResourcePlugin = (config?: PartialResourcePluginConfig) => {
+const buildResourcePlugin = (config?: PartialPerformancePluginConfig) => {
     return new ResourcePlugin(config);
 };
 
@@ -250,4 +251,20 @@ describe('ResourcePlugin tests', () => {
             })
         );
     });
+
+    test('when entry is ignored then resource is not recorded', async () => {
+        // Setup
+        mockPerformanceObjectWithResources();
+        mockPerformanceObserver();
+        const plugin = buildResourcePlugin({
+            ignore: (entry: PerformanceEntry) => true
+        });
+
+        // Run
+        plugin.load(context);
+        window.dispatchEvent(new Event('load'));
+        plugin.disable();
+
+        expect(record).not.toHaveBeenCalled();
+    });
 });

src/plugins/utils/__tests__/performance-utils.test.ts

@@ -0,0 +1,39 @@
+import { defaultIgnore } from '../performance-utils';
+
+describe('performance-utils', () => {
+    describe('defaultPerformanceIgnore', () => {
+        test('when entry has a non-http URL schema then entry is ignored', async () => {
+            const mockEntry = {
+                name: 'chrome-extension://localhost',
+                entryType: 'resource'
+            } as PerformanceResourceTiming;
+            const result = defaultIgnore(mockEntry);
+            expect(result).toBe(true);
+        });
+        test('when entry is has an http URL schema then entry is not ignored', async () => {
+            const mockEntry = {
+                name: 'http://localhost',
+                entryType: 'resource'
+            } as PerformanceResourceTiming;
+            const result = defaultIgnore(mockEntry);
+            expect(result).toBe(false);
+        });
+        test('when entry is has an https URL schema then entry is not ignored', async () => {
+            const mockEntry = {
+                name: 'https://localhost',
+                entryType: 'resource'
+            } as PerformanceResourceTiming;
+            const result = defaultIgnore(mockEntry);
+            expect(result).toBe(false);
+        });
+
+        test('when entry is not PerformanceResourceTiming then the entry is not ignored', async () => {
+            const mockEntry = {
+                name: 'chrome-extension://localhost',
+                entryType: 'navigation'
+            } as PerformanceNavigationTiming;
+            const result = defaultIgnore(mockEntry);
+            expect(result).toBe(false);
+        });
+    });
+});

src/plugins/utils/performance-utils.ts

@@ -0,0 +1,30 @@
+import { ResourceType } from '../../utils/common-utils';
+
+export const defaultIgnore = (entry: PerformanceEntry) =>
+    entry.entryType === 'resource' && !/^https?:/.test(entry.name);
+
+export type PartialPerformancePluginConfig = {
+    eventLimit?: number;
+    ignore?: (event: PerformanceEntry) => any;
+    recordAllTypes?: ResourceType[];
+    sampleTypes?: ResourceType[];
+};
+
+export type PerformancePluginConfig = {
+    eventLimit: number;
+    ignore: (event: PerformanceEntry) => any;
+    recordAllTypes: ResourceType[];
+    sampleTypes: ResourceType[];
+};
+
+export const defaultPerformancePluginConfig = {
+    eventLimit: 10,
+    ignore: defaultIgnore,
+    recordAllTypes: [ResourceType.DOCUMENT, ResourceType.SCRIPT],
+    sampleTypes: [
+        ResourceType.STYLESHEET,
+        ResourceType.IMAGE,
+        ResourceType.FONT,
+        ResourceType.OTHER
+    ]
+};