fix: angular change detection mutation observer

eslint-rules/no-direct-mutation-observer.js

@@ -0,0 +1,58 @@
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description:
+                'Disallow direct use of MutationObserver and enforce importing NativeMutationObserver from global.ts',
+            category: 'Best Practices',
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            noDirectMutationObserver:
+                'Direct use of MutationObserver is not allowed. Use NativeMutationObserver from global.ts instead.',
+            missingNativeMutationObserver:
+                'You must import NativeMutationObserver from global.ts to use MutationObserver functionality.',
+        },
+    },
+    create(context) {
+        let importedNativeMutationObserver = false
+        const targetFileName = 'utils/global'
+
+        return {
+            ImportDeclaration(node) {
+                // Check if 'NativeMutationObserver' is imported from 'global.ts'
+                if (node.source.value.includes(targetFileName)) {
+                    const importedSpecifiers = node.specifiers.map(
+                        (specifier) => specifier.imported && specifier.imported.name
+                    )
+                    if (importedSpecifiers.includes('NativeMutationObserver')) {
+                        importedNativeMutationObserver = true
+                    }
+                }
+            },
+            NewExpression(node) {
+                // Check if `MutationObserver` is used
+                if (node.callee.type === 'Identifier' && node.callee.name === 'MutationObserver') {
+                    if (!importedNativeMutationObserver) {
+                        context.report({
+                            node,
+                            messageId: 'noDirectMutationObserver',
+                        })
+                    }
+                }
+            },
+            Identifier(node) {
+                // Warn if `MutationObserver` is directly referenced outside of a `new` expression (rare cases)
+                if (node.name === 'MutationObserver' && node.parent.type !== 'NewExpression') {
+                    if (!importedNativeMutationObserver) {
+                        context.report({
+                            node,
+                            messageId: 'missingNativeMutationObserver',
+                        })
+                    }
+                }
+            },
+        }
+    },
+}

src/entrypoints/dead-clicks-autocapture.ts

@@ -5,6 +5,7 @@ import { autocaptureCompatibleElements, getEventTarget } from '../autocapture-ut
 import { DeadClickCandidate, DeadClicksAutoCaptureConfig, Properties } from '../types'
 import { autocapturePropertiesForElement } from '../autocapture'
 import { isElementInToolbar, isElementNode, isTag } from '../utils/element-utils'
+import { NativeMutationObserver } from '../utils/globals'
 
 function asClick(event: MouseEvent): DeadClickCandidate | null {
     const eventTarget = getEventTarget(event)
@@ -66,7 +67,7 @@ class LazyLoadedDeadClicksAutocapture implements LazyLoadedDeadClicksAutocapture
 
     private _startMutationObserver(observerTarget: Node) {
         if (!this._mutationObserver) {
-            this._mutationObserver = new MutationObserver((mutations) => {
+            this._mutationObserver = new NativeMutationObserver((mutations) => {
                 this.onMutation(mutations)
             })
             this._mutationObserver.observe(observerTarget, {
@@ -99,6 +100,8 @@ class LazyLoadedDeadClicksAutocapture implements LazyLoadedDeadClicksAutocapture
     private _onClick = (event: MouseEvent): void => {
         const click = asClick(event)
         if (!isNull(click) && !this._ignoreClick(click)) {
+            // eslint-disable-next-line no-console
+            console.log('deadclicks detected a click', click)
             this._clicks.push(click)
         }
 
@@ -209,9 +212,25 @@ class LazyLoadedDeadClicksAutocapture implements LazyLoadedDeadClicksAutocapture
 
             if (hadScroll || hadMutation || hadSelectionChange) {
                 // ignore clicks that had a scroll or mutation
+                // eslint-disable-next-line no-console
+                console.log('not a dead click', {
+                    click,
+                    hadScroll,
+                    hadMutation,
+                    hadSelectionChange,
+                })
                 continue
             }
 
+            // eslint-disable-next-line no-console
+            console.log('dead click?', {
+                isdc: scrollTimeout || mutationTimeout || absoluteTimeout || selectionChangedTimeout,
+                scrollTimeout,
+                mutationTimeout,
+                absoluteTimeout,
+                selectionChangedTimeout,
+            })
+
             if (scrollTimeout || mutationTimeout || absoluteTimeout || selectionChangedTimeout) {
                 this._onCapture(click, {
                     $dead_click_last_mutation_timestamp: this._lastMutation,

src/utils/globals.ts

@@ -2,6 +2,7 @@ import { ErrorProperties } from '../extensions/exception-autocapture/error-conve
 import type { PostHog } from '../posthog-core'
 import { SessionIdManager } from '../sessionid'
 import { DeadClicksAutoCaptureConfig, ErrorEventArgs, ErrorMetadata, Properties } from '../types'
+import { getNativeMutationObserverImplementation } from './prototype-utils'
 
 /*
  * Global helpers to protect access to browser globals in a way that is safer for different targets
@@ -16,6 +17,12 @@ import { DeadClicksAutoCaptureConfig, ErrorEventArgs, ErrorMetadata, Properties
 // eslint-disable-next-line no-restricted-globals
 const win: (Window & typeof globalThis) | undefined = typeof window !== 'undefined' ? window : undefined
 
+export type AssignableWindow = Window &
+    typeof globalThis &
+    Record<string, any> & {
+        __PosthogExtensions__?: PostHogExtensions
+    }
+
 /**
  * This is our contract between (potentially) lazily loaded extensions and the SDK
  * changes to this interface can be breaking changes for users of the SDK
@@ -86,10 +93,10 @@ export const XMLHttpRequest =
     global?.XMLHttpRequest && 'withCredentials' in new global.XMLHttpRequest() ? global.XMLHttpRequest : undefined
 export const AbortController = global?.AbortController
 export const userAgent = navigator?.userAgent
-export const assignableWindow: Window &
-    typeof globalThis &
-    Record<string, any> & {
-        __PosthogExtensions__?: PostHogExtensions
-    } = win ?? ({} as any)
-
+export const assignableWindow: AssignableWindow = win ?? ({} as any)
+/**
+ * We have to sometimes load mutation observer from an iframe
+ * because Angular change detection really doesn't like sharing it
+ */
+export const NativeMutationObserver = getNativeMutationObserverImplementation(assignableWindow)
 export { win as window }

src/utils/prototype-utils.ts

@@ -0,0 +1,67 @@
+/**
+ * adapted from https://github.com/getsentry/sentry-javascript/blob/72751dacb88c5b970d8bac15052ee8e09b28fd5d/packages/browser-utils/src/getNativeImplementation.ts#L27
+ * and https://github.com/PostHog/rrweb/blob/804380afbb1b9bed70b8792cb5a25d827f5c0cb5/packages/utils/src/index.ts#L31
+ * after a number of performance reports from Angular users
+ */
+
+import { AssignableWindow } from './globals'
+import { isAngularZonePatchedFunction, isFunction, isNativeFunction } from './type-utils'
+import { logger } from './logger'
+
+interface NativeImplementationsCache {
+    // eslint-disable-next-line posthog-js/no-direct-mutation-observer
+    MutationObserver: typeof MutationObserver
+    setTimeout: typeof setTimeout
+    addEventListener: typeof addEventListener
+    setInterval: typeof setInterval
+}
+
+const cachedImplementations: Partial<NativeImplementationsCache> = {}
+
+export function getNativeImplementation<T extends keyof NativeImplementationsCache>(
+    name: T,
+    assignableWindow: AssignableWindow
+): NativeImplementationsCache[T] {
+    const cached = cachedImplementations[name]
+    if (cached) {
+        return cached
+    }
+
+    let impl = assignableWindow[name] as NativeImplementationsCache[T]
+
+    if (isNativeFunction(impl) && !isAngularZonePatchedFunction(impl)) {
+        // eslint-disable-next-line no-console
+        console.log(name + ' is a native function, no need to create a sandbox')
+        return (cachedImplementations[name] = impl.bind(assignableWindow) as NativeImplementationsCache[T])
+    }
+
+    const document = assignableWindow.document
+    if (document && isFunction(document.createElement)) {
+        try {
+            const sandbox = document.createElement('iframe')
+            sandbox.hidden = true
+            document.head.appendChild(sandbox)
+            const contentWindow = sandbox.contentWindow
+            if (contentWindow && (contentWindow as any)[name]) {
+                impl = (contentWindow as any)[name] as NativeImplementationsCache[T]
+            }
+            document.head.removeChild(sandbox)
+        } catch (e) {
+            // Could not create sandbox iframe, just use assignableWindow.xxx
+            logger.warn(`Could not create sandbox iframe for ${name} check, bailing to assignableWindow.${name}: `, e)
+        }
+    }
+
+    // Sanity check: This _should_ not happen, but if it does, we just skip caching...
+    // This can happen e.g. in tests where fetch may not be available in the env, or similar.
+    if (!impl || !isFunction(impl)) {
+        return impl
+    }
+
+    return (cachedImplementations[name] = impl.bind(assignableWindow) as NativeImplementationsCache[T])
+}
+
+// eslint-disable-next-line posthog-js/no-direct-mutation-observer
+export function getNativeMutationObserverImplementation(assignableWindow: AssignableWindow): typeof MutationObserver {
+    return getNativeImplementation('MutationObserver', assignableWindow)
+}

src/utils/type-utils.ts

@@ -19,6 +19,22 @@ export const isFunction = function (f: any): f is (...args: any[]) => any {
     // eslint-disable-next-line posthog-js/no-direct-function-check
     return typeof f === 'function'
 }
+
+export const isNativeFunction = function (f: any): f is (...args: any[]) => any {
+    // eslint-disable-next-line no-console
+    console.log(f.toString())
+    return isFunction(f) && f.toString().indexOf('[native code]') !== -1
+}
+
+// When angular patches functions they pass the above `isNativeFunction` check
+export const isAngularZonePatchedFunction = function (f: any): boolean {
+    if (!isFunction(f)) {
+        return false
+    }
+    const prototypeKeys = Object.getOwnPropertyNames(f.prototype || {})
+    return prototypeKeys.some((key) => key.indexOf('__zone'))
+}
+
 // Underscore Addons
 export const isObject = function (x: unknown): x is Record<string, any> {
     // eslint-disable-next-line posthog-js/no-direct-object-check