feat(rum): report INP metric

.ci/scripts/test.sh

@@ -6,6 +6,11 @@ APM_SERVER_PORT=${APM_SERVER_PORT:-"8200"}
 APM_SERVER_URL=${APM_SERVER_URL:-"http://apm-server:8200"}
 KIBANA_URL=${KIBANA_URL:-"http://kibana:5601"}
 
+# As long as there are issues with the ssl lets use 6.1.3
+# see https://github.com/docker/docker-py/issues/3194
+pip3 uninstall docker
+pip3 install docker==6.1.3
+
 pip install docker-compose>=1.25.4
 
 # Tests are run within the node-puppeteer container and can fails.

dev-utils/test-config.js

@@ -172,7 +172,8 @@ function getBrowserList(pkg = 'default') {
       },
       {
         browserName: 'firefox',
-        browserVersion: 'latest',
+        // beware that if we update to 99 or more we will need to cope with https://github.com/karma-runner/karma-sauce-launcher/issues/275
+        browserVersion: '98',
         platformName: 'Windows 10',
         'sauce:options': {
           geckodriverVersion: '0.30.0' // reason: https://github.com/karma-runner/karma-sauce-launcher/issues/275

packages/rum-core/src/common/constants.js

@@ -74,6 +74,7 @@ const USER_INTERACTION = 'user-interaction'
 const HTTP_REQUEST_TYPE = 'http-request'
 const TEMPORARY_TYPE = 'temporary'
 const NAME_UNKNOWN = 'Unknown'
+const PAGE_EXIT = 'page-exit'
 
 const TRANSACTION_TYPE_ORDER = [
   PAGE_LOAD,
@@ -109,6 +110,7 @@ const TRANSACTION_END = 'transaction:end'
 const CONFIG_CHANGE = 'config:change'
 const QUEUE_FLUSH = 'queue:flush'
 const QUEUE_ADD_TRANSACTION = 'queue:add_transaction'
+const TRANSACTION_IGNORE = 'transaction:ignore'
 
 /**
  * Events types that are used to toggle auto instrumentations
@@ -144,6 +146,7 @@ const FIRST_CONTENTFUL_PAINT = 'first-contentful-paint'
 const LARGEST_CONTENTFUL_PAINT = 'largest-contentful-paint'
 const FIRST_INPUT = 'first-input'
 const LAYOUT_SHIFT = 'layout-shift'
+const EVENT = 'event'
 
 /**
  * Event types sent to APM Server on the queue
@@ -193,13 +196,15 @@ export {
   PAGE_LOAD,
   ROUTE_CHANGE,
   NAME_UNKNOWN,
+  PAGE_EXIT,
   TYPE_CUSTOM,
   USER_TIMING_THRESHOLD,
   TRANSACTION_START,
   TRANSACTION_END,
   CONFIG_CHANGE,
   QUEUE_FLUSH,
   QUEUE_ADD_TRANSACTION,
+  TRANSACTION_IGNORE,
   XMLHTTPREQUEST,
   FETCH,
   HISTORY,
@@ -232,6 +237,7 @@ export {
   TRUNCATED_TYPE,
   FIRST_INPUT,
   LAYOUT_SHIFT,
+  EVENT,
   OUTCOME_SUCCESS,
   OUTCOME_FAILURE,
   OUTCOME_UNKNOWN,

packages/rum-core/src/common/context.js

@@ -24,7 +24,7 @@
  */
 
 import { Url } from './url'
-import { PAGE_LOAD, NAVIGATION } from './constants'
+import { PAGE_LOAD, PAGE_EXIT, NAVIGATION } from './constants'
 import { getServerTimingInfo, PERF, isPerfTimelineSupported } from './utils'
 
 const LEFT_SQUARE_BRACKET = 91 // [
@@ -186,7 +186,13 @@ export function addTransactionContext(
 ) {
   const pageContext = getPageContext()
   let responseContext = {}
-  if (transaction.type === PAGE_LOAD && isPerfTimelineSupported()) {
+
+  if (transaction.type === PAGE_EXIT) {
+    transaction.ensureContext()
+    if (transaction.context.page && transaction.context.page.url) {
+      pageContext.page.url = transaction.context.page.url
+    }
+  } else if (transaction.type === PAGE_LOAD && isPerfTimelineSupported()) {
     let entries = PERF.getEntriesByType(NAVIGATION)
     if (entries && entries.length > 0) {
       responseContext = {

packages/rum-core/src/common/observers/page-visibility.js

@@ -23,9 +23,14 @@
  *
  */
 
-import { QUEUE_ADD_TRANSACTION, QUEUE_FLUSH } from '../constants'
+import {
+  QUEUE_ADD_TRANSACTION,
+  QUEUE_FLUSH,
+  TRANSACTION_IGNORE
+} from '../constants'
 import { state } from '../../state'
 import { now } from '../utils'
+import { reportInp } from '../../performance-monitoring/metrics/inp/report'
 
 /**
  * @param configService
@@ -70,22 +75,60 @@ export function observePageVisibility(configService, transactionService) {
 }
 
 /**
- * Ends an ongoing transaction if any and flushes the events queue
+ * Executes when page becomes hidden
  * @param configService
  * @param transactionService
  */
 function onPageHidden(configService, transactionService) {
-  const tr = transactionService.getCurrentTransaction()
-  if (tr) {
+  const inpTr = reportInp(transactionService)
+  // we don't want to flush the queue for every transaction that is ended when page becomes hidden
+  // as transaction ends are scheduled async as microtasks(promise),
+  // so we are coordinating the flushing process
+  if (inpTr) {
     const unobserve = configService.observeEvent(QUEUE_ADD_TRANSACTION, () => {
-      configService.dispatchEvent(QUEUE_FLUSH)
-      state.lastHiddenStart = now()
-
-      // unsubscribe listener to execute it only once.
-      // otherwise in SPAs we might be finding situations where we would be executing
-      // this logic as many times as we observed to this event
+      // At this point the INP transaction is in the queue
+      // so let's end the managed transaction if any and flush
+      endManagedTransaction(configService, transactionService)
       unobserve()
     })
+  } else {
+    // In the absence of INP transaction
+    // let's just end the managed transaction if any and flush
+    endManagedTransaction(configService, transactionService)
+  }
+}
+
+// Ends an ongoing managed transaction if any and flushes the events queue
+function endManagedTransaction(configService, transactionService) {
+  const tr = transactionService.getCurrentTransaction()
+  if (tr) {
+    // Make sure that we still update lastHiddenStart if the managed transaction
+    // ends up being discarded
+    const unobserveDiscard = configService.observeEvent(
+      TRANSACTION_IGNORE,
+      () => {
+        state.lastHiddenStart = now()
+
+        // unsubscribe listeners to execute it only once.
+        // otherwise in SPAs we might be finding situations where we would be executing
+        // this logic as many times as we observed to this event
+        unobserveDiscard()
+        unobserveQueueAdd()
+      }
+    )
+    const unobserveQueueAdd = configService.observeEvent(
+      QUEUE_ADD_TRANSACTION,
+      () => {
+        configService.dispatchEvent(QUEUE_FLUSH)
+        state.lastHiddenStart = now()
+
+        // unsubscribe listeners to execute it only once.
+        // otherwise in SPAs we might be finding situations where we would be executing
+        // this logic as many times as we observed to this event
+        unobserveQueueAdd()
+        unobserveDiscard()
+      }
+    )
 
     tr.end()
   } else {

packages/rum-core/src/common/utils.js

@@ -401,6 +401,10 @@ function isPerfTypeSupported(type) {
   )
 }
 
+function isPerfInteractionCountSupported() {
+  return 'interactionCount' in performance
+}
+
 /**
  * The goal of this is to make sure that HAR files
  * can be created containing beacons with the payload readable
@@ -475,6 +479,7 @@ export {
   isPerfTimelineSupported,
   isBrowser,
   isPerfTypeSupported,
+  isPerfInteractionCountSupported,
   isBeaconInspectionEnabled,
   isRedirectInfoAvailable
 }

packages/rum-core/src/index.js

@@ -26,7 +26,10 @@
 // export public core APIs.
 
 import { registerServices as registerErrorServices } from './error-logging'
-import { registerServices as registerPerfServices } from './performance-monitoring'
+import {
+  registerServices as registerPerfServices,
+  observeUserInteractions
+} from './performance-monitoring'
 import { ServiceFactory } from './common/service-factory'
 import {
   isPlatformSupported,
@@ -84,6 +87,7 @@ export {
   ERROR_LOGGING,
   EVENT_TARGET,
   CLICK,
+  observeUserInteractions,
   bootstrap,
   observePageVisibility,
   observePageClicks

packages/rum-core/src/performance-monitoring/index.js

@@ -34,6 +34,8 @@ import {
 } from '../common/constants'
 
 import { serviceCreators } from '../common/service-factory'
+import { observeUserInteractions } from './metrics/inp/process'
+import { reportInp } from './metrics/inp/report'
 
 function registerServices() {
   serviceCreators[TRANSACTION_SERVICE] = serviceFactory => {
@@ -65,4 +67,4 @@ function registerServices() {
   }
 }
 
-export { registerServices }
+export { registerServices, observeUserInteractions, reportInp }