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

package/src/domain/profiling/transport/buildProfileEvent.ts

@@ -0,0 +1,143 @@
+import { clockDrift } from '@kubesense/kubesense-js-core/time'
+import { buildTags } from '@kubesense/kubesense-browser-core'
+import type { RumConfiguration } from '@kubesense/kubesense-browser-rum-core'
+import type { BrowserProfileEvent, BrowserProfilerTrace, RumProfilerVitalEntry, RumViewEntry } from '../../../types'
+
+export interface ProfileEventAttributes {
+  application: {
+    id: string
+  }
+  session?: {
+    id: string
+  }
+  view?: {
+    id: string[]
+    name: string[]
+  }
+  long_task?: {
+    id: string[]
+  }
+  action?: {
+    id: string[]
+    label: string[]
+  }
+  vital?: {
+    id: string[]
+    label: string[]
+  }
+}
+
+/**
+ * Builds a BrowserProfileEvent from a trace.
+ */
+export function buildProfileEvent(
+  profilerTrace: BrowserProfilerTrace,
+  configuration: RumConfiguration,
+  sessionId: string | undefined
+): BrowserProfileEvent {
+  const tags = buildTags(configuration) // TODO: get that from the tagContext hook
+  const profileAttributes = buildProfileEventAttributes(profilerTrace, configuration.applicationId, sessionId)
+  const profileEventTags = buildProfileEventTags(tags)
+
+  return {
+    ...profileAttributes,
+    attachments: ['wall-time.json'],
+    start: new Date(profilerTrace.startClocks.timeStamp).toISOString(),
+    end: new Date(profilerTrace.endClocks.timeStamp).toISOString(),
+    family: 'chrome',
+    runtime: 'chrome',
+    format: 'json',
+    version: 4, // Ingestion event version (not the version application tag)
+    tags_profiler: profileEventTags.join(','),
+    _kubesense: {
+      clock_drift: clockDrift(),
+    },
+  }
+}
+
+/**
+ * Builds attributes for the Profile Event.
+ *
+ * @param profilerTrace - Profiler trace
+ * @param applicationId - application id.
+ * @param sessionId - session id.
+ * @returns Additional attributes.
+ */
+export function buildProfileEventAttributes(
+  profilerTrace: BrowserProfilerTrace,
+  applicationId: string,
+  sessionId: string | undefined
+): ProfileEventAttributes {
+  // Extract view ids and names from the profiler trace and add them as attributes of the profile event.
+  // This will be used to filter the profiles by @view.id and/or @view.name.
+  const { ids, names } = extractViewIdsAndNames(profilerTrace.views)
+
+  const longTaskIds: string[] = profilerTrace.longTasks.map((longTask) => longTask.id).filter((id) => id !== undefined)
+
+  const actionIds: string[] =
+    profilerTrace.actions?.map((longTask) => longTask.id).filter((id) => id !== undefined) ?? []
+
+  const { ids: vitalIds, labels: vitalLabels } = extractVitalIdsAndLabels(profilerTrace.vitals)
+
+  const attributes: ProfileEventAttributes = { application: { id: applicationId } }
+
+  if (sessionId) {
+    attributes.session = { id: sessionId }
+  }
+  if (ids.length) {
+    attributes.view = { id: ids, name: names }
+  }
+  if (longTaskIds.length) {
+    attributes.long_task = { id: longTaskIds }
+  }
+  if (actionIds.length) {
+    attributes.action = { id: actionIds, label: [] }
+  }
+  if (vitalIds.length) {
+    attributes.vital = { id: vitalIds, label: vitalLabels }
+  }
+  return attributes
+}
+
+function extractViewIdsAndNames(views: RumViewEntry[]): { ids: string[]; names: string[] } {
+  const result: { ids: string[]; names: string[] } = { ids: [], names: [] }
+  for (const view of views) {
+    result.ids.push(view.viewId)
+
+    if (view.viewName) {
+      result.names.push(view.viewName)
+    }
+  }
+
+  // Remove duplicates
+  result.names = Array.from(new Set(result.names))
+
+  return result
+}
+
+function extractVitalIdsAndLabels(vitals?: RumProfilerVitalEntry[]): {
+  ids: string[]
+  labels: string[]
+} {
+  const result: { ids: string[]; labels: string[] } = { ids: [], labels: [] }
+
+  if (!vitals) {
+    return result
+  }
+
+  for (const vital of vitals) {
+    result.ids.push(vital.id)
+    result.labels.push(vital.label)
+  }
+
+  // Remove duplicates
+  result.labels = Array.from(new Set(result.labels))
+
+  return result
+}
+
+function buildProfileEventTags(tags: string[]): string[] {
+  // Tags already contains the common tags for all events. (service, env, version, etc.)
+  // Here we are adding some specific-to-profiling tags.
+  return tags.concat(['language:javascript', 'runtime:chrome', 'family:chrome', 'host:browser'])
+}

package/src/domain/profiling/transport/formDataEmitter.ts

@@ -0,0 +1,17 @@
+import type { Encoder } from '@kubesense/kubesense-browser-core'
+import { DeflateEncoderStreamId } from '@kubesense/kubesense-browser-core'
+import type { LifeCycle, RumConfiguration, TransportPayload } from '@kubesense/kubesense-browser-rum-core'
+import { createFormDataTransport } from '@kubesense/kubesense-browser-rum-core'
+import type { ProfilingPayload } from '../types'
+
+export function createFormDataEmitter(
+  configuration: RumConfiguration,
+  lifeCycle: LifeCycle,
+  createEncoder: (streamId: DeflateEncoderStreamId) => Encoder
+): (payload: ProfilingPayload) => void {
+  const transport = createFormDataTransport(configuration, lifeCycle, createEncoder, DeflateEncoderStreamId.PROFILING)
+  return ({ profile, trace }: ProfilingPayload) => {
+    const formPayload = { event: profile, 'wall-time.json': trace }
+    void transport.send(formPayload as unknown as TransportPayload)
+  }
+}

package/src/domain/profiling/transport/profilingBridge.ts

@@ -0,0 +1,9 @@
+import { getEventBridge } from '@kubesense/kubesense-browser-core'
+import type { ProfilingPayload } from '../types'
+
+export function createBridgeEmitter(): (payload: ProfilingPayload) => void {
+  const bridge = getEventBridge<'profile', ProfilingPayload>()!
+  return (payload: ProfilingPayload) => {
+    bridge.send('profile', payload)
+  }
+}

package/src/domain/profiling/{types/rumProfiler.types.ts → types.ts}

@@ -1,15 +1,8 @@
-import type { TimeoutId, ClocksState } from '@kubesense/kubesense-browser-core'
-import type { LongTaskContext } from '@kubesense/kubesense-browser-rum-core'
-import type { ProfilerTrace, Profiler } from './profilerApi.types'
-
-export interface RumViewEntry {
-  /** Detected start time of view */
-  readonly startClocks: ClocksState
-  /** RUM view id */
-  readonly viewId: string
-  /** RUM view name */
-  readonly viewName: string | undefined
-}
+import type { Profiler } from '@kubesense/kubesense-js-core/util'
+import type { ClocksState } from '@kubesense/kubesense-js-core/time'
+import type { TimeoutId } from '@kubesense/kubesense-browser-core'
+import type { BrowserProfileEvent, BrowserProfilerTrace, RumViewEntry } from '../../types'
+import type { LongTaskContext } from './longTaskHistory'
 
 /**
  * Additional data recorded during profiling session
@@ -21,23 +14,12 @@ export interface RumProfilerEnrichmentData {
   readonly views: RumViewEntry[]
 }
 
-export interface RumProfilerTrace extends ProfilerTrace, RumProfilerEnrichmentData {
-  /** High resolution time when profiler trace started, relative to the profiling session's time origin */
-  readonly startClocks: ClocksState
-  /** High resolution time when profiler trace ended, relative to the profiling session's time origin */
-  readonly endClocks: ClocksState
-  /** Time origin of the profiling session */
-  readonly clocksOrigin: ClocksState
-  /** Sample interval in milliseconds */
-  readonly sampleInterval: number
-}
-
 /**
  * Describes profiler session state when it's stopped
  */
 export interface RumProfilerStoppedInstance {
   readonly state: 'stopped'
-  readonly stateReason: 'session-expired' | 'stopped-by-user' | 'initializing'
+  readonly stateReason: 'session-expired' | 'stopped-by-user' | 'initializing' | 'quota_ko'
 }
 
 /**
@@ -61,21 +43,27 @@ export interface RumProfilerRunningInstance extends RumProfilerEnrichmentData {
   readonly timeoutId: TimeoutId
   /** Clean-up tasks to execute after running the Profiler */
   readonly cleanupTasks: Array<() => void>
+  /** Session ID */
+  readonly sessionId: string | undefined
 }
 
 export type RumProfilerInstance = RumProfilerStoppedInstance | RumProfilerPausedInstance | RumProfilerRunningInstance
 
 export interface RUMProfiler {
   start: () => void
-  stop: () => Promise<void>
+  stop: () => void
   isStopped: () => boolean
   isRunning: () => boolean
   isPaused: () => boolean
 }
 
+export interface ProfilingPayload {
+  profile: BrowserProfileEvent
+  trace: BrowserProfilerTrace
+}
+
 export interface RUMProfilerConfiguration {
   sampleIntervalMs: number // Sample stack trace every x milliseconds (defaults to 10ms for Unix, 16ms on Windows)
   collectIntervalMs: number // Interval for collecting RUM Profiles (defaults to 1min)
   minProfileDurationMs: number // Minimum duration of a profile for it be sent (defaults to 5s). Profiles shorter than this duration are discarded.
-  minNumberOfSamples: number // Minimum number of samples to be collected before it can be sent (defaults to 50). Profiles with fewer samples are discarded.
 }

package/src/domain/profiling/vitalHistory.ts

@@ -0,0 +1,106 @@
+import type { ClocksState, Duration } from '@kubesense/kubesense-js-core/time'
+import { elapsed, addDuration } from '@kubesense/kubesense-js-core/time'
+import { createValueHistory, SESSION_TIME_OUT_DELAY } from '@kubesense/kubesense-browser-core'
+import type { LifeCycle } from '@kubesense/kubesense-browser-rum-core'
+import { LifeCycleEventType, VitalType } from '@kubesense/kubesense-browser-rum-core'
+
+export const VITAL_ID_HISTORY_TIME_OUT_DELAY = SESSION_TIME_OUT_DELAY
+
+export interface VitalContext {
+  id: string
+  type: VitalType
+  label: string
+  operationKey?: string
+  duration?: Duration
+  startClocks: ClocksState
+}
+
+export function createVitalHistory(lifeCycle: LifeCycle) {
+  const history = createValueHistory<VitalContext>({
+    expireDelay: VITAL_ID_HISTORY_TIME_OUT_DELAY,
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.DURATION_VITAL_STARTED, (vitalStart) => {
+    history.add(
+      {
+        id: vitalStart.id,
+        type: VitalType.DURATION,
+        startClocks: vitalStart.startClocks,
+        duration: undefined,
+        label: vitalStart.name,
+      },
+      vitalStart.startClocks.relative
+    )
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, ({ rawRumEvent, startClocks, duration }) => {
+    if (rawRumEvent.type !== 'vital') {
+      return
+    }
+
+    // For operation step vitals, we only tag profiles with the start step's id.
+    // This means that if we receive an end step vital, we need to look for the
+    // corresponding start one and update its duration. If we receive a start step vital
+    // however, we just store it and wait for the end step.
+    if (rawRumEvent.vital.type === VitalType.OPERATION_STEP) {
+      if (rawRumEvent.vital.step_type === 'start') {
+        history.add(
+          {
+            id: rawRumEvent.vital.id,
+            type: rawRumEvent.vital.type,
+            operationKey: rawRumEvent.vital.operation_key,
+            startClocks,
+            label: rawRumEvent.vital.name,
+          },
+          startClocks.relative
+        )
+      } else if (rawRumEvent.vital.step_type === 'end') {
+        const historyEntry = history
+          .findAllEntries()
+          .find(
+            (entry) =>
+              entry.value.type === VitalType.OPERATION_STEP &&
+              entry.value.label === rawRumEvent.vital.name &&
+              entry.value.operationKey === rawRumEvent.vital.operation_key
+          )
+
+        if (!historyEntry) {
+          return
+        }
+
+        historyEntry.value.duration = elapsed(historyEntry.value.startClocks.relative, startClocks.relative)
+        historyEntry.close(startClocks.relative)
+      }
+
+      return
+    }
+
+    // All the other vital types are handled normally (i.e. stored in the
+    // history and tagged on the profiles)
+    const historyEntry = history
+      .getEntries(startClocks.relative)
+      .find((entry) => entry.value.id === rawRumEvent.vital.id)
+
+    if (historyEntry) {
+      historyEntry.value.duration = duration!
+      historyEntry.close(addDuration(startClocks.relative, duration!))
+      return
+    }
+
+    history
+      .add(
+        {
+          id: rawRumEvent.vital.id,
+          type: rawRumEvent.vital.type,
+          operationKey: rawRumEvent.vital.operation_key,
+          startClocks,
+          duration,
+          label: rawRumEvent.vital.name,
+        },
+        startClocks.relative
+      )
+      .close(addDuration(startClocks.relative, duration!))
+  })
+
+  return history
+}

package/src/domain/record/assembly.ts

@@ -1,10 +1,12 @@
-import { timeStampNow } from '@kubesense/kubesense-browser-core'
+import { timeStampNow } from '@kubesense/kubesense-js-core/time'
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
 import type { BrowserIncrementalData, BrowserIncrementalSnapshotRecord } from '../../types'
 import { RecordType } from '../../types'
 
 export function assembleIncrementalSnapshot<Data extends BrowserIncrementalData>(
   source: Data['source'],
-  data: Omit<Data, 'source'>
+  data: Omit<Data, 'source'>,
+  timestamp: TimeStamp = timeStampNow()
 ): BrowserIncrementalSnapshotRecord {
   return {
     data: {
@@ -12,6 +14,6 @@ export function assembleIncrementalSnapshot<Data extends BrowserIncrementalData>
       ...data,
     } as Data,
     type: RecordType.IncrementalSnapshot,
-    timestamp: timeStampNow(),
+    timestamp,
   }
 }

package/src/domain/record/canvas/canvasHash.ts

@@ -0,0 +1,54 @@
+import { mockable } from '@kubesense/kubesense-browser-core'
+import { globalObject } from '@kubesense/kubesense-js-core/util'
+import type { CanvasSnapshot } from './canvasSnapshot'
+import { createDownscaledCanvas } from './canvasSnapshot'
+
+export function computeImageHash(snapshot: CanvasSnapshot, maxHashDimension: number): Promise<string | undefined> {
+  const { height: sourceHeight, width: sourceWidth } = snapshot.source
+  // The snapshot is already frozen, so if it already fits, hash it directly instead of downscaling it again.
+  const thumbnail =
+    Math.max(sourceWidth, sourceHeight) <= maxHashDimension
+      ? snapshot.source
+      : createDownscaledCanvas(snapshot.source, sourceWidth, sourceHeight, maxHashDimension)
+  if (!thumbnail) {
+    return Promise.resolve(undefined)
+  }
+
+  const context = thumbnail.getContext('2d')
+  if (!context) {
+    return Promise.resolve(undefined)
+  }
+
+  const data = context.getImageData(0, 0, thumbnail.width, thumbnail.height).data
+  // crypto.subtle is only exposed in secure contexts, so it is missing on plain HTTP pages.
+  const subtleCrypto = mockable(globalObject.crypto?.subtle)
+  if (!subtleCrypto) {
+    return Promise.resolve(createChangeHash(snapshot.canvasWidth, snapshot.canvasHeight, fnv1aHash(data)))
+  }
+
+  return subtleCrypto.digest('SHA-256', data).then(
+    (buffer) => createChangeHash(snapshot.canvasWidth, snapshot.canvasHeight, arrayBufferToHex(buffer)),
+    () => createChangeHash(snapshot.canvasWidth, snapshot.canvasHeight, fnv1aHash(data))
+  )
+}
+
+function arrayBufferToHex(buffer: ArrayBuffer): string {
+  return Array.from(new Uint8Array(buffer), (byte) => byte.toString(16).padStart(2, '0')).join('')
+}
+
+function createChangeHash(width: number, height: number, pixelHash: string): string {
+  return `${width}x${height}-${pixelHash}`
+}
+
+/* eslint-disable no-bitwise */
+function fnv1aHash(data: ArrayLike<number>): string {
+  let hash = 0x811c9dc5
+
+  for (let index = 0; index < data.length; index += 1) {
+    hash ^= data[index]
+    hash = Math.imul(hash, 0x01000193)
+  }
+
+  return (hash >>> 0).toString(16).padStart(8, '0')
+}
+/* eslint-enable no-bitwise */

package/src/domain/record/canvas/canvasManager.ts

@@ -0,0 +1,175 @@
+export const enum CanvasStatus {
+  /** The canvas is clean, meaning it has not been marked as dirty or tainted */
+  Clean,
+  /** The canvas is dirty, meaning it has been marked as dirty by a draw operation */
+  Dirty,
+  /** The canvas is tainted, meaning it has been marked as tainted by a SecurityError */
+  Tainted,
+}
+
+export interface CanvasCaptureAttempt {
+  /** changeHash emitted the last time this canvas was captured, taken when the attempt started */
+  readonly lastChangeHash: string | undefined
+  /** false if the canvas was forgotten/reset, or if another attempt took its place */
+  isCurrent: () => boolean
+  /** stores the changeHash */
+  setLastChangeHash: (changeHash: string) => void
+}
+
+export interface CanvasContentMutation {
+  canvas: HTMLCanvasElement
+  captureAttempt: CanvasCaptureAttempt
+  hash: string
+  image: Blob
+}
+
+export interface CanvasManager {
+  /** Single entry point for the canvas status */
+  markCanvas: (canvas: HTMLCanvasElement, status: CanvasStatus) => void
+  /** The node left the DOM: forget its tracking state, but not its taint */
+  forgetCanvas: (canvas: HTMLCanvasElement) => void
+  /** width/height were assigned: the bitmap was cleared, so drop the last hash and mark dirty */
+  resetCanvasBitmap: (canvas: HTMLCanvasElement) => void
+  /** Takes dirty, connected, non-tainted canvases and clears their dirty state */
+  takeCapturableCanvases: () => HTMLCanvasElement[]
+  /** Starts a capture attempt for a canvas */
+  startCaptureAttempt: (canvas: HTMLCanvasElement) => CanvasCaptureAttempt
+  discardCaptureAttempt: (canvas: HTMLCanvasElement, captureAttempt: CanvasCaptureAttempt) => void
+  /** Discards the last capture hash and retries a rejected capture */
+  retryCanvas: (canvas: HTMLCanvasElement) => void
+  addCanvasContentMutation: (mutation: CanvasContentMutation) => void
+  takeCanvasContentMutations: () => CanvasContentMutation[]
+  /** New record stream: discards the per-stream tracking states (not the taint) */
+  reset: () => void
+}
+
+interface CanvasTrackingState {
+  capturePending: boolean
+  lastChangeHash?: string
+}
+
+export function createCanvasManager(): CanvasManager {
+  const dirtyCanvases = new Set<HTMLCanvasElement>()
+  const taintedCanvases = new WeakSet<HTMLCanvasElement>()
+  let canvasContentMutations: CanvasContentMutation[] = []
+  let canvasTrackingStates = new WeakMap<HTMLCanvasElement, CanvasTrackingState>()
+
+  function getTrackingState(canvas: HTMLCanvasElement): CanvasTrackingState {
+    let trackingState = canvasTrackingStates.get(canvas)
+    if (!trackingState) {
+      trackingState = { capturePending: false }
+      canvasTrackingStates.set(canvas, trackingState)
+    }
+    return trackingState
+  }
+
+  function startCaptureAttempt(canvas: HTMLCanvasElement): CanvasCaptureAttempt {
+    const trackingState = getTrackingState(canvas)
+    trackingState.capturePending = true
+    const isCurrent = () => canvasTrackingStates.get(canvas) === trackingState
+
+    return {
+      lastChangeHash: trackingState.lastChangeHash,
+      isCurrent,
+      setLastChangeHash: (changeHash) => {
+        if (isCurrent()) {
+          trackingState.lastChangeHash = changeHash
+        }
+      },
+    }
+  }
+
+  function markDirty(canvas: HTMLCanvasElement) {
+    if (!canvas.isConnected || taintedCanvases.has(canvas)) {
+      return
+    }
+    dirtyCanvases.add(canvas)
+  }
+
+  function markClean(canvas: HTMLCanvasElement) {
+    dirtyCanvases.delete(canvas)
+  }
+
+  function markTainted(canvas: HTMLCanvasElement) {
+    taintedCanvases.add(canvas)
+    dirtyCanvases.delete(canvas)
+  }
+
+  return {
+    markCanvas: (canvas, status) => {
+      switch (status) {
+        case CanvasStatus.Dirty:
+          markDirty(canvas)
+          return
+        case CanvasStatus.Clean:
+          markClean(canvas)
+          return
+        case CanvasStatus.Tainted:
+          markTainted(canvas)
+          return
+        default:
+          status satisfies never
+          return
+      }
+    },
+
+    forgetCanvas: (canvas) => {
+      dirtyCanvases.delete(canvas)
+      canvasTrackingStates.delete(canvas)
+    },
+
+    resetCanvasBitmap: (canvas) => {
+      canvasTrackingStates.delete(canvas)
+      markDirty(canvas)
+    },
+
+    takeCapturableCanvases: () => {
+      const capturableCanvases: HTMLCanvasElement[] = []
+
+      dirtyCanvases.forEach((canvas) => {
+        if (!canvas.isConnected) {
+          dirtyCanvases.delete(canvas)
+        } else if (!taintedCanvases.has(canvas) && !getTrackingState(canvas).capturePending) {
+          dirtyCanvases.delete(canvas)
+          capturableCanvases.push(canvas)
+        }
+      })
+
+      return capturableCanvases
+    },
+
+    startCaptureAttempt,
+
+    discardCaptureAttempt: (canvas, captureAttempt) => {
+      if (captureAttempt.isCurrent()) {
+        getTrackingState(canvas).capturePending = false
+      }
+    },
+
+    retryCanvas: (canvas) => {
+      canvasTrackingStates.delete(canvas)
+      markDirty(canvas)
+    },
+
+    addCanvasContentMutation: (mutation) => {
+      canvasContentMutations.push(mutation)
+    },
+
+    takeCanvasContentMutations: () => {
+      const mutations = canvasContentMutations
+      canvasContentMutations = []
+      for (const mutation of mutations) {
+        if (mutation.captureAttempt.isCurrent()) {
+          getTrackingState(mutation.canvas).capturePending = false
+        }
+      }
+      return mutations
+    },
+
+    reset: () => {
+      dirtyCanvases.clear()
+      canvasContentMutations = []
+      canvasTrackingStates = new WeakMap()
+    },
+  }
+}

package/src/domain/record/canvas/canvasSnapshot.ts

@@ -0,0 +1,52 @@
+export interface CanvasSnapshot {
+  canvasHeight: number
+  canvasWidth: number
+  source: HTMLCanvasElement
+}
+
+export function createCanvasSnapshot(canvas: HTMLCanvasElement, maxImageDimension: number): CanvasSnapshot | undefined {
+  const canvasWidth = canvas.width
+  const canvasHeight = canvas.height
+  const source = createDownscaledCanvas(canvas, canvasWidth, canvasHeight, maxImageDimension)
+  if (!source) {
+    return undefined
+  }
+
+  return { canvasHeight, canvasWidth, source }
+}
+
+// Downscales `image` (of size `width`x`height`) to fit within `maxDimension` on a fresh canvas.
+export function createDownscaledCanvas(
+  image: CanvasImageSource,
+  width: number,
+  height: number,
+  maxDimension: number
+): HTMLCanvasElement | undefined {
+  const scale = Math.min(1, maxDimension / Math.max(width, height))
+  const scaledWidth = Math.max(1, Math.round(width * scale))
+  const scaledHeight = Math.max(1, Math.round(height * scale))
+
+  const canvas = document.createElement('canvas')
+  canvas.width = scaledWidth
+  canvas.height = scaledHeight
+
+  const context = canvas.getContext('2d')
+  if (!context) {
+    return undefined
+  }
+
+  context.imageSmoothingQuality = 'low'
+  context.drawImage(image, 0, 0, scaledWidth, scaledHeight)
+
+  return canvas
+}
+
+export function captureCanvasImage(snapshot: CanvasSnapshot, encodeQuality: number): Promise<Blob | undefined> {
+  return new Promise((resolve) => {
+    try {
+      snapshot.source.toBlob((blob) => resolve(blob ?? undefined), 'image/webp', encodeQuality)
+    } catch {
+      resolve(undefined)
+    }
+  })
+}

package/src/domain/record/canvas/canvasUtils.ts

@@ -0,0 +1,11 @@
+import { isElementNode } from '@kubesense/kubesense-browser-rum-core'
+
+const CANVAS_SIZE_ATTRIBUTES = ['width', 'height']
+
+export function isCanvasElement(node: Node): node is HTMLCanvasElement {
+  return isElementNode(node) && node.tagName === 'CANVAS'
+}
+
+export function isCanvasSizeAttribute(attributeName: string): boolean {
+  return CANVAS_SIZE_ATTRIBUTES.includes(attributeName.toLowerCase())
+}