Integrate e063320 (#2663) from aymeric/fix-cannot-read-property-lengt…

…h-of-undefined-ref into staging-13

Co-authored-by: Aymeric Mortemousque <[email protected]>

packages/core/src/tools/utils/polyfills.spec.ts

@@ -1,4 +1,4 @@
-import { startsWith, arrayFrom, cssEscape, elementMatches } from './polyfills'
+import { startsWith, arrayFrom } from './polyfills'
 
 describe('polyfills', () => {
   describe('startWith', () => {
@@ -26,27 +26,4 @@ describe('polyfills', () => {
       expect(arrayFrom(div.classList)).toEqual(['foo'])
     })
   })
-
-  describe('cssEscape', () => {
-    it('should escape a string', () => {
-      expect(cssEscape('.foo#bar')).toEqual('\\.foo\\#bar')
-      expect(cssEscape('()[]{}')).toEqual('\\(\\)\\[\\]\\{\\}')
-      expect(cssEscape('--a')).toEqual('--a')
-      expect(cssEscape('\0')).toEqual('\ufffd')
-    })
-  })
-
-  describe('elementMatches', () => {
-    it('should return true if the element matches the selector', () => {
-      const element = document.createElement('div')
-      element.classList.add('foo')
-      expect(elementMatches(element, '.foo')).toEqual(true)
-    })
-
-    it('should return false if the element does not match the selector', () => {
-      const element = document.createElement('div')
-      element.classList.add('bar')
-      expect(elementMatches(element, '.foo')).toEqual(false)
-    })
-  })
 })

packages/core/src/tools/utils/polyfills.ts

@@ -73,38 +73,6 @@ export function endsWith(candidate: string, search: string) {
   return candidate.slice(-search.length) === search
 }
 
-export function elementMatches(element: Element & { msMatchesSelector?(selector: string): boolean }, selector: string) {
-  if (element.matches) {
-    return element.matches(selector)
-  }
-  // IE11 support
-  if (element.msMatchesSelector) {
-    return element.msMatchesSelector(selector)
-  }
-  return false
-}
-
-// https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/selector/escapeSelector.js
-export function cssEscape(str: string) {
-  if (window.CSS && window.CSS.escape) {
-    return window.CSS.escape(str)
-  }
-
-  // eslint-disable-next-line no-control-regex
-  return str.replace(/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g, function (ch, asCodePoint) {
-    if (asCodePoint) {
-      // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
-      if (ch === '\0') {
-        return '\uFFFD'
-      }
-      // Control characters and (dependent upon position) numbers get escaped as code points
-      return `${ch.slice(0, -1)}\\${ch.charCodeAt(ch.length - 1).toString(16)} `
-    }
-    // Other potentially-special ASCII characters get backslash-escaped
-    return `\\${ch}`
-  })
-}
-
 interface Assignable {
   [key: string]: any
 }

packages/rum-core/src/browser/polyfills.spec.ts

@@ -0,0 +1,57 @@
+import { appendElement } from '../../test'
+import { cssEscape, elementMatches, getClassList, getParentElement } from './polyfills'
+
+describe('cssEscape', () => {
+  it('should escape a string', () => {
+    expect(cssEscape('.foo#bar')).toEqual('\\.foo\\#bar')
+    expect(cssEscape('()[]{}')).toEqual('\\(\\)\\[\\]\\{\\}')
+    expect(cssEscape('--a')).toEqual('--a')
+    expect(cssEscape('\0')).toEqual('\ufffd')
+  })
+})
+
+describe('elementMatches', () => {
+  it('should return true if the element matches the selector', () => {
+    const element = document.createElement('div')
+    element.classList.add('foo')
+    expect(elementMatches(element, '.foo')).toEqual(true)
+  })
+
+  it('should return false if the element does not match the selector', () => {
+    const element = document.createElement('div')
+    element.classList.add('bar')
+    expect(elementMatches(element, '.foo')).toEqual(false)
+  })
+})
+
+describe('getParentElement', () => {
+  it('should return the parentElement of a element that supports the parentElement property', () => {
+    const divElement = appendElement('<div class="parent"><div target></div></div>')
+    const parenElement = getParentElement(divElement)
+    expect(parenElement?.className).toEqual('parent')
+  })
+
+  it('should return the parentElement of a element that does not support the parentElement property (e.g.: svg on IE)', () => {
+    const svgElement = appendElement('<div class="parent"><svg target></svg></div>')
+    Object.defineProperty(svgElement, 'parenElement', { get: () => undefined })
+    const parenElement = getParentElement(svgElement)
+    expect(parenElement?.className).toEqual('parent')
+  })
+})
+
+describe('getClassList', () => {
+  it('should return the classList of an element that supports the classList property', () => {
+    const divElement = appendElement('<div class="foo bar"></div>')
+    const classList = getClassList(divElement)
+    expect(classList[0]).toEqual('foo')
+    expect(classList[1]).toEqual('bar')
+  })
+
+  it('should return the classList of an element that does not support the classList property (e.g.: svg on IE)', () => {
+    const svgElement = appendElement('<svg class="foo bar"></svg>')
+    Object.defineProperty(svgElement, 'classList', { get: () => undefined })
+    const classList = getClassList(svgElement)
+    expect(classList[0]).toEqual('foo')
+    expect(classList[1]).toEqual('bar')
+  })
+})

packages/rum-core/src/browser/polyfills.ts

@@ -0,0 +1,64 @@
+// https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/selector/escapeSelector.js
+export function cssEscape(str: string) {
+  if (window.CSS && window.CSS.escape) {
+    return window.CSS.escape(str)
+  }
+
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g, function (ch, asCodePoint) {
+    if (asCodePoint) {
+      // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
+      if (ch === '\0') {
+        return '\uFFFD'
+      }
+      // Control characters and (dependent upon position) numbers get escaped as code points
+      return `${ch.slice(0, -1)}\\${ch.charCodeAt(ch.length - 1).toString(16)} `
+    }
+    // Other potentially-special ASCII characters get backslash-escaped
+    return `\\${ch}`
+  })
+}
+
+export function elementMatches(element: Element & { msMatchesSelector?(selector: string): boolean }, selector: string) {
+  if (element.matches) {
+    return element.matches(selector)
+  }
+  // IE11 support
+  if (element.msMatchesSelector) {
+    return element.msMatchesSelector(selector)
+  }
+  return false
+}
+
+/**
+ * Return the parentElement of an node
+ *
+ * In cases where parentElement is not supported, such as in IE11 for SVG nodes, we fallback to parentNode
+ */
+export function getParentElement(node: Node): HTMLElement | null {
+  if (node.parentElement) {
+    return node.parentElement
+  }
+
+  let parentNode = node.parentNode
+  while (parentNode !== null && parentNode.nodeType !== Node.ELEMENT_NODE) {
+    parentNode = node.parentNode
+  }
+
+  return parentNode as HTMLElement | null
+}
+
+/**
+ * Return the classList of an element or an array of classes if classList is not supported
+ *
+ * In cases where classList is not supported, such as in IE11 for SVG and MathML elements,
+ * we fallback to using element.getAttribute('class').
+ * We opt for element.getAttribute('class') over element.className because className returns an SVGAnimatedString for SVG elements.
+ */
+export function getClassList(element: Element): DOMTokenList | string[] {
+  if (element.classList) {
+    return element.classList
+  }
+
+  return (element.getAttribute('class') || '').split(/\s+/)
+}

packages/rum-core/src/domain/action/computeFrustration.ts

@@ -1,5 +1,6 @@
-import { elementMatches, ONE_SECOND } from '@datadog/browser-core'
+import { ONE_SECOND } from '@datadog/browser-core'
 import { FrustrationType } from '../../rawRumEvent.types'
+import { elementMatches } from '../../browser/polyfills'
 import type { Click } from './trackClickActions'
 
 const MIN_CLICKS_PER_SECOND_TO_CONSIDER_RAGE = 3

packages/rum-core/src/domain/action/getActionNameFromElement.spec.ts

@@ -250,6 +250,18 @@ describe('getActionNameFromElement', () => {
     ).toBe('foo')
   })
 
+  it('computes an action name on SVG elements (IE does not support parentElement property on them)', () => {
+    expect(
+      getActionNameFromElement(
+        appendElement(`
+         <button>
+          foo <svg target></svg>
+         <button>
+      `)
+      )
+    ).toBe('foo')
+  })
+
   describe('programmatically declared action name', () => {
     it('extracts the name from the data-dd-action-name attribute', () => {
       expect(

packages/rum-core/src/domain/action/getActionNameFromElement.ts

@@ -1,4 +1,5 @@
 import { safeTruncate, isIE, find } from '@datadog/browser-core'
+import { getParentElement } from '../../browser/polyfills'
 
 /**
  * Get the action name from the attribute 'data-dd-action-name' on the element or any of its parent.
@@ -37,7 +38,7 @@ function getActionNameFromElementProgrammatically(targetElement: Element, progra
         elementWithAttribute = element
         break
       }
-      element = element.parentElement
+      element = getParentElement(element)
     }
   }
 
@@ -147,7 +148,7 @@ function getActionNameFromElementForStrategies(
     if (element.nodeName === 'FORM') {
       break
     }
-    element = element.parentElement
+    element = getParentElement(element)
     recursionCounter += 1
   }
 }

packages/rum-core/src/domain/getSelectorFromElement.spec.ts

@@ -22,7 +22,7 @@ describe('getSelectorFromElement', () => {
 
   describe('class selector', () => {
     it('should use the class selector when the element as classes', () => {
-      expect(getSelector('<div class="foo"></div>')).toBe('BODY>DIV.foo')
+      expect(getSelector('<div target class="foo"></div>')).toBe('BODY>DIV.foo')
     })
 
     it('should use the class selector when siblings have the same classes but different tags', () => {
@@ -157,6 +157,11 @@ describe('getSelectorFromElement', () => {
     })
   })
 
+  it('should compute a CSS selector on SVG elements (IE does not support classList nor parentElement properties on them)', () => {
+    const element = appendElement('<svg class="foo"></svg>')
+    expect(getSelector(element)).toBe('BODY>svg.foo')
+  })
+
   function getSelector(htmlOrElement: string | Element, actionNameAttribute?: string): string {
     return getSelectorFromElement(
       typeof htmlOrElement === 'string' ? appendElement(htmlOrElement) : htmlOrElement,

packages/rum-core/src/domain/getSelectorFromElement.ts

@@ -1,4 +1,4 @@
-import { cssEscape } from '@datadog/browser-core'
+import { cssEscape, getClassList, getParentElement } from '../browser/polyfills'
 import { DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from './action/getActionNameFromElement'
 
 /**
@@ -64,7 +64,7 @@ export function getSelectorFromElement(targetElement: Element, actionNameAttribu
     targetElementSelector =
       uniqueSelectorAmongChildren || combineSelector(getPositionSelector(element), targetElementSelector)
 
-    element = element.parentElement
+    element = getParentElement(element)
   }
 
   return targetElementSelector
@@ -92,15 +92,14 @@ function getClassSelector(element: Element): string | undefined {
   if (element.tagName === 'BODY') {
     return
   }
-  if (element.classList.length > 0) {
-    for (let i = 0; i < element.classList.length; i += 1) {
-      const className = element.classList[i]
-      if (isGeneratedValue(className)) {
-        continue
-      }
-
-      return `${cssEscape(element.tagName)}.${cssEscape(className)}`
+  const classList = getClassList(element)
+  for (let i = 0; i < classList.length; i += 1) {
+    const className = classList[i]
+    if (isGeneratedValue(className)) {
+      continue
     }
+
+    return `${cssEscape(element.tagName)}.${cssEscape(className)}`
   }
 }
 
@@ -182,7 +181,7 @@ function isSelectorUniqueGlobally(element: Element, selector: string): boolean {
  */
 function isSelectorUniqueAmongSiblings(element: Element, selector: string): boolean {
   return (
-    element.parentElement!.querySelectorAll(supportScopeSelector() ? combineSelector(':scope', selector) : selector)
+    getParentElement(element)!.querySelectorAll(supportScopeSelector() ? combineSelector(':scope', selector) : selector)
       .length === 1
   )
 }

packages/rum-core/src/index.ts

@@ -33,4 +33,5 @@ export { RumInitConfiguration, RumConfiguration } from './domain/configuration'
 export { DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from './domain/action/getActionNameFromElement'
 export { STABLE_ATTRIBUTES } from './domain/getSelectorFromElement'
 export * from './browser/htmlDomUtils'
+export * from './browser/polyfills'
 export { getSessionReplayUrl } from './domain/getSessionReplayUrl'

packages/rum/src/domain/record/observers/inputObserver.ts

@@ -1,5 +1,6 @@
 import type { ListenerHandler } from '@datadog/browser-core'
-import { instrumentSetter, assign, DOM_EVENT, addEventListeners, forEach, noop, cssEscape } from '@datadog/browser-core'
+import { instrumentSetter, assign, DOM_EVENT, addEventListeners, forEach, noop } from '@datadog/browser-core'
+import { cssEscape } from '@datadog/browser-rum-core'
 import type { RumConfiguration } from '@datadog/browser-rum-core'
 import { NodePrivacyLevel } from '../../../constants'
 import type { InputState } from '../../../types'