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

package/src/domain/contexts/sourceCodeMfeContext.ts

@@ -0,0 +1,53 @@
+import { computeStackTrace, getSourceCodeContext } from '@kubesense/kubesense-browser-core'
+import { SKIPPED } from '@kubesense/kubesense-js-core/assembly'
+import type { DefaultRumEventAttributes, AssembleHookParams, AssembleHook } from '../hooks'
+
+/**
+ * Attributes service and version from the source code context (injected at build time by the
+ * KubeSense build plugins) to RUM events emitted by micro-frontend bundles.
+ *
+ * Note: service/version attribution relies on a single URL (the top frame of the error stack, or the
+ * first script of a long animation frame). Debug IDs, on the other hand, are resolved separately and
+ * cover every bundle URL across the full error cause chain — not just that top frame.
+ */
+export function startSourceCodeMfeContext(assembleHook: AssembleHook) {
+  assembleHook.register(({ domainContext, rawRumEvent }): DefaultRumEventAttributes | SKIPPED => {
+    const url = getSourceUrl(domainContext, rawRumEvent)
+    if (!url) {
+      return SKIPPED
+    }
+
+    const context = getSourceCodeContext(url)
+
+    if (!context) {
+      return SKIPPED
+    }
+
+    return {
+      type: rawRumEvent.type,
+      service: context.service,
+      version: context.version,
+    }
+  })
+}
+
+function getSourceUrl(
+  domainContext: AssembleHookParams['domainContext'],
+  rawRumEvent: AssembleHookParams['rawRumEvent']
+) {
+  if (rawRumEvent.type === 'long_task' && rawRumEvent.long_task.entry_type === 'long-animation-frame') {
+    return rawRumEvent.long_task.scripts[0]?.source_url
+  }
+
+  let stack
+  if ('handlingStack' in domainContext) {
+    stack = domainContext.handlingStack
+  }
+
+  if (rawRumEvent.type === 'error' && rawRumEvent.error.stack) {
+    stack = rawRumEvent.error.stack
+  }
+  const stackTrace = computeStackTrace({ stack })
+
+  return stackTrace.stack[0]?.url
+}

package/src/domain/contexts/syntheticsContext.ts

@@ -1,31 +1,21 @@
-import {
-  SKIPPED,
-  getSyntheticsResultId,
-  getSyntheticsTestId,
-  HookNames,
-  willSyntheticsInjectRum,
-  isSyntheticsTest,
-} from '@kubesense/kubesense-browser-core'
-import { SessionType } from '../rumSessionManager'
-import type { DefaultRumEventAttributes, Hooks } from '../hooks'
+import { getSyntheticsContext, willSyntheticsInjectRum, isSyntheticsTest } from '@kubesense/kubesense-browser-core'
+import { SKIPPED } from '@kubesense/kubesense-js-core/assembly'
+import type { AssembleHook, DefaultRumEventAttributes } from '../hooks'
+import { SessionType } from './sessionContext'
 
-export function startSyntheticsContext(hooks: Hooks) {
-  hooks.register(HookNames.Assemble, ({ eventType }): DefaultRumEventAttributes | SKIPPED => {
+export function startSyntheticsContext(assembleHook: AssembleHook) {
+  assembleHook.register(({ eventType }): DefaultRumEventAttributes | SKIPPED => {
     if (!isSyntheticsTest()) {
       return SKIPPED
     }
 
-    const testId = getSyntheticsTestId()
-    const resultId = getSyntheticsResultId()
-
     return {
       type: eventType,
       session: {
         type: SessionType.SYNTHETICS,
       },
       synthetics: {
-        test_id: testId!,
-        result_id: resultId!,
+        ...getSyntheticsContext(),
         injected: willSyntheticsInjectRum(),
       },
     }

package/src/domain/contexts/trackingConsentContext.ts

@@ -1,9 +1,12 @@
-import { DISCARDED, HookNames, SKIPPED } from '@kubesense/kubesense-browser-core'
+import { DISCARDED, SKIPPED } from '@kubesense/kubesense-js-core/assembly'
 import type { TrackingConsentState } from '@kubesense/kubesense-browser-core'
-import type { Hooks } from '../hooks'
+import type { AssembleTelemetryHook } from '../hooks'
 
-export function startTrackingConsentContext(hooks: Hooks, trackingConsentState: TrackingConsentState) {
-  hooks.register(HookNames.AssembleTelemetry, () => {
+export function startTrackingConsentContext(
+  assembleTelemetryHook: AssembleTelemetryHook,
+  trackingConsentState: TrackingConsentState
+) {
+  assembleTelemetryHook.register(() => {
     const wasConsented = trackingConsentState.isGranted()
 
     if (!wasConsented) {

package/src/domain/contexts/urlContexts.ts

@@ -1,9 +1,13 @@
-import type { RelativeTime, Observable } from '@kubesense/kubesense-browser-core'
-import { SESSION_TIME_OUT_DELAY, relativeNow, createValueHistory, HookNames, DISCARDED } from '@kubesense/kubesense-browser-core'
+import { globalObject, buildUrl } from '@kubesense/kubesense-js-core/util'
+import type { RelativeTime } from '@kubesense/kubesense-js-core/time'
+import type { Observable } from '@kubesense/kubesense-browser-core'
+import { relativeNow } from '@kubesense/kubesense-js-core/time'
+import { SESSION_TIME_OUT_DELAY, createValueHistory, mockable } from '@kubesense/kubesense-browser-core'
+import { DISCARDED } from '@kubesense/kubesense-js-core/assembly'
 import type { LocationChange } from '../../browser/locationChangeObservable'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
-import type { DefaultRumEventAttributes, Hooks } from '../hooks'
+import type { AssembleHook, DefaultRumEventAttributes } from '../hooks'
 
 /**
  * We want to attach to an event:
@@ -25,16 +29,16 @@ export interface UrlContexts {
 
 export function startUrlContexts(
   lifeCycle: LifeCycle,
-  hooks: Hooks,
-  locationChangeObservable: Observable<LocationChange>,
-  location: Location
+  assembleHook: AssembleHook,
+  locationChangeObservable: Observable<LocationChange>
 ) {
   const urlContextHistory = createValueHistory<UrlContext>({ expireDelay: URL_CONTEXT_TIME_OUT_DELAY })
 
   let previousViewUrl: string | undefined
 
-  lifeCycle.subscribe(LifeCycleEventType.BEFORE_VIEW_CREATED, ({ startClocks }) => {
-    const viewUrl = location.href
+  lifeCycle.subscribe(LifeCycleEventType.BEFORE_VIEW_CREATED, ({ startClocks, url }) => {
+    const locationHref = mockable(globalObject.location).href
+    const viewUrl = url !== undefined ? buildUrl(url, locationHref).href : locationHref
     urlContextHistory.add(
       buildUrlContext({
         url: viewUrl,
@@ -71,7 +75,7 @@ export function startUrlContexts(
     }
   }
 
-  hooks.register(HookNames.Assemble, ({ startTime, eventType }): DefaultRumEventAttributes | DISCARDED => {
+  assembleHook.register(({ startTime, eventType }): DefaultRumEventAttributes | DISCARDED => {
     const urlContext = urlContextHistory.find(startTime)
 
     if (!urlContext) {

package/src/domain/contexts/userAgentDataContext.ts

@@ -1,10 +1,7 @@
+import { monitorError } from '@kubesense/kubesense-js-core/monitor'
 import type { UserAgentContext } from '@kubesense/kubesense-browser-core'
-import {
-  getSyncUserAgentContext,
-  HookNames,
-  resolveHighEntropyUserAgentContext,
-} from '@kubesense/kubesense-browser-core'
-import type { DefaultRumEventAttributes, Hooks } from '../hooks'
+import { getSyncUserAgentContext, resolveHighEntropyUserAgentContext } from '@kubesense/kubesense-browser-core'
+import type { AssembleHook, DefaultRumEventAttributes } from '../hooks'
 
 // On Chromium, the classic User-Agent is frozen (browser major capped, macOS
 // pinned to 10.15.7, Windows pinned to 10.0). UA Client Hints let us recover
@@ -13,16 +10,18 @@ import type { DefaultRumEventAttributes, Hooks } from '../hooks'
 //
 // Non-Chromium browsers (Safari, Firefox) don't expose userAgentData; we send
 // nothing and the server's UA parser handles them — their UA isn't frozen.
-export function startUserAgentDataContext(hooks: Hooks) {
+export function startUserAgentDataContext(assembleHook: AssembleHook) {
   let context: UserAgentContext | undefined = getSyncUserAgentContext()
 
-  resolveHighEntropyUserAgentContext().then((highEntropy) => {
-    if (highEntropy) {
-      context = highEntropy
-    }
-  })
+  resolveHighEntropyUserAgentContext()
+    .then((highEntropy) => {
+      if (highEntropy) {
+        context = highEntropy
+      }
+    })
+    .catch(monitorError)
 
-  hooks.register(HookNames.Assemble, ({ eventType }): DefaultRumEventAttributes => {
+  assembleHook.register(({ eventType }): DefaultRumEventAttributes => {
     if (!context) {
       return { type: eventType }
     }

package/src/domain/contexts/viewHistory.ts

@@ -1,4 +1,5 @@
-import type { RelativeTime, ClocksState, Context } from '@kubesense/kubesense-browser-core'
+import type { RelativeTime, ClocksState } from '@kubesense/kubesense-js-core/time'
+import type { Context } from '@kubesense/kubesense-browser-core'
 import { SESSION_TIME_OUT_DELAY, createValueHistory } from '@kubesense/kubesense-browser-core'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
@@ -17,7 +18,7 @@ export interface ViewHistoryEntry {
 }
 
 export interface ViewHistory {
-  findView: (startTime?: RelativeTime) => ViewHistoryEntry | undefined
+  findView: (startTime?: RelativeTime, options?: { returnInactive: boolean }) => ViewHistoryEntry | undefined
   stop: () => void
 }
 
@@ -62,7 +63,7 @@ export function startViewHistory(lifeCycle: LifeCycle): ViewHistory {
   }
 
   return {
-    findView: (startTime) => viewValueHistory.find(startTime),
+    findView: (startTime, options) => viewValueHistory.find(startTime, options),
     stop: () => {
       viewValueHistory.stop()
     },

package/src/domain/discardNegativeDuration.ts

@@ -1,4 +1,4 @@
-import type { ServerDuration } from '@kubesense/kubesense-browser-core'
+import type { ServerDuration } from '@kubesense/kubesense-js-core/time'
 import { isNumber } from '@kubesense/kubesense-browser-core'
 
 export function discardNegativeDuration(duration: ServerDuration | undefined): ServerDuration | undefined {

package/src/domain/error/errorCollection.ts

@@ -1,4 +1,6 @@
-import type { Context, RawError, ClocksState, BufferedData } from '@kubesense/kubesense-browser-core'
+import type { ClocksState } from '@kubesense/kubesense-js-core/time'
+import { ConsoleApiName, combine } from '@kubesense/kubesense-js-core/util'
+import type { Context, RawError, BufferedData } from '@kubesense/kubesense-browser-core'
 import {
   BufferedDataType,
   Observable,
@@ -7,15 +9,12 @@ import {
   computeRawError,
   ErrorHandling,
   NonErrorPrefix,
-  combine,
 } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../configuration'
 import type { RawRumErrorEvent } from '../../rawRumEvent.types'
 import { RumEventType } from '../../rawRumEvent.types'
 import type { LifeCycle, RawRumEventCollectedData } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
 import type { RumErrorEventDomainContext } from '../../domainContext.types'
-import { trackConsoleError } from './trackConsoleError'
 import { trackReportError } from './trackReportError'
 
 export interface ProvidedError {
@@ -26,21 +25,18 @@ export interface ProvidedError {
   componentStack?: string
 }
 
-export function startErrorCollection(
-  lifeCycle: LifeCycle,
-  configuration: RumConfiguration,
-  bufferedDataObservable: Observable<BufferedData>
-) {
+export function startErrorCollection(lifeCycle: LifeCycle, bufferedDataObservable: Observable<BufferedData>) {
   const errorObservable = new Observable<RawError>()
 
-  bufferedDataObservable.subscribe((bufferedData) => {
-    if (bufferedData.type === BufferedDataType.RUNTIME_ERROR) {
-      errorObservable.notify(bufferedData.error)
+  bufferedDataObservable.subscribe(({ data, type }) => {
+    if (type === BufferedDataType.RUNTIME_ERROR) {
+      errorObservable.notify(data)
+    } else if (type === BufferedDataType.CONSOLE && data.api === ConsoleApiName.error) {
+      errorObservable.notify(data.error)
     }
   })
 
-  trackConsoleError(errorObservable)
-  trackReportError(configuration, errorObservable)
+  trackReportError(errorObservable)
 
   errorObservable.subscribe((error) => lifeCycle.notify(LifeCycleEventType.RAW_ERROR_COLLECTED, { error }))
 
@@ -87,9 +83,7 @@ function processError(error: RawError): RawRumEventCollectedData<RawRumErrorEven
       fingerprint: error.fingerprint,
       csp: error.csp,
     },
-    _kubesense: {
-      discarded: false,
-    },
+    _kubesense: { debug_ids: error.debugIds, discarded: false },
     type: RumEventType.ERROR,
     context: error.context,
   }
@@ -99,9 +93,5 @@ function processError(error: RawError): RawRumEventCollectedData<RawRumErrorEven
     handlingStack: error.handlingStack,
   }
 
-  return {
-    rawRumEvent,
-    startTime: error.startClocks.relative,
-    domainContext,
-  }
+  return { rawRumEvent, startClocks: error.startClocks, domainContext }
 }

package/src/domain/error/trackReportError.ts

@@ -1,12 +1,9 @@
 import type { Observable, RawError } from '@kubesense/kubesense-browser-core'
 import { initReportObservable, RawReportType } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from '../configuration'
-
-export function trackReportError(configuration: RumConfiguration, errorObservable: Observable<RawError>) {
-  const subscription = initReportObservable(configuration, [
-    RawReportType.cspViolation,
-    RawReportType.intervention,
-  ]).subscribe((rawError) => errorObservable.notify(rawError))
+export function trackReportError(errorObservable: Observable<RawError>) {
+  const subscription = initReportObservable([RawReportType.cspViolation, RawReportType.intervention]).subscribe(
+    (rawError) => errorObservable.notify(rawError)
+  )
 
   return {
     stop: () => {

package/src/domain/event/eventCollection.ts

@@ -1,4 +1,6 @@
-import type { Context, Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
+import { relativeToClocks } from '@kubesense/kubesense-js-core/time'
+import type { Duration, RelativeTime } from '@kubesense/kubesense-js-core/time'
+import type { Context } from '@kubesense/kubesense-browser-core'
 import type { RumEventDomainContext } from '../../domainContext.types'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
@@ -43,7 +45,7 @@ export function startEventCollection(lifeCycle: LifeCycle) {
       }
 
       lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, {
-        startTime,
+        startClocks: relativeToClocks(startTime),
         rawRumEvent: event,
         domainContext,
         duration,

package/src/domain/eventTracker.ts

@@ -0,0 +1,169 @@
+import type { ClocksState, RelativeTime, Duration } from '@kubesense/kubesense-js-core/time'
+import type { ValueHistoryEntry } from '@kubesense/kubesense-browser-core'
+import { ONE_MINUTE, elapsed } from '@kubesense/kubesense-js-core/time'
+import { generateUUID, createValueHistory } from '@kubesense/kubesense-browser-core'
+import { combine } from '@kubesense/kubesense-js-core/util'
+import type { RumActionEvent, RumErrorEvent, RumLongTaskEvent, RumResourceEvent } from '../rumEvent.types'
+import { LifeCycleEventType } from './lifeCycle'
+import type { LifeCycle } from './lifeCycle'
+import type { EventCounts } from './trackEventCounts'
+import { trackEventCounts } from './trackEventCounts'
+
+export const EVENT_CONTEXT_TIME_OUT_DELAY = 5 * ONE_MINUTE // arbitrary
+
+type BaseTrackedEvent<TData = object> = TData & {
+  id: string
+  startClocks: ClocksState
+  counts?: EventCounts
+}
+
+export type StoppedEvent<TData> = BaseTrackedEvent<TData> & {
+  duration: Duration
+}
+
+export type DiscardedEvent<TData> = BaseTrackedEvent<TData>
+
+export interface StartOptions {
+  isChildEvent?: (
+    id: string
+  ) => (event: RumActionEvent | RumErrorEvent | RumLongTaskEvent | RumResourceEvent) => boolean
+}
+
+export interface EventTracker<TData> {
+  start: (key: string, startClocks: ClocksState, data: TData, options?: StartOptions) => TrackedEventData<TData>
+  stop: (key: string, stopClocks: ClocksState, data?: Partial<TData>) => StoppedEvent<TData> | undefined
+  discard: (key: string) => DiscardedEvent<TData> | undefined
+  getCounts: (key: string) => EventCounts | undefined
+  findId: (startTime?: RelativeTime) => string[]
+  stopAll: () => void
+}
+
+export interface TrackedEventData<TData> {
+  id: string
+  key: string
+  startClocks: ClocksState
+  data: TData
+  historyEntry: ValueHistoryEntry<string>
+  eventCounts?: ReturnType<typeof trackEventCounts>
+}
+
+export function startEventTracker<TData>(lifeCycle: LifeCycle): EventTracker<TData> {
+  // Used by actions to associate events with actions.
+  const history = createValueHistory<string>({ expireDelay: EVENT_CONTEXT_TIME_OUT_DELAY })
+  // Used by manual actions and resources that use named keys to match the start and stop calls.
+  const keyedEvents = new Map<string, TrackedEventData<TData>>()
+
+  function cleanUpEvent(event: TrackedEventData<TData>) {
+    keyedEvents.delete(event.key)
+
+    event.eventCounts?.stop()
+  }
+
+  function discardAll() {
+    keyedEvents.forEach((event) => {
+      cleanUpEvent(event)
+    })
+
+    history.reset()
+  }
+
+  const sessionRenewalSubscription = lifeCycle.subscribe(LifeCycleEventType.SESSION_RENEWED, discardAll)
+
+  function start(key: string, startClocks: ClocksState, data: TData, options?: StartOptions): TrackedEventData<TData> {
+    const id = generateUUID()
+
+    const historyEntry = history.add(id, startClocks.relative)
+
+    const existing = keyedEvents.get(key)
+    if (existing) {
+      cleanUpEvent(existing)
+    }
+
+    const eventCounts = options?.isChildEvent
+      ? trackEventCounts({
+          lifeCycle,
+          isChildEvent: options.isChildEvent(id),
+        })
+      : undefined
+
+    const trackedEventData: TrackedEventData<TData> = {
+      id,
+      key,
+      startClocks,
+      data,
+      historyEntry,
+      eventCounts,
+    }
+
+    keyedEvents.set(key, trackedEventData)
+    return trackedEventData
+  }
+
+  function stop(key: string, stopClocks: ClocksState, extraData?: Partial<TData>): StoppedEvent<TData> | undefined {
+    const event = keyedEvents.get(key)
+    if (!event) {
+      return undefined
+    }
+
+    const finalData = extraData ? (combine(event.data, extraData) as TData) : event.data
+
+    event.historyEntry.close(stopClocks.relative)
+
+    const duration = elapsed(event.startClocks.timeStamp, stopClocks.timeStamp)
+
+    const counts = event.eventCounts?.eventCounts
+
+    cleanUpEvent(event)
+
+    return {
+      ...finalData,
+      id: event.id,
+      startClocks: event.startClocks,
+      duration,
+      counts,
+    }
+  }
+
+  function discard(key: string): DiscardedEvent<TData> | undefined {
+    const event = keyedEvents.get(key)
+    if (!event) {
+      return undefined
+    }
+
+    const counts = event.eventCounts?.eventCounts
+
+    cleanUpEvent(event)
+
+    event.historyEntry.remove()
+
+    return {
+      ...event.data,
+      id: event.id,
+      startClocks: event.startClocks,
+      counts,
+    }
+  }
+
+  function findId(startTime?: RelativeTime): string[] {
+    return history.findAll(startTime)
+  }
+
+  function getCounts(key: string): EventCounts | undefined {
+    return keyedEvents.get(key)?.eventCounts?.eventCounts
+  }
+
+  function stopTracker() {
+    sessionRenewalSubscription.unsubscribe()
+    discardAll()
+    history.stop()
+  }
+
+  return {
+    start,
+    stop,
+    discard,
+    getCounts,
+    findId,
+    stopAll: stopTracker,
+  }
+}

package/src/domain/extractRegexMatch.ts

@@ -0,0 +1,15 @@
+/**
+ * Executes a RegExp against a string and returns the first capture group, or the full match if
+ * there is no capture group. Returns undefined when the pattern does not match.
+ */
+export function extractRegexMatch(candidate: string, extractor: RegExp): string | undefined {
+  // Prevent stateful matching when the RegExp has the global or sticky flag
+  extractor.lastIndex = 0
+
+  const regexResult = extractor.exec(candidate)
+  if (!regexResult) {
+    return undefined
+  }
+  const [match, capture] = regexResult
+  return capture ? capture : match
+}

package/src/domain/getComposedPathSelector.ts

@@ -0,0 +1,130 @@
+import { safeTruncate, ONE_KIBI_BYTE } from '@kubesense/kubesense-browser-core'
+import type { MatchOption } from '@kubesense/kubesense-browser-core'
+import {
+  STABLE_ATTRIBUTES,
+  isGeneratedValue,
+  getIDSelector,
+  getTagNameSelector,
+  getNthOfTypeSelector,
+  getAttributeValueSelector,
+} from './getSelectorFromElement'
+
+const FILTERED_TAGNAMES = ['HTML', 'BODY']
+
+/**
+ * arbitrary value, we want to truncate the selector if it exceeds the limit
+ */
+export const CHARACTER_LIMIT = 2 * ONE_KIBI_BYTE
+
+/**
+ * Safe attributes that can be collected without PII concerns.
+ * These are commonly used for testing, accessibility, and UI identification.
+ */
+export const SAFE_ATTRIBUTES = STABLE_ATTRIBUTES.concat([
+  'role',
+  'type',
+  'disabled',
+  'readonly',
+  'tabindex',
+  'draggable',
+  'target',
+  'rel',
+  'download',
+  'method',
+  'action',
+  'enctype',
+  'autocomplete',
+])
+
+/**
+ * Extracts a selector string from a MouseEvent composedPath.
+ *
+ * This function:
+ * 1. Filters out non-Element items (Document, Window, ShadowRoot)
+ * 2. Extracts a selector string from each element
+ * 3. Truncates the selector string if it exceeds the character limit
+ * 4. Returns the selector string
+ *
+ * @param composedPath - The composedPath from a MouseEvent
+ * @returns A selector string
+ */
+export function getComposedPathSelector(composedPath: EventTarget[], actionNameAttribute: string | undefined): string {
+  // Filter to only include Element nodes
+  const elements = composedPath.filter(
+    (el): el is Element => el instanceof Element && !FILTERED_TAGNAMES.includes(el.tagName)
+  )
+
+  if (elements.length === 0) {
+    return ''
+  }
+
+  const allowedAttributes = actionNameAttribute ? [actionNameAttribute].concat(SAFE_ATTRIBUTES) : SAFE_ATTRIBUTES
+
+  let result = ''
+  for (const element of elements) {
+    const part = getSelectorStringFromElement(element, allowedAttributes)
+    result += part
+    if (result.length >= CHARACTER_LIMIT) {
+      return safeTruncate(result, CHARACTER_LIMIT)
+    }
+  }
+  return result
+}
+
+/**
+ * Extracts a selector string from an element.
+ */
+function getSelectorStringFromElement(element: Element, allowedAttributes: MatchOption[]): string {
+  const tagName = getTagNameSelector(element)
+  const id = getIDSelector(element)
+  const classes = getElementClassesString(element)
+  const attributes = extractSafeAttributesString(element, allowedAttributes)
+  const positionData = computePositionDataString(element)
+
+  return `${tagName}${id || ''}${attributes}${classes}${positionData};`
+}
+
+function getElementClassesString(element: Element): string {
+  return Array.from(element.classList)
+    .filter((c) => !isGeneratedValue(c))
+    .sort()
+    .map((c) => `.${CSS.escape(c)}`)
+    .join('')
+}
+
+/**
+ * Computes the nthChild and nthOfType positions for an element.
+ *
+ * @param element - The element to compute the position data for
+ * @returns A string of the form ":nth-child(1):nth-of-type(1)"
+ */
+function computePositionDataString(element: Element): string {
+  const siblings = Array.from(element.parentNode!.children)
+
+  if (siblings.length <= 1) {
+    return ''
+  }
+
+  const sameTypeSiblings = siblings.filter((sibling) => sibling.tagName === element.tagName)
+
+  const nthChild = siblings.indexOf(element)
+
+  const nthOfType = getNthOfTypeSelector(element)
+
+  return `:nth-child(${nthChild + 1})${sameTypeSiblings.length > 1 ? `:nth-of-type(${nthOfType})` : ''}`
+}
+
+/**
+ * Extracts only the safe (allowlisted) attributes from an element.
+ * The attributes are sorted alphabetically by name.
+ */
+function extractSafeAttributesString(element: Element, allowedAttributes: MatchOption[]): string {
+  const result: string[] = []
+  const attributes = Array.from(element.attributes)
+  for (const attribute of attributes) {
+    if (allowedAttributes.includes(attribute.name)) {
+      result.push(getAttributeValueSelector(attribute.name, attribute.value))
+    }
+  }
+  return result.sort().join('')
+}