feat(replay): Use unwrapped setTimeout to avoid e.g. angular change…

… detection (#11924)

This PR makes sure we use the native, unwrapped `setTimeout`
implementation of the browser. Some environments, e.g. Angular, monkey
patch this for their change detection, leading to performance issues
(possibly). We have already changed this in rrweb, but we also have some
usage of this in replay itself.

This PR _should_ work fine, however all test fail today because we
heavily use `jest.useFakeTimers()`, which basically monkey patches fetch
too. So with this change, we do not use the patched timers, leading to
everything blowing up 🤯


Based on #11864
Depends on #11899

---------

Co-authored-by: Francesco Novy <[email protected]>

packages/browser-utils/src/getNativeImplementation.ts

@@ -0,0 +1,131 @@
+import { logger } from '@sentry/utils';
+import { DEBUG_BUILD } from './debug-build';
+import { WINDOW } from './types';
+
+/**
+ * We generally want to use window.fetch / window.setTimeout.
+ * However, in some cases this may be wrapped (e.g. by Zone.js for Angular),
+ * so we try to get an unpatched version of this from a sandboxed iframe.
+ */
+
+interface CacheableImplementations {
+ setTimeout: typeof WINDOW.setTimeout;
+ fetch: typeof WINDOW.fetch;
+}
+
+const cachedImplementations: Partial<CacheableImplementations> = {};
+
+/**
+ * isNative checks if the given function is a native implementation
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+function isNative(func: Function): boolean {
+ return func && /^function\s+\w+\(\)\s+\{\s+\[native code\]\s+\}$/.test(func.toString());
+}
+
+/**
+ * Get the native implementation of a browser function.
+ *
+ * This can be used to ensure we get an unwrapped version of a function, in cases where a wrapped function can lead to problems.
+ *
+ * The following methods can be retrieved:
+ * - `setTimeout`: This can be wrapped by e.g. Angular, causing change detection to be triggered.
+ * - `fetch`: This can be wrapped by e.g. ad-blockers, causing an infinite loop when a request is blocked.
+ */
+export function getNativeImplementation<T extends keyof CacheableImplementations>(
+ name: T,
+): CacheableImplementations[T] {
+ const cached = cachedImplementations[name];
+ if (cached) {
+ return cached;
+ }
+
+ let impl = WINDOW[name] as CacheableImplementations[T];
+
+ // Fast path to avoid DOM I/O
+ if (isNative(impl)) {
+ return (cachedImplementations[name] = impl.bind(WINDOW) as CacheableImplementations[T]);
+ }
+
+ const document = WINDOW.document;
+ // eslint-disable-next-line deprecation/deprecation
+ if (document && typeof document.createElement === 'function') {
+ try {
+ const sandbox = document.createElement('iframe');
+ sandbox.hidden = true;
+ document.head.appendChild(sandbox);
+ const contentWindow = sandbox.contentWindow;
+ if (contentWindow && contentWindow[name]) {
+ impl = contentWindow[name] as CacheableImplementations[T];
+ }
+ document.head.removeChild(sandbox);
+ } catch (e) {
+ // Could not create sandbox iframe, just use window.xxx
+ DEBUG_BUILD && logger.warn(`Could not create sandbox iframe for ${name} check, bailing to window.${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) {
+ return impl;
+ }
+
+ return (cachedImplementations[name] = impl.bind(WINDOW) as CacheableImplementations[T]);
+}
+
+/** Clear a cached implementation. */
+export function clearCachedImplementation(name: keyof CacheableImplementations): void {
+ cachedImplementations[name] = undefined;
+}
+
+/**
+ * A special usecase for incorrectly wrapped Fetch APIs in conjunction with ad-blockers.
+ * Whenever someone wraps the Fetch API and returns the wrong promise chain,
+ * this chain becomes orphaned and there is no possible way to capture it's rejections
+ * other than allowing it bubble up to this very handler. eg.
+ *
+ * const f = window.fetch;
+ * window.fetch = function () {
+ * const p = f.apply(this, arguments);
+ *
+ * p.then(function() {
+ * console.log('hi.');
+ * });
+ *
+ * return p;
+ * }
+ *
+ * `p.then(function () { ... })` is producing a completely separate promise chain,
+ * however, what's returned is `p` - the result of original `fetch` call.
+ *
+ * This mean, that whenever we use the Fetch API to send our own requests, _and_
+ * some ad-blocker blocks it, this orphaned chain will _always_ reject,
+ * effectively causing another event to be captured.
+ * This makes a whole process become an infinite loop, which we need to somehow
+ * deal with, and break it in one way or another.
+ *
+ * To deal with this issue, we are making sure that we _always_ use the real
+ * browser Fetch API, instead of relying on what `window.fetch` exposes.
+ * The only downside to this would be missing our own requests as breadcrumbs,
+ * but because we are already not doing this, it should be just fine.
+ *
+ * Possible failed fetch error messages per-browser:
+ *
+ * Chrome: Failed to fetch
+ * Edge: Failed to Fetch
+ * Firefox: NetworkError when attempting to fetch resource
+ * Safari: resource blocked by content blocker
+ */
+export function fetch(...rest: Parameters<typeof WINDOW.fetch>): ReturnType<typeof WINDOW.fetch> {
+ return getNativeImplementation('fetch')(...rest);
+}
+
+/**
+ * Get an unwrapped `setTimeout` method.
+ * This ensures that even if e.g. Angular wraps `setTimeout`, we get the native implementation,
+ * avoiding triggering change detection.
+ */
+export function setTimeout(...rest: Parameters<typeof WINDOW.setTimeout>): ReturnType<typeof WINDOW.setTimeout> {
+ return getNativeImplementation('setTimeout')(...rest);
+}

packages/browser-utils/src/index.ts

@@ -18,7 +18,6 @@ export { addClickKeypressInstrumentationHandler } from './instrument/dom';
 
 export { addHistoryInstrumentationHandler } from './instrument/history';
 
-export {
- addXhrInstrumentationHandler,
- SENTRY_XHR_DATA_KEY,
-} from './instrument/xhr';
+export { fetch, setTimeout, clearCachedImplementation, getNativeImplementation } from './getNativeImplementation';
+
+export { addXhrInstrumentationHandler, SENTRY_XHR_DATA_KEY } from './instrument/xhr';

packages/browser-utils/src/instrument/dom.ts

@@ -1,7 +1,7 @@
 import type { HandlerDataDom } from '@sentry/types';
 
 import { addHandler, addNonEnumerableProperty, fill, maybeInstrument, triggerHandlers, uuid4 } from '@sentry/utils';
-import { WINDOW } from '../metrics/types';
+import { WINDOW } from '../types';
 
 type SentryWrappedTarget = HTMLElement & { _sentryId?: string };
 

packages/browser-utils/src/instrument/history.ts

@@ -1,6 +1,6 @@
 import type { HandlerDataHistory } from '@sentry/types';
 import { addHandler, fill, maybeInstrument, supportsHistory, triggerHandlers } from '@sentry/utils';
-import { WINDOW } from '../metrics/types';
+import { WINDOW } from '../types';
 
 let lastHref: string | undefined;
 

packages/browser-utils/src/instrument/xhr.ts

@@ -1,7 +1,7 @@
 import type { HandlerDataXhr, SentryWrappedXMLHttpRequest, WrappedFunction } from '@sentry/types';
 
 import { addHandler, fill, isString, maybeInstrument, timestampInSeconds, triggerHandlers } from '@sentry/utils';
-import { WINDOW } from '../metrics/types';
+import { WINDOW } from '../types';
 
 export const SENTRY_XHR_DATA_KEY = '__sentry_xhr_v3__';
 

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -6,14 +6,14 @@ import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logge
 
 import { spanToJSON } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
+import { WINDOW } from '../types';
 import {
  addClsInstrumentationHandler,
  addFidInstrumentationHandler,
  addLcpInstrumentationHandler,
  addPerformanceInstrumentationHandler,
  addTtfbInstrumentationHandler,
 } from './instrument';
-import { WINDOW } from './types';
 import { getBrowserPerformanceAPI, isMeasurementValue, msToSec, startAndEndSpan } from './utils';
 import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
 import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';

packages/browser-utils/src/metrics/utils.ts

@@ -1,7 +1,7 @@
 import type { SentrySpan } from '@sentry/core';
 import { spanToJSON, startInactiveSpan, withActiveSpan } from '@sentry/core';
 import type { Span, SpanTimeInput, StartSpanOptions } from '@sentry/types';
-import { WINDOW } from './types';
+import { WINDOW } from '../types';
 
 /**
  * Checks if a given value is a valid measurement value.

packages/browser-utils/src/metrics/web-vitals/getINP.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../types';
+import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { initMetric } from './lib/initMetric';
 import { observe } from './lib/observe';

packages/browser-utils/src/metrics/web-vitals/getLCP.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../types';
+import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
 import { getVisibilityWatcher } from './lib/getVisibilityWatcher';

packages/browser-utils/src/metrics/web-vitals/lib/getNavigationEntry.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
+import { WINDOW } from '../../../types';
 import type { NavigationTimingPolyfillEntry } from '../types';
 
 export const getNavigationEntry = (): PerformanceNavigationTiming | NavigationTimingPolyfillEntry | undefined => {

packages/browser-utils/src/metrics/web-vitals/lib/getVisibilityWatcher.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
+import { WINDOW } from '../../../types';
 
 let firstHiddenTime = -1;
 

packages/browser-utils/src/metrics/web-vitals/lib/initMetric.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
+import { WINDOW } from '../../../types';
 import type { MetricType } from '../types';
 import { generateUniqueID } from './generateUniqueID';
 import { getActivationStart } from './getActivationStart';

packages/browser-utils/src/metrics/web-vitals/lib/onHidden.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
+import { WINDOW } from '../../../types';
 
 export interface OnHiddenCallback {
  (event: Event): void;

packages/browser-utils/src/metrics/web-vitals/lib/whenActivated.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../../types';
+import { WINDOW } from '../../../types';
 
 export const whenActivated = (callback: () => void) => {
  if (WINDOW.document && WINDOW.document.prerendering) {

packages/browser-utils/src/metrics/web-vitals/onTTFB.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '../types';
+import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
 import { getNavigationEntry } from './lib/getNavigationEntry';

packages/browser-utils/test/browser/browserMetrics.test.ts

@@ -11,7 +11,7 @@ import {
 import type { Span } from '@sentry/types';
 import type { ResourceEntry } from '../../src/metrics/browserMetrics';
 import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
-import { WINDOW } from '../../src/metrics/types';
+import { WINDOW } from '../../src/types';
 import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
 
 const mockWindowLocation = {

packages/browser/.eslintrc.js

@@ -2,6 +2,6 @@ module.exports = {
  env: {
  browser: true,
  },
- ignorePatterns: ['test/integration/**', 'src/loader.js'],
+ ignorePatterns: ['test/integration/**', 'test/loader.js'],
  extends: ['../../.eslintrc.js'],
 };

packages/browser/src/transports/fetch.ts

@@ -1,17 +1,17 @@
+import { clearCachedImplementation, getNativeImplementation } from '@sentry-internal/browser-utils';
 import { createTransport } from '@sentry/core';
 import type { Transport, TransportMakeRequestResponse, TransportRequest } from '@sentry/types';
 import { rejectedSyncPromise } from '@sentry/utils';
+import type { WINDOW } from '../helpers';
 
 import type { BrowserTransportOptions } from './types';
-import type { FetchImpl } from './utils';
-import { clearCachedFetchImplementation, getNativeFetchImplementation } from './utils';
 
 /**
  * Creates a Transport that uses the Fetch API to send events to Sentry.
  */
 export function makeFetchTransport(
  options: BrowserTransportOptions,
- nativeFetch: FetchImpl | undefined = getNativeFetchImplementation(),
+ nativeFetch: typeof WINDOW.fetch | undefined = getNativeImplementation('fetch'),
 ): Transport {
  let pendingBodySize = 0;
  let pendingCount = 0;
@@ -42,7 +42,7 @@ export function makeFetchTransport(
  };
 
  if (!nativeFetch) {
- clearCachedFetchImplementation();
+ clearCachedImplementation('fetch');
  return rejectedSyncPromise('No fetch implementation available');
  }
 
@@ -59,7 +59,7 @@ export function makeFetchTransport(
  };
  });
  } catch (e) {
- clearCachedFetchImplementation();
+ clearCachedImplementation('fetch');
  pendingBodySize -= requestSize;
  pendingCount--;
  return rejectedSyncPromise(e);