feat: record INP (#620)

Author: williazz

docs/configuration.md

@@ -189,6 +189,11 @@ 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. |
+| reportAllINP | boolean | `false` | If true, then all increases to INP are recorded. |
 
 For example, the following telemetry config array causes the web client to ignore all resource entries.
 
@@ -197,12 +202,14 @@ telemetries: [
     [
         'errors',
         'http',
-        'performance',
-        {
-            ignore: (entry: PerformanceEntry) => {
-                return entry.entryType === 'resource';
+        [
+            'performance',
+            {
+                ignore: (entry: PerformanceEntry) => {
+                    return entry.entryType === 'resource';
+                }
             }
-        }
+        ]
     ]
 ];
 ```

package-lock.json

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

package.json

@@ -1,4 +1,4 @@
-import { SESSION_START_EVENT_TYPE } from '../sessions/SessionManager';
+import { SESSION_START_EVENT_TYPE } from '../plugins/utils/constant';
 import { Selector } from 'testcafe';
 import { REQUEST_BODY } from '../test-utils/integ-test-utils';
 

src/__integ__/cookiesDisabled.test.ts

@@ -1,4 +1,4 @@
-import { SESSION_START_EVENT_TYPE } from '../sessions/SessionManager';
+import { SESSION_START_EVENT_TYPE } from '../plugins/utils/constant';
 import { Selector } from 'testcafe';
 import { REQUEST_BODY } from '../test-utils/integ-test-utils';
 

src/__integ__/cookiesEnabled.test.ts

@@ -161,15 +161,15 @@ export class Dispatch {
 
     private flushSync: EventListener = () => {
         if (document.visibilityState === 'hidden') {
-            if (this.doRequest()) {
+            if (this.doRequest(true)) {
                 let flush = this.rum.sendBeacon;
                 let backup = this.rum.sendFetch;
 
                 if (!this.config.useBeacon) {
                     [flush, backup] = [backup, flush];
                 }
 
-                const req = this.createRequest();
+                const req = this.createRequest(true);
                 flush(req)
                     .catch(() => backup(req))
                     .catch(() => {
@@ -224,16 +224,24 @@ export class Dispatch {
         }
     }
 
-    private doRequest(): boolean {
-        return this.enabled && this.eventCache.hasEvents();
+    private doRequest(flushCandidates = false): boolean {
+        if (!this.enabled) {
+            return false;
+        }
+
+        if (flushCandidates && this.eventCache.hasCandidates()) {
+            return true;
+        }
+
+        return this.eventCache.hasEvents();
     }
 
-    private createRequest(): PutRumEventsRequest {
+    private createRequest(flushCandidates = false): PutRumEventsRequest {
         return {
             BatchId: v4(),
             AppMonitorDetails: this.eventCache.getAppMonitorDetails(),
             UserDetails: this.eventCache.getUserDetails(),
-            RumEvents: this.eventCache.getEventBatch(),
+            RumEvents: this.eventCache.getEventBatch(flushCandidates),
             Alias: this.config.alias
         };
     }

src/dispatch/Dispatch.ts

@@ -371,7 +371,6 @@ describe('DataPlaneClient tests', () => {
         const signedRequest: HttpRequest = (
             fetchHandler.mock.calls[0] as any
         )[0];
-        console.log('signedRequest :>> ', signedRequest);
         expect(signedRequest.headers['Authorization']).toEqual(
             headers['Authorization']
         );