@kubesense/kubesense-browser-rum-core 1.8.0 → 2.0.0-beta.1

package/src/domain/action/getActionNameFromElement.ts

@@ -1,9 +1,9 @@
-import { ExperimentalFeature, isExperimentalFeatureEnabled, safeTruncate } from '@kubesense/kubesense-browser-core'
-import { getPrivacySelector, NodePrivacyLevel } from '../privacyConstants'
+import { safeTruncate } from '@kubesense/kubesense-browser-core'
+import { NodePrivacyLevel } from '../privacyConstants'
 import { getNodePrivacyLevel, maskDisallowedTextContent, shouldMaskNode, shouldMaskAttribute } from '../privacy'
 import type { NodePrivacyLevelCache } from '../privacy'
 import type { RumConfiguration } from '../configuration'
-import { isElementNode } from '../../browser/htmlDomUtils'
+import { isElementNode, getParentElement } from '../../browser/htmlDomUtils'
 import {
   ActionNameSource,
   DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE,
@@ -49,7 +49,7 @@ export function getActionNameFromElement(
 function getActionNameFromElementProgrammatically(targetElement: Element, programmaticAttribute: string) {
   // We don't use getActionNameFromElementForStrategies here, because we want to consider all parents,
   // without limit. It is up to the user to declare a relevant naming strategy.
-  const elementWithAttribute = targetElement.closest(`[${programmaticAttribute}]`)
+  const elementWithAttribute = closestShadowAware(targetElement, `[${programmaticAttribute}]`)
 
   if (!elementWithAttribute) {
     return
@@ -58,6 +58,17 @@ function getActionNameFromElementProgrammatically(targetElement: Element, progra
   return truncate(normalizeWhitespace(name.trim()))
 }
 
+function closestShadowAware(element: Element, selector: string): Element | null {
+  let current: Element | null = element
+  while (current) {
+    if (current.matches(selector)) {
+      return current
+    }
+    current = getParentElement(current)
+  }
+  return null
+}
+
 type NameStrategy = (
   element: Element | HTMLElement | HTMLInputElement | HTMLSelectElement,
   rumConfiguration: RumConfiguration,
@@ -149,7 +160,7 @@ function getActionNameFromElementForStrategies(
       const actionName = strategy(element, rumConfiguration, nodePrivacyLevelCache)
       if (actionName) {
         const { name, nameSource } = actionName
-        const trimmedName = name && name.trim()
+        const trimmedName = name?.trim()
         if (trimmedName) {
           return { name: truncate(normalizeWhitespace(trimmedName)), nameSource }
         }
@@ -160,7 +171,7 @@ function getActionNameFromElementForStrategies(
     if (element.nodeName === 'FORM') {
       break
     }
-    element = element.parentElement
+    element = getParentElement(element)
     recursionCounter += 1
   }
 }
@@ -173,7 +184,15 @@ function truncate(s: string) {
   return s.length > 100 ? `${safeTruncate(s, 100)} [...]` : s
 }
 
-function getElementById(refElement: Element, id: string) {
+function getElementById(refElement: Element, id: string): HTMLElement | null {
+  const rootNode = refElement.getRootNode()
+  if (rootNode instanceof ShadowRoot) {
+    const shadowElement = rootNode.getElementById(id)
+    if (shadowElement) {
+      return shadowElement
+    }
+  }
+
   // Use the element ownerDocument here, because tests are executed in an iframe, so
   // document.getElementById won't work.
   return refElement.ownerDocument ? refElement.ownerDocument.getElementById(id) : null
@@ -228,59 +247,6 @@ function getTextualContent(
     defaultPrivacyLevel,
   } = rumConfiguration
 
-  if (isExperimentalFeatureEnabled(ExperimentalFeature.USE_TREE_WALKER_FOR_ACTION_NAME)) {
-    return getTextualContentWithTreeWalker(
-      element,
-      userProgrammaticAttribute,
-      enablePrivacyForActionName,
-      defaultPrivacyLevel,
-      nodePrivacyLevelCache
-    )
-  }
-
-  if ('innerText' in element) {
-    let text = (element as HTMLElement).innerText
-
-    const removeTextFromElements = (query: string) => {
-      const list = element.querySelectorAll<Element | HTMLElement>(query)
-      for (let index = 0; index < list.length; index += 1) {
-        const element = list[index]
-        if ('innerText' in element) {
-          const textToReplace = element.innerText
-          if (textToReplace && textToReplace.trim().length > 0) {
-            text = text.replace(textToReplace, '')
-          }
-        }
-      }
-    }
-
-    // remove the text of elements with programmatic attribute value
-    removeTextFromElements(`[${DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE}]`)
-
-    if (userProgrammaticAttribute) {
-      removeTextFromElements(`[${userProgrammaticAttribute}]`)
-    }
-
-    if (enablePrivacyForActionName) {
-      // remove the text of elements with privacy override
-      removeTextFromElements(
-        `${getPrivacySelector(NodePrivacyLevel.HIDDEN)}, ${getPrivacySelector(NodePrivacyLevel.MASK)}`
-      )
-    }
-
-    return text
-  }
-
-  return element.textContent
-}
-
-function getTextualContentWithTreeWalker(
-  element: Element,
-  userProgrammaticAttribute: string | undefined,
-  privacyEnabledActionName: boolean,
-  defaultPrivacyLevel: NodePrivacyLevel,
-  nodePrivacyLevelCache: NodePrivacyLevelCache
-) {
   const walker = document.createTreeWalker(
     element,
     // eslint-disable-next-line no-bitwise
@@ -311,7 +277,7 @@ function getTextualContentWithTreeWalker(
 
   function rejectInvisibleOrMaskedElementsFilter(node: Node) {
     const nodeSelfPrivacyLevel = getNodePrivacyLevel(node, defaultPrivacyLevel, nodePrivacyLevelCache)
-    if (privacyEnabledActionName && nodeSelfPrivacyLevel && shouldMaskNode(node, nodeSelfPrivacyLevel)) {
+    if (enablePrivacyForActionName && nodeSelfPrivacyLevel && shouldMaskNode(node, nodeSelfPrivacyLevel)) {
       return NodeFilter.FILTER_REJECT
     }
     if (isElementNode(node)) {

package/src/domain/action/interactionSelectorCache.ts

@@ -1,5 +1,5 @@
-import { elapsed, ONE_SECOND, relativeNow } from '@kubesense/kubesense-browser-core'
-import type { RelativeTime } from '@kubesense/kubesense-browser-core'
+import { relativeNow, ONE_SECOND, elapsed } from '@kubesense/kubesense-js-core/time'
+import type { RelativeTime } from '@kubesense/kubesense-js-core/time'
 
 // Maximum duration for click actions
 export const CLICK_ACTION_MAX_DURATION = 10 * ONE_SECOND

package/src/domain/action/isActionChildEvent.ts

@@ -0,0 +1,6 @@
+import type { RumActionEvent, RumErrorEvent, RumLongTaskEvent, RumResourceEvent } from '../../rumEvent.types'
+
+export function isActionChildEvent(id: string) {
+  return (event: RumActionEvent | RumErrorEvent | RumLongTaskEvent | RumResourceEvent) =>
+    event.action?.id?.includes(id) ?? false
+}

package/src/domain/action/listenActionEvents.ts

@@ -1,6 +1,5 @@
 import { addEventListener, DOM_EVENT } from '@kubesense/kubesense-browser-core'
-import type { RelativeTime } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../configuration'
+import type { RelativeTime } from '@kubesense/kubesense-js-core/time'
 
 export interface ExtraPointerEventFields {
   target: Element
@@ -18,10 +17,7 @@ export interface ActionEventsHooks<ClickContext> {
   onPointerUp: (context: ClickContext, event: MouseEventOnElement, getUserActivity: () => UserActivity) => void
 }
 
-export function listenActionEvents<ClickContext>(
-  configuration: RumConfiguration,
-  { onPointerDown, onPointerUp }: ActionEventsHooks<ClickContext>
-) {
+export function listenActionEvents<ClickContext>({ onPointerDown, onPointerUp }: ActionEventsHooks<ClickContext>) {
   let selectionEmptyAtPointerDown: boolean
   let userActivity: UserActivity = {
     selection: false,
@@ -32,7 +28,6 @@ export function listenActionEvents<ClickContext>(
 
   const listeners = [
     addEventListener(
-      configuration,
       window,
       DOM_EVENT.POINTER_DOWN,
       (event: PointerEvent) => {
@@ -50,7 +45,6 @@ export function listenActionEvents<ClickContext>(
     ),
 
     addEventListener(
-      configuration,
       window,
       DOM_EVENT.SELECTION_CHANGE,
       () => {
@@ -62,7 +56,6 @@ export function listenActionEvents<ClickContext>(
     ),
 
     addEventListener(
-      configuration,
       window,
       DOM_EVENT.SCROLL,
       () => {
@@ -72,7 +65,6 @@ export function listenActionEvents<ClickContext>(
     ),
 
     addEventListener(
-      configuration,
       window,
       DOM_EVENT.POINTER_UP,
       (event: PointerEvent) => {
@@ -87,7 +79,6 @@ export function listenActionEvents<ClickContext>(
     ),
 
     addEventListener(
-      configuration,
       window,
       DOM_EVENT.INPUT,
       () => {

package/src/domain/action/trackClickActions.ts

@@ -1,35 +1,31 @@
-import type { Duration, ClocksState, RelativeTime, TimeStamp, ValueHistory } from '@kubesense/kubesense-browser-core'
-import {
-  timeStampNow,
-  Observable,
-  getRelativeTime,
-  ONE_MINUTE,
-  generateUUID,
-  clocksNow,
-  elapsed,
-  createValueHistory,
-  PageExitReason,
-  relativeToClocks,
-} from '@kubesense/kubesense-browser-core'
+import type { ClocksState, Duration, TimeStamp } from '@kubesense/kubesense-js-core/time'
+import { timeStampNow, timeStampToClocks, relativeToClocks } from '@kubesense/kubesense-js-core/time'
+import { Observable, generateUUID } from '@kubesense/kubesense-browser-core'
+import { isNodeShadowHost } from '../../browser/htmlDomUtils'
 import type { FrustrationType } from '../../rawRumEvent.types'
 import { ActionType } from '../../rawRumEvent.types'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
-import { trackEventCounts } from '../trackEventCounts'
 import { PAGE_ACTIVITY_VALIDATION_DELAY, waitPageActivityEnd } from '../waitPageActivityEnd'
 import { getSelectorFromElement } from '../getSelectorFromElement'
 import { getNodePrivacyLevel } from '../privacy'
 import { NodePrivacyLevel } from '../privacyConstants'
 import type { RumConfiguration } from '../configuration'
 import type { RumMutationRecord } from '../../browser/domMutationObservable'
+import { startEventTracker } from '../eventTracker'
+import type { StoppedEvent, DiscardedEvent, EventTracker } from '../eventTracker'
+import { getComposedPathSelector } from '../getComposedPathSelector'
 import type { ClickChain } from './clickChain'
 import { createClickChain } from './clickChain'
 import { getActionNameFromElement } from './getActionNameFromElement'
+import type { FrustrationIgnore } from './frustrationIgnore'
+import { getFrustrationIgnore } from './frustrationIgnore'
 import type { ActionNameSource } from './actionNameConstants'
 import type { MouseEventOnElement, UserActivity } from './listenActionEvents'
 import { listenActionEvents } from './listenActionEvents'
 import { computeFrustration } from './computeFrustration'
 import { CLICK_ACTION_MAX_DURATION, updateInteractionSelector } from './interactionSelectorCache'
+import { isActionChildEvent } from './isActionChildEvent'
 
 interface ActionCounts {
   errorCount: number
@@ -44,6 +40,7 @@ export interface ClickAction {
   nameSource: ActionNameSource
   target?: {
     selector: string | undefined
+    composedPathSelector?: string
     width: number
     height: number
   }
@@ -56,51 +53,37 @@ export interface ClickAction {
   events: Event[]
 }
 
-export interface ActionContexts {
-  findActionId: (startTime?: RelativeTime) => string | string[] | undefined
-}
-
-type ClickActionIdHistory = ValueHistory<ClickAction['id']>
-
-export const ACTION_CONTEXT_TIME_OUT_DELAY = 5 * ONE_MINUTE // arbitrary
-
 export function trackClickActions(
   lifeCycle: LifeCycle,
   domMutationObservable: Observable<RumMutationRecord[]>,
   windowOpenObservable: Observable<void>,
   configuration: RumConfiguration
 ) {
-  const history: ClickActionIdHistory = createValueHistory({ expireDelay: ACTION_CONTEXT_TIME_OUT_DELAY })
+  const actionTracker = startEventTracker<ClickActionBase>(lifeCycle)
   const stopObservable = new Observable<void>()
   let currentClickChain: ClickChain | undefined
 
-  lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, () => {
-    history.reset()
-  })
-
   lifeCycle.subscribe(LifeCycleEventType.VIEW_ENDED, stopClickChain)
-  lifeCycle.subscribe(LifeCycleEventType.PAGE_MAY_EXIT, (event) => {
-    if (event.reason === PageExitReason.UNLOADING) {
-      stopClickChain()
-    }
-  })
+  lifeCycle.subscribe(LifeCycleEventType.PREPARE_URGENT_FLUSH, stopClickChain)
 
   const { stop: stopActionEventsListener } = listenActionEvents<{
     clickActionBase: ClickActionBase
+    ignore: FrustrationIgnore
     hadActivityOnPointerDown: () => boolean
-  }>(configuration, {
+  }>({
     onPointerDown: (pointerDownEvent) =>
       processPointerDown(configuration, lifeCycle, domMutationObservable, pointerDownEvent, windowOpenObservable),
-    onPointerUp: ({ clickActionBase, hadActivityOnPointerDown }, startEvent, getUserActivity) => {
+    onPointerUp: ({ clickActionBase, ignore, hadActivityOnPointerDown }, startEvent, getUserActivity) => {
       startClickAction(
         configuration,
         lifeCycle,
         domMutationObservable,
         windowOpenObservable,
-        history,
+        actionTracker,
         stopObservable,
         appendClickToClickChain,
         clickActionBase,
+        ignore,
         startEvent,
         getUserActivity,
         hadActivityOnPointerDown
@@ -108,29 +91,30 @@ export function trackClickActions(
     },
   })
 
-  const actionContexts: ActionContexts = {
-    findActionId: (startTime?: RelativeTime) => history.findAll(startTime),
-  }
-
   return {
     stop: () => {
       stopClickChain()
       stopObservable.notify()
       stopActionEventsListener()
+      actionTracker.stopAll()
     },
-    actionContexts,
+    findActionId: actionTracker.findId,
   }
 
   function appendClickToClickChain(click: Click) {
-    if (!currentClickChain || !currentClickChain.tryAppend(click)) {
+    if (!currentClickChain?.tryAppend(click)) {
       const rageClick = click.clone()
-      currentClickChain = createClickChain(click, (clicks) => {
+      const clickChain = createClickChain(click, (clicks) => {
         finalizeClicks(clicks, rageClick)
         // Clear the reference to allow garbage collection. Without this, the finalize callback
         // retains a closure reference to the old click chain, preventing it from being cleaned up
         // and causing a memory leak as click chains accumulate over time.
-        currentClickChain = undefined
+        // Only clear it if no newer chain has replaced it.
+        if (currentClickChain === clickChain) {
+          currentClickChain = undefined
+        }
       })
+      currentClickChain = clickChain
     }
   }
 
@@ -151,7 +135,7 @@ function processPointerDown(
   let nodePrivacyLevel: NodePrivacyLevel
 
   if (configuration.enablePrivacyForActionName) {
-    nodePrivacyLevel = getNodePrivacyLevel(pointerDownEvent.target, configuration.defaultPrivacyLevel)
+    nodePrivacyLevel = getNodePrivacyLevel(getEventTarget(pointerDownEvent), configuration.defaultPrivacyLevel)
   } else {
     nodePrivacyLevel = NodePrivacyLevel.ALLOW
   }
@@ -177,7 +161,11 @@ function processPointerDown(
     PAGE_ACTIVITY_VALIDATION_DELAY
   )
 
-  return { clickActionBase, hadActivityOnPointerDown: () => hadActivityOnPointerDown }
+  return {
+    clickActionBase,
+    ignore: getFrustrationIgnore(getEventTarget(pointerDownEvent)),
+    hadActivityOnPointerDown: () => hadActivityOnPointerDown,
+  }
 }
 
 function startClickAction(
@@ -185,15 +173,16 @@ function startClickAction(
   lifeCycle: LifeCycle,
   domMutationObservable: Observable<RumMutationRecord[]>,
   windowOpenObservable: Observable<void>,
-  history: ClickActionIdHistory,
+  actionTracker: EventTracker<ClickActionBase>,
   stopObservable: Observable<void>,
   appendClickToClickChain: (click: Click) => void,
   clickActionBase: ClickActionBase,
+  ignore: FrustrationIgnore,
   startEvent: MouseEventOnElement,
   getUserActivity: () => UserActivity,
   hadActivityOnPointerDown: () => boolean
 ) {
-  const click = newClick(lifeCycle, history, getUserActivity, clickActionBase, startEvent)
+  const click = newClick(lifeCycle, actionTracker, getUserActivity, clickActionBase, ignore, startEvent)
   appendClickToClickChain(click)
 
   const selector = clickActionBase?.target?.selector
@@ -231,31 +220,41 @@ function startClickAction(
     click.stop(endClocks.timeStamp)
   })
 
+  const pageMayExitSubscription = lifeCycle.subscribe(LifeCycleEventType.PREPARE_URGENT_FLUSH, () => {
+    click.stop(timeStampNow())
+  })
+
   const stopSubscription = stopObservable.subscribe(() => {
     click.stop()
   })
 
   click.stopObservable.subscribe(() => {
+    pageMayExitSubscription.unsubscribe()
     viewEndedSubscription.unsubscribe()
     stopWaitPageActivityEnd()
     stopSubscription.unsubscribe()
   })
 }
 
-type ClickActionBase = Pick<ClickAction, 'type' | 'name' | 'nameSource' | 'target' | 'position'>
+export type ClickActionBase = Pick<ClickAction, 'type' | 'name' | 'nameSource' | 'target' | 'position'>
 
 function computeClickActionBase(
   event: MouseEventOnElement,
   nodePrivacyLevel: NodePrivacyLevel,
   configuration: RumConfiguration
 ): ClickActionBase {
-  const rect = event.target.getBoundingClientRect()
-  const selector = getSelectorFromElement(event.target, configuration.actionNameAttribute)
+  const target = getEventTarget(event)
+
+  const rect = target.getBoundingClientRect()
+  const selector = getSelectorFromElement(target, configuration.actionNameAttribute)
+
+  const composedPathSelector = getComposedPathSelector(event.composedPath(), configuration.actionNameAttribute)
+
   if (selector) {
     updateInteractionSelector(event.timeStamp, selector)
   }
 
-  const { name, nameSource } = getActionNameFromElement(event.target, configuration, nodePrivacyLevel)
+  const { name, nameSource } = getActionNameFromElement(target, configuration, nodePrivacyLevel)
 
   return {
     type: ActionType.CLICK,
@@ -263,6 +262,7 @@ function computeClickActionBase(
       width: Math.round(rect.width),
       height: Math.round(rect.height),
       selector,
+      composedPathSelector: composedPathSelector || undefined,
     },
     position: {
       // Use clientX and Y because for SVG element offsetX and Y are relatives to the <svg> element
@@ -274,6 +274,16 @@ function computeClickActionBase(
   }
 }
 
+function getEventTarget(event: MouseEventOnElement): Element {
+  if (event.composed && isNodeShadowHost(event.target) && typeof event.composedPath === 'function') {
+    const composedPath = event.composedPath()
+    if (composedPath.length > 0 && composedPath[0] instanceof Element) {
+      return composedPath[0]
+    }
+  }
+  return event.target
+}
+
 const enum ClickStatus {
   // Initial state, the click is still ongoing.
   ONGOING,
@@ -287,60 +297,64 @@ export type Click = ReturnType<typeof newClick>
 
 function newClick(
   lifeCycle: LifeCycle,
-  history: ClickActionIdHistory,
+  actionTracker: EventTracker<ClickActionBase>,
   getUserActivity: () => UserActivity,
   clickActionBase: ClickActionBase,
+  ignore: FrustrationIgnore,
   startEvent: MouseEventOnElement
 ) {
-  const id = generateUUID()
+  const clickKey = generateUUID()
   const startClocks = relativeToClocks(startEvent.timeStamp)
-  const historyEntry = history.add(id, startClocks.relative)
-  const eventCountsSubscription = trackEventCounts({
-    lifeCycle,
-    isChildEvent: (event) =>
-      event.action !== undefined &&
-      (Array.isArray(event.action.id) ? event.action.id.includes(id) : event.action.id === id),
+
+  const startedClickAction = actionTracker.start(clickKey, startClocks, clickActionBase, {
+    isChildEvent: isActionChildEvent,
   })
+
+  lifeCycle.notify(LifeCycleEventType.ACTION_STARTED, startedClickAction)
+
   let status = ClickStatus.ONGOING
-  let activityEndTime: undefined | TimeStamp
+  let actionTrackerFinishedEvent: StoppedEvent<ClickActionBase> | DiscardedEvent<ClickActionBase> | undefined
   const frustrationTypes: FrustrationType[] = []
   const stopObservable = new Observable<void>()
 
-  function stop(newActivityEndTime?: TimeStamp) {
+  function stop(activityEndTime?: TimeStamp) {
     if (status !== ClickStatus.ONGOING) {
       return
     }
-    activityEndTime = newActivityEndTime
+
     status = ClickStatus.STOPPED
-    if (activityEndTime) {
-      historyEntry.close(getRelativeTime(activityEndTime))
-    } else {
-      historyEntry.remove()
-    }
-    eventCountsSubscription.stop()
+
+    actionTrackerFinishedEvent = activityEndTime
+      ? actionTracker.stop(clickKey, timeStampToClocks(activityEndTime))
+      : actionTracker.discard(clickKey)
+
     stopObservable.notify()
   }
 
   return {
     event: startEvent,
+    ignore,
     stop,
     stopObservable,
 
     get hasError() {
-      return eventCountsSubscription.eventCounts.errorCount > 0
+      const currentCounts = actionTrackerFinishedEvent?.counts ?? actionTracker.getCounts(clickKey)
+      return currentCounts ? currentCounts.errorCount > 0 : false
     },
     get hasPageActivity() {
-      return activityEndTime !== undefined
+      return actionTrackerFinishedEvent && 'duration' in actionTrackerFinishedEvent
     },
     getUserActivity,
     addFrustration: (frustrationType: FrustrationType) => {
       frustrationTypes.push(frustrationType)
     },
-    startClocks,
+    get startClocks() {
+      return startClocks
+    },
 
     isStopped: () => status === ClickStatus.STOPPED || status === ClickStatus.FINALIZED,
 
-    clone: () => newClick(lifeCycle, history, getUserActivity, clickActionBase, startEvent),
+    clone: () => newClick(lifeCycle, actionTracker, getUserActivity, clickActionBase, ignore, startEvent),
 
     validate: (domEvents?: Event[]) => {
       stop()
@@ -348,20 +362,16 @@ function newClick(
         return
       }
 
-      const { resourceCount, errorCount, longTaskCount } = eventCountsSubscription.eventCounts
+      if (!actionTrackerFinishedEvent) {
+        return
+      }
+
       const clickAction: ClickAction = {
-        duration: activityEndTime && elapsed(startClocks.timeStamp, activityEndTime),
-        startClocks,
-        id,
         frustrationTypes,
-        counts: {
-          resourceCount,
-          errorCount,
-          longTaskCount,
-        },
         events: domEvents ?? [startEvent],
         event: startEvent,
-        ...clickActionBase,
+        ...actionTrackerFinishedEvent,
+        counts: actionTrackerFinishedEvent.counts!, // This is needed to satisfy the type checker
       }
 
       lifeCycle.notify(LifeCycleEventType.AUTO_ACTION_COMPLETED, clickAction)