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

package/src/browser/performanceObservable.ts

@@ -1,8 +1,8 @@
-import type { Duration, RelativeTime, TimeoutId } from '@kubesense/kubesense-browser-core'
-import { addEventListener, Observable, setTimeout, clearTimeout, monitor } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../domain/configuration'
+import type { RelativeTime, Duration } from '@kubesense/kubesense-js-core/time'
+import type { TimeoutId } from '@kubesense/kubesense-browser-core'
+import { monitor } from '@kubesense/kubesense-js-core/monitor'
+import { addEventListener, Observable, setTimeout, clearTimeout } from '@kubesense/kubesense-browser-core'
 import { hasValidResourceEntryDuration, isAllowedRequestUrl } from '../domain/resource/resourceUtils'
-import { retrieveFirstInputTiming } from './firstInputPolyfill'
 
 type RumPerformanceObserverConstructor = new (callback: PerformanceObserverCallback) => RumPerformanceObserver
 
@@ -63,8 +63,8 @@ export interface RumPerformanceResourceTiming {
   transferSize?: number
   nextHopProtocol?: string
   renderBlockingStatus?: string
-  traceId?: string
   deliveryType?: 'cache' | 'navigational-prefetch' | ''
+  contentType?: string
   toJSON(): Omit<PerformanceEntry, 'toJSON'>
 }
 
@@ -143,12 +143,7 @@ export interface RumPerformanceScriptTiming {
   forcedStyleAndLayoutDuration: Duration
   invoker: string // e.g. "https://static.kubesense.ai/static/c/93085/chunk-bc4db53278fd4c77a637.min.js"
   invokerType:
-    | 'user-callback'
-    | 'event-listener'
-    | 'resolve-promise'
-    | 'reject-promise'
-    | 'classic-script'
-    | 'module-script'
+    'user-callback' | 'event-listener' | 'resolve-promise' | 'reject-promise' | 'classic-script' | 'module-script'
   name: 'script'
   pauseDuration: Duration
   sourceCharPosition: number
@@ -204,15 +199,12 @@ export interface EntryTypeToReturnType {
   [RumPerformanceEntryType.VISIBILITY_STATE]: RumFirstHiddenTiming
 }
 
-export function createPerformanceObservable<T extends RumPerformanceEntryType>(
-  configuration: RumConfiguration,
-  options: { type: T; buffered?: boolean; durationThreshold?: number }
-) {
+export function createPerformanceObservable<T extends RumPerformanceEntryType>(options: {
+  type: T
+  buffered?: boolean
+  durationThreshold?: number
+}) {
   return new Observable<Array<EntryTypeToReturnType[T]>>((observable) => {
-    if (!window.PerformanceObserver) {
-      return
-    }
-
     const handlePerformanceEntries = (entries: PerformanceEntryList) => {
       const rumPerformanceEntries = filterRumPerformanceEntries(entries as Array<EntryTypeToReturnType[T]>)
       if (rumPerformanceEntries.length > 0) {
@@ -233,70 +225,32 @@ export function createPerformanceObservable<T extends RumPerformanceEntryType>(
         }
       })
     )
-    try {
-      observer.observe(options)
-    } catch {
-      // Some old browser versions (<= chrome 74 ) don't support the PerformanceObserver type and buffered options
-      // In these cases, fallback to getEntriesByType and PerformanceObserver with entryTypes
-      // TODO: remove this fallback in the next major version
-      const fallbackSupportedEntryTypes = [
-        RumPerformanceEntryType.RESOURCE,
-        RumPerformanceEntryType.NAVIGATION,
-        RumPerformanceEntryType.LONG_TASK,
-        RumPerformanceEntryType.PAINT,
-      ]
-      if (fallbackSupportedEntryTypes.includes(options.type)) {
-        if (options.buffered) {
-          timeoutId = setTimeout(() => handlePerformanceEntries(performance.getEntriesByType(options.type)))
-        }
-        try {
-          observer.observe({ entryTypes: [options.type] })
-        } catch {
-          // Old versions of Safari are throwing "entryTypes contained only unsupported types"
-          // errors when observing only unsupported entry types.
-          //
-          // We could use `supportPerformanceTimingEvent` to make sure we don't invoke
-          // `observer.observe` with an unsupported entry type, but Safari 11 and 12 don't support
-          // `Performance.supportedEntryTypes`, so doing so would lose support for these versions
-          // even if they do support the entry type.
-          return
-        }
-      }
-    }
+    observer.observe(options)
     isObserverInitializing = false
 
-    manageResourceTimingBufferFull(configuration)
-
-    let stopFirstInputTiming: (() => void) | undefined
-    if (
-      !supportPerformanceTimingEvent(RumPerformanceEntryType.FIRST_INPUT) &&
-      options.type === RumPerformanceEntryType.FIRST_INPUT
-    ) {
-      ;({ stop: stopFirstInputTiming } = retrieveFirstInputTiming(configuration, (timing) => {
-        handlePerformanceEntries([timing])
-      }))
-    }
+    manageResourceTimingBufferFull()
 
     return () => {
       observer.disconnect()
-      if (stopFirstInputTiming) {
-        stopFirstInputTiming()
-      }
       clearTimeout(timeoutId)
     }
   })
 }
 
-let resourceTimingBufferFullListener: { stop: () => void }
-function manageResourceTimingBufferFull(configuration: RumConfiguration) {
+let resourceTimingBufferFullListener: { stop: () => void } | undefined
+function manageResourceTimingBufferFull() {
   if (!resourceTimingBufferFullListener && supportPerformanceObject() && 'addEventListener' in performance) {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1559377
-    resourceTimingBufferFullListener = addEventListener(configuration, performance, 'resourcetimingbufferfull', () => {
+    resourceTimingBufferFullListener = addEventListener(performance, 'resourcetimingbufferfull', () => {
       performance.clearResourceTimings()
     })
   }
-  return () => {
-    resourceTimingBufferFullListener?.stop()
+}
+
+export function resetManageResourceTimingBufferFull() {
+  if (resourceTimingBufferFullListener) {
+    resourceTimingBufferFullListener.stop()
+    resourceTimingBufferFullListener = undefined
   }
 }
 
@@ -305,11 +259,7 @@ function supportPerformanceObject() {
 }
 
 export function supportPerformanceTimingEvent(entryType: RumPerformanceEntryType) {
-  return (
-    window.PerformanceObserver &&
-    PerformanceObserver.supportedEntryTypes !== undefined &&
-    PerformanceObserver.supportedEntryTypes.includes(entryType)
-  )
+  return PerformanceObserver.supportedEntryTypes.includes(entryType)
 }
 
 function filterRumPerformanceEntries<T extends RumPerformanceEntryType>(entries: Array<EntryTypeToReturnType[T]>) {

package/src/browser/performanceUtils.ts

@@ -1,14 +1,22 @@
-import type { RelativeTime, TimeStamp } from '@kubesense/kubesense-browser-core'
-import { getRelativeTime, isNumber } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime, TimeStamp } from '@kubesense/kubesense-js-core/time'
+import { toRelativeTime, relativeNow } from '@kubesense/kubesense-js-core/time'
+import { findLast, isNumber } from '@kubesense/kubesense-browser-core'
+import type { RelevantNavigationTiming } from '../domain/view/viewMetrics/trackNavigationTimings'
 import type { RumPerformanceNavigationTiming } from './performanceObservable'
 import { RumPerformanceEntryType, supportPerformanceTimingEvent } from './performanceObservable'
 
+function isValidNavigationEntry(entry: Pick<RumPerformanceNavigationTiming, 'loadEventEnd' | 'domComplete'>) {
+  // WebKit 26.4 reports loadEventEnd/responseStart but leaves DOM timing fields at 0.
+  // performance.timing still has the correct values.
+  return !(entry.loadEventEnd > 0 && entry.domComplete <= 0)
+}
+
 export function getNavigationEntry(): RumPerformanceNavigationTiming {
   if (supportPerformanceTimingEvent(RumPerformanceEntryType.NAVIGATION)) {
     const navigationEntry = performance.getEntriesByType(
       RumPerformanceEntryType.NAVIGATION
     )[0] as unknown as RumPerformanceNavigationTiming
-    if (navigationEntry) {
+    if (navigationEntry && isValidNavigationEntry(navigationEntry)) {
       return navigationEntry
     }
   }
@@ -40,11 +48,51 @@ export function computeTimingsFromDeprecatedPerformanceTiming() {
   const timing = performance.timing
 
   for (const key in timing) {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     if (isNumber(timing[key as keyof PerformanceTiming])) {
       const numberKey = key as keyof TimingsFromDeprecatedPerformanceTiming
       const timingElement = timing[numberKey] as TimeStamp
-      result[numberKey] = timingElement === 0 ? (0 as RelativeTime) : getRelativeTime(timingElement)
+      result[numberKey] = timingElement === 0 ? (0 as RelativeTime) : toRelativeTime(timingElement)
     }
   }
   return result as TimingsFromDeprecatedPerformanceTiming
 }
+
+export function sanitizeFirstByte(entry: RelevantNavigationTiming) {
+  // In some cases the value reported is negative, zero (meaning unavailable, e.g. cross-origin
+  // without Timing-Allow-Origin), or larger than the current page time. Ignore these cases:
+  // https://github.com/GoogleChrome/web-vitals/issues/137
+  // https://github.com/GoogleChrome/web-vitals/issues/162
+  return entry.responseStart > 0 && entry.responseStart <= relativeNow() ? entry.responseStart : undefined
+}
+
+export function getResourceEntries() {
+  if (supportPerformanceTimingEvent(RumPerformanceEntryType.RESOURCE)) {
+    return performance.getEntriesByType(RumPerformanceEntryType.RESOURCE)
+  }
+
+  return undefined
+}
+
+/**
+ * Find the most relevant resource entry for an LCP element.
+ *
+ * Resource entries persist for the entire page lifetime and can include multiple requests
+ * for the same URL (preloads, cache-busting reloads, SPA route changes, etc.).
+ * This function returns the most recent matching entry that started before the LCP time,
+ * which is most likely the one that triggered the LCP paint.
+ */
+export function findLcpResourceEntry(
+  resourceUrl: string,
+  lcpStartTime: RelativeTime
+): PerformanceResourceTiming | undefined {
+  const entries = getResourceEntries()
+  if (!entries) {
+    return undefined
+  }
+
+  return findLast(
+    entries,
+    (entry): entry is PerformanceResourceTiming => entry.name === resourceUrl && entry.startTime <= lcpStartTime
+  )
+}

package/src/browser/viewportObservable.ts

@@ -1,5 +1,4 @@
 import { Observable, throttle, addEventListener, DOM_EVENT } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../domain/configuration'
 
 export interface ViewportDimension {
   height: number
@@ -9,21 +8,20 @@ export interface ViewportDimension {
 
 let viewportObservable: Observable<ViewportDimension> | undefined
 
-export function initViewportObservable(configuration: RumConfiguration) {
+export function initViewportObservable() {
   if (!viewportObservable) {
-    viewportObservable = createViewportObservable(configuration)
+    viewportObservable = createViewportObservable()
   }
   return viewportObservable
 }
 
-export function createViewportObservable(configuration: RumConfiguration) {
+export function createViewportObservable() {
   return new Observable<ViewportDimension>((observable) => {
     const { throttled: updateDimension } = throttle(() => {
       observable.notify(getViewportDimension())
     }, 200)
 
-    return addEventListener(configuration, window, DOM_EVENT.RESIZE, updateDimension, { capture: true, passive: true })
-      .stop
+    return addEventListener(window, DOM_EVENT.RESIZE, updateDimension, { capture: true, passive: true }).stop
   })
 }
 

package/src/domain/action/actionCollection.ts

@@ -1,28 +1,28 @@
-import type { ClocksState, Context, Observable } from '@kubesense/kubesense-browser-core'
-import { noop, combine, toServerDuration, generateUUID, SKIPPED, HookNames } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime, Duration } from '@kubesense/kubesense-js-core/time'
+import type { Observable } from '@kubesense/kubesense-browser-core'
+import { toServerDuration, addDuration } from '@kubesense/kubesense-js-core/time'
+import { noop } from '@kubesense/kubesense-browser-core'
+import { SKIPPED } from '@kubesense/kubesense-js-core/assembly'
 import { discardNegativeDuration } from '../discardNegativeDuration'
 import type { RawRumActionEvent } from '../../rawRumEvent.types'
-import { ActionType, RumEventType } from '../../rawRumEvent.types'
+import { RumEventType } from '../../rawRumEvent.types'
 import type { LifeCycle, RawRumEventCollectedData } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
 import type { RumConfiguration } from '../configuration'
-import type { RumActionEventDomainContext } from '../../domainContext.types'
 import type { DefaultRumEventAttributes, DefaultTelemetryEventAttributes, Hooks } from '../hooks'
 import type { RumMutationRecord } from '../../browser/domMutationObservable'
-import type { ActionContexts, ClickAction } from './trackClickActions'
 import { trackClickActions } from './trackClickActions'
+import type { ClickAction } from './trackClickActions'
+import { trackManualActions } from './trackManualActions'
+import type { ManualAction } from './trackManualActions'
 
-export type { ActionContexts }
+export type AutoAction = ClickAction
 
-export interface CustomAction {
-  type: typeof ActionType.CUSTOM
-  name: string
-  startClocks: ClocksState
-  context?: Context
-  handlingStack?: string
+export interface ActionContexts {
+  findActionId: (startTime?: RelativeTime) => string[]
 }
 
-export type AutoAction = ClickAction
+export const LONG_TASK_START_TIME_CORRECTION = 1 as Duration
 
 export function startActionCollection(
   lifeCycle: LifeCycle,
@@ -38,7 +38,26 @@ export function startActionCollection(
     }
   )
 
-  hooks.register(HookNames.Assemble, ({ startTime, eventType }): DefaultRumEventAttributes | SKIPPED => {
+  const stopClickActions: () => void = noop
+  let clickActions: ReturnType<typeof trackClickActions> | undefined
+
+  if (configuration.trackUserInteractions) {
+    clickActions = trackClickActions(lifeCycle, domMutationObservable, windowOpenObservable, configuration)
+  }
+
+  const manualActions = trackManualActions(lifeCycle, (action) => {
+    lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, processAction(action))
+  })
+
+  const actionContexts: ActionContexts = {
+    findActionId: (startTime?: RelativeTime) => {
+      const manualActionId = manualActions.findActionId(startTime)
+      const clickActionId = clickActions?.findActionId(startTime) ?? []
+      return manualActionId.concat(clickActionId)
+    },
+  }
+
+  hooks.assembleEventDefaults.register(({ startTime, eventType }): DefaultRumEventAttributes | SKIPPED => {
     if (
       eventType !== RumEventType.ERROR &&
       eventType !== RumEventType.RESOURCE &&
@@ -47,8 +66,17 @@ export function startActionCollection(
       return SKIPPED
     }
 
-    const actionId = actionContexts.findActionId(startTime)
-    if (!actionId) {
+    // Long tasks triggered by interaction handlers (pointerup, click, etc.)
+    // can have a start time slightly before the interaction timestamp (long_task.start_time < action.start_time).
+    // This likely happens because the interaction timestamp is recorded during the event dispatch,
+    // not at the beginning of the rendering frame. I observed a difference of < 1 ms in my tests.
+    // Fixes flakiness in test: "associates long tasks to interaction actions"
+    const correctedStartTime =
+      eventType === RumEventType.LONG_TASK ? addDuration(startTime, LONG_TASK_START_TIME_CORRECTION) : startTime
+
+    const actionId = actionContexts.findActionId(correctedStartTime)
+
+    if (!actionId.length) {
       return SKIPPED
     }
 
@@ -58,89 +86,68 @@ export function startActionCollection(
     }
   })
 
-  hooks.register(
-    HookNames.AssembleTelemetry,
-    ({ startTime }): DefaultTelemetryEventAttributes => ({
-      action: { id: actionContexts.findActionId(startTime) as string },
-    })
-  )
-
-  let actionContexts: ActionContexts = { findActionId: noop as () => undefined }
-  let stop: () => void = noop
-
-  if (configuration.trackUserInteractions) {
-    ;({ actionContexts, stop } = trackClickActions(
-      lifeCycle,
-      domMutationObservable,
-      windowOpenObservable,
-      configuration
-    ))
-  }
+  hooks.assembleTelemetry.register(({ startTime }): DefaultTelemetryEventAttributes => ({
+    // todo: fix telemetry event type
+    action: { id: actionContexts.findActionId(startTime) as unknown as string },
+  }))
 
   return {
-    addAction: (action: CustomAction) => {
-      lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, processAction(action))
-    },
+    addAction: manualActions.addAction,
+    startAction: manualActions.startAction,
+    stopAction: manualActions.stopAction,
     actionContexts,
     stop: () => {
       unsubscribeAutoAction()
-      stop()
+      stopClickActions()
+      manualActions.stop()
+      clickActions?.stop()
     },
   }
 }
 
-function processAction(action: AutoAction | CustomAction): RawRumEventCollectedData<RawRumActionEvent> {
-  const autoActionProperties = isAutoAction(action)
-    ? {
-        action: {
-          id: action.id,
-          loading_time: discardNegativeDuration(toServerDuration(action.duration)),
-          frustration: {
-            type: action.frustrationTypes,
-          },
-          error: {
-            count: action.counts.errorCount,
-          },
-          long_task: {
-            count: action.counts.longTaskCount,
-          },
-          resource: {
-            count: action.counts.resourceCount,
-          },
-        },
-        _kubesense: {
-          action: {
-            target: action.target,
-            position: action.position,
-            name_source: action.nameSource,
-          },
-        },
-      }
-      : {
-        context: action.context,
-      }
-  const actionEvent: RawRumActionEvent = combine(
-    {
-      action: { id: generateUUID(), target: { name: action.name }, type: action.type },
-      date: action.startClocks.timeStamp,
-      type: RumEventType.ACTION,
-    },
-    autoActionProperties
-  )
-
-  const duration = isAutoAction(action) ? action.duration : undefined
-  const domainContext: RumActionEventDomainContext = isAutoAction(action)
-    ? { events: action.events }
-    : { handlingStack: action.handlingStack }
+function processAction(action: AutoAction | ManualAction): RawRumEventCollectedData<RawRumActionEvent> {
+  const isAuto = isAutoAction(action)
+  const loadingTime = discardNegativeDuration(toServerDuration(action.duration))
 
   return {
-    rawRumEvent: actionEvent,
-    duration,
-    startTime: action.startClocks.relative,
-    domainContext,
+    rawRumEvent: {
+      type: RumEventType.ACTION,
+      date: action.startClocks.timeStamp,
+      action: {
+        id: action.id,
+        target: { name: action.name },
+        type: action.type,
+        ...(loadingTime !== undefined && { loading_time: loadingTime }),
+        ...(action.counts && {
+          error: { count: action.counts.errorCount },
+          long_task: { count: action.counts.longTaskCount },
+          resource: { count: action.counts.resourceCount },
+        }),
+        frustration: { type: action.frustrationTypes },
+      },
+      ...(isAuto
+        ? {
+            _kubesense: {
+              action: {
+                target: {
+                  selector: action.target?.selector || undefined,
+                  width: action.target?.width || undefined,
+                  height: action.target?.height || undefined,
+                  composed_path_selector: action.target?.composedPathSelector,
+                },
+                position: action.position,
+                name_source: action.nameSource,
+              },
+            },
+          }
+        : { context: action.context }),
+    },
+    duration: action.duration,
+    startClocks: action.startClocks,
+    domainContext: isAuto ? { events: action.events } : { handlingStack: action.handlingStack },
   }
 }
 
-function isAutoAction(action: AutoAction | CustomAction): action is AutoAction {
-  return action.type !== ActionType.CUSTOM
+function isAutoAction(action: AutoAction | ManualAction): action is AutoAction {
+  return 'events' in action
 }

package/src/domain/action/clickChain.ts

@@ -1,6 +1,8 @@
 import type { TimeoutId } from '@kubesense/kubesense-browser-core'
-import { ONE_SECOND, clearTimeout, setTimeout } from '@kubesense/kubesense-browser-core'
+import { ONE_SECOND } from '@kubesense/kubesense-js-core/time'
+import { clearTimeout, setTimeout } from '@kubesense/kubesense-browser-core'
 import type { Click } from './trackClickActions'
+import { FrustrationIgnore, shouldIgnore } from './frustrationIgnore'
 
 export interface ClickChain {
   tryAppend: (click: Click) => boolean
@@ -50,10 +52,7 @@ export function createClickChain(firstClick: Click, onFinalize: (clicks: Click[]
         return false
       }
 
-      if (
-        bufferedClicks.length > 0 &&
-        !areEventsSimilar(bufferedClicks[bufferedClicks.length - 1].event, click.event)
-      ) {
+      if (bufferedClicks.length > 0 && !areClicksSimilar(bufferedClicks[bufferedClicks.length - 1], click)) {
         dontAcceptMoreClick()
         return false
       }
@@ -68,13 +67,15 @@ export function createClickChain(firstClick: Click, onFinalize: (clicks: Click[]
 }
 
 /**
- * Checks whether two events are similar by comparing their target, position and timestamp
+ * Checks whether two clicks are similar by comparing their rage ignore state, target, position and timestamp
  */
-function areEventsSimilar(first: MouseEvent, second: MouseEvent) {
+function areClicksSimilar(first: Click, second: Click) {
   return (
-    first.target === second.target &&
-    mouseEventDistance(first, second) <= MAX_DISTANCE_BETWEEN_CLICKS &&
-    first.timeStamp - second.timeStamp <= MAX_DURATION_BETWEEN_CLICKS
+    shouldIgnore(first.ignore, FrustrationIgnore.RAGE_CLICK) ===
+      shouldIgnore(second.ignore, FrustrationIgnore.RAGE_CLICK) &&
+    first.event.target === second.event.target &&
+    mouseEventDistance(first.event, second.event) <= MAX_DISTANCE_BETWEEN_CLICKS &&
+    first.event.timeStamp - second.event.timeStamp <= MAX_DURATION_BETWEEN_CLICKS
   )
 }
 

package/src/domain/action/computeFrustration.ts

@@ -1,6 +1,7 @@
-import { ONE_SECOND } from '@kubesense/kubesense-browser-core'
+import { ONE_SECOND } from '@kubesense/kubesense-js-core/time'
 import { FrustrationType } from '../../rawRumEvent.types'
 import type { Click } from './trackClickActions'
+import { FrustrationIgnore, shouldIgnore } from './frustrationIgnore'
 
 const MIN_CLICKS_PER_SECOND_TO_CONSIDER_RAGE = 3
 
@@ -10,7 +11,8 @@ export function computeFrustration(clicks: Click[], rageClick: Click) {
     if (clicks.some(isDead)) {
       rageClick.addFrustration(FrustrationType.DEAD_CLICK)
     }
-    if (rageClick.hasError) {
+    // The rage action is represented by the initiating click, so its policy applies to the whole action lifetime.
+    if (rageClick.hasError && !shouldIgnore(rageClick.ignore, FrustrationIgnore.ERROR_CLICK)) {
       rageClick.addFrustration(FrustrationType.ERROR_CLICK)
     }
     return { isRage: true }
@@ -18,7 +20,7 @@ export function computeFrustration(clicks: Click[], rageClick: Click) {
 
   const hasSelectionChanged = clicks.some((click) => click.getUserActivity().selection)
   clicks.forEach((click) => {
-    if (click.hasError) {
+    if (click.hasError && !shouldIgnore(click.ignore, FrustrationIgnore.ERROR_CLICK)) {
       click.addFrustration(FrustrationType.ERROR_CLICK)
     }
     if (
@@ -33,7 +35,14 @@ export function computeFrustration(clicks: Click[], rageClick: Click) {
 }
 
 export function isRage(clicks: Click[]) {
-  if (clicks.some((click) => click.getUserActivity().selection || click.getUserActivity().scroll)) {
+  if (
+    clicks.some(
+      (click) =>
+        shouldIgnore(click.ignore, FrustrationIgnore.RAGE_CLICK) ||
+        click.getUserActivity().selection ||
+        click.getUserActivity().scroll
+    )
+  ) {
     return false
   }
   for (let i = 0; i < clicks.length - (MIN_CLICKS_PER_SECOND_TO_CONSIDER_RAGE - 1); i += 1) {
@@ -64,14 +73,19 @@ const DEAD_CLICK_EXCLUDE_SELECTOR =
   'a[href] *'
 
 export function isDead(click: Click) {
+  if (shouldIgnore(click.ignore, FrustrationIgnore.DEAD_CLICK)) {
+    return false
+  }
+
   if (click.hasPageActivity || click.getUserActivity().input || click.getUserActivity().scroll) {
     return false
   }
+
   let target: Element | null = click.event.target
 
   if (target.tagName === 'LABEL' && target.hasAttribute('for')) {
     target = document.getElementById(target.getAttribute('for')!)
   }
 
-  return !target || !target.matches(DEAD_CLICK_EXCLUDE_SELECTOR)
+  return !target?.matches(DEAD_CLICK_EXCLUDE_SELECTOR)
 }

package/src/domain/action/frustrationIgnore.ts

@@ -0,0 +1,54 @@
+import { getParentElement } from '../../browser/htmlDomUtils'
+
+const FRUSTRATION_IGNORE_ATTRIBUTE = 'data-dd-ignore-frustration'
+const ALL_FRUSTRATIONS_IGNORE_VALUE = 'all'
+const RAGE_CLICK_IGNORE_VALUE = 'rage-click'
+const DEAD_CLICK_IGNORE_VALUE = 'dead-click'
+const ERROR_CLICK_IGNORE_VALUE = 'error-click'
+
+export const enum FrustrationIgnore {
+  NONE = 0,
+  RAGE_CLICK = 1,
+  DEAD_CLICK = 2,
+  ERROR_CLICK = 4,
+  ALL = 7,
+}
+
+export function shouldIgnore(ignoredFrustrations: FrustrationIgnore, frustration: FrustrationIgnore) {
+  // eslint-disable-next-line no-bitwise
+  return (ignoredFrustrations & frustration) !== 0
+}
+
+export function getFrustrationIgnore(element: Element): FrustrationIgnore {
+  let frustrationIgnore = FrustrationIgnore.NONE
+  let currentElement: Element | null = element
+
+  while (currentElement) {
+    const attributeValue = currentElement.getAttribute(FRUSTRATION_IGNORE_ATTRIBUTE)
+    if (attributeValue !== null) {
+      const values = attributeValue.split(/\s+/)
+      const ignoreAll = attributeValue.trim() === '' || values.includes(ALL_FRUSTRATIONS_IGNORE_VALUE)
+      if (ignoreAll) {
+        return FrustrationIgnore.ALL
+      }
+      if (values.includes(RAGE_CLICK_IGNORE_VALUE)) {
+        // eslint-disable-next-line no-bitwise
+        frustrationIgnore |= FrustrationIgnore.RAGE_CLICK
+      }
+      if (values.includes(DEAD_CLICK_IGNORE_VALUE)) {
+        // eslint-disable-next-line no-bitwise
+        frustrationIgnore |= FrustrationIgnore.DEAD_CLICK
+      }
+      if (values.includes(ERROR_CLICK_IGNORE_VALUE)) {
+        // eslint-disable-next-line no-bitwise
+        frustrationIgnore |= FrustrationIgnore.ERROR_CLICK
+      }
+    }
+    if (frustrationIgnore === FrustrationIgnore.ALL) {
+      break
+    }
+    currentElement = getParentElement(currentElement)
+  }
+
+  return frustrationIgnore
+}