@openobserve/browser-core 0.2.8

package/esm/transport/startBatchWithReplica.js

@@ -0,0 +1,33 @@
+import { Batch } from './batch';
+import { createHttpRequest } from './httpRequest';
+import { createFlushController } from './flushController';
+export function startBatchWithReplica(configuration, primary, replica, reportError, pageExitObservable, sessionExpireObservable) {
+    var primaryBatch = createBatch(configuration, primary.endpoint);
+    var replicaBatch = replica && createBatch(configuration, replica.endpoint);
+    function createBatch(configuration, endpointBuilder) {
+        return new Batch(createHttpRequest(configuration, endpointBuilder, configuration.batchBytesLimit, reportError), createFlushController({
+            messagesLimit: configuration.batchMessagesLimit,
+            bytesLimit: configuration.batchBytesLimit,
+            durationLimit: configuration.flushTimeout,
+            pageExitObservable: pageExitObservable,
+            sessionExpireObservable: sessionExpireObservable,
+        }), configuration.messageBytesLimit);
+    }
+    return {
+        flushObservable: primaryBatch.flushController.flushObservable,
+        add: function (message, replicated) {
+            if (replicated === void 0) { replicated = true; }
+            primaryBatch.add(message);
+            if (replicaBatch && replicated) {
+                replicaBatch.add(replica.transformMessage ? replica.transformMessage(message) : message);
+            }
+        },
+        upsert: function (message, key) {
+            primaryBatch.upsert(message, key);
+            if (replicaBatch) {
+                replicaBatch.upsert(replica.transformMessage ? replica.transformMessage(message) : message, key);
+            }
+        },
+    };
+}
+//# sourceMappingURL=startBatchWithReplica.js.map

package/esm/transport/startBatchWithReplica.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"startBatchWithReplica.js","sourceRoot":"","sources":["../../src/transport/startBatchWithReplica.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,MAAM,UAAU,qBAAqB,CACnC,aAA4B,EAC5B,OAAsC,EACtC,OAAwF,EACxF,WAAsC,EACtC,kBAA6C,EAC7C,uBAAyC;IAEzC,IAAM,YAAY,GAAG,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IACjE,IAAM,YAAY,GAAG,OAAO,IAAI,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAE5E,SAAS,WAAW,CAAC,aAA4B,EAAE,eAAgC;QACjF,OAAO,IAAI,KAAK,CACd,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,aAAa,CAAC,eAAe,EAAE,WAAW,CAAC,EAC7F,qBAAqB,CAAC;YACpB,aAAa,EAAE,aAAa,CAAC,kBAAkB;YAC/C,UAAU,EAAE,aAAa,CAAC,eAAe;YACzC,aAAa,EAAE,aAAa,CAAC,YAAY;YACzC,kBAAkB,oBAAA;YAClB,uBAAuB,yBAAA;SACxB,CAAC,EACF,aAAa,CAAC,iBAAiB,CAChC,CAAA;IACH,CAAC;IAED,OAAO;QACL,eAAe,EAAE,YAAY,CAAC,eAAe,CAAC,eAAe;QAE7D,GAAG,YAAC,OAAU,EAAE,UAAiB;YAAjB,2BAAA,EAAA,iBAAiB;YAC/B,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACzB,IAAI,YAAY,IAAI,UAAU,EAAE;gBAC9B,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;aACzF;QACH,CAAC;QAED,MAAM,EAAE,UAAC,OAAU,EAAE,GAAW;YAC9B,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,CAAA;YACjC,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAA;aACjG;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@openobserve/browser-core",
+  "version": "0.2.8",
+  "license": "Apache-2.0",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "cjs/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "run-p build:cjs build:esm",
+    "build:cjs": "rm -rf cjs && tsc -p tsconfig.cjs.json && yarn replace-build-env cjs",
+    "build:esm": "rm -rf esm && tsc -p tsconfig.esm.json && yarn replace-build-env esm",
+    "replace-build-env": "node ../../scripts/build/replace-build-env.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openobserve/browser-sdk.git",
+    "directory": "packages/core"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/boot/init.ts

@@ -0,0 +1,41 @@
+import { catchUserErrors } from '../tools/catchUserErrors'
+import { setDebugMode } from '../tools/monitor'
+import { assign } from '../tools/utils/polyfills'
+
+// replaced at build time
+declare const __BUILD_ENV__SDK_VERSION__: string
+
+export function makePublicApi<T>(stub: T): T & { onReady(callback: () => void): void; version: string } {
+  const publicApi = assign(
+    {
+      version: __BUILD_ENV__SDK_VERSION__,
+
+      // This API method is intentionally not monitored, since the only thing executed is the
+      // user-provided 'callback'.  All SDK usages executed in the callback should be monitored, and
+      // we don't want to interfere with the user uncaught exceptions.
+      onReady(callback: () => void) {
+        callback()
+      },
+    },
+    stub
+  )
+
+  // Add a "hidden" property to set debug mode. We define it that way to hide it
+  // as much as possible but of course it's not a real protection.
+  Object.defineProperty(publicApi, '_setDebug', {
+    get() {
+      return setDebugMode
+    },
+    enumerable: false,
+  })
+
+  return publicApi
+}
+
+export function defineGlobal<Global, Name extends keyof Global>(global: Global, name: Name, api: Global[Name]) {
+  const existingGlobalVariable = global[name] as { q?: Array<() => void> } | undefined
+  global[name] = api
+  if (existingGlobalVariable && existingGlobalVariable.q) {
+    existingGlobalVariable.q.forEach((fn) => catchUserErrors(fn, 'onReady callback threw an error:')())
+  }
+}

package/src/browser/addEventListener.ts

@@ -0,0 +1,136 @@
+import { monitor } from '../tools/monitor'
+import { getZoneJsOriginalValue } from '../tools/getZoneJsOriginalValue'
+import type { Configuration } from '../domain/configuration'
+import type { VisualViewport, VisualViewportEventMap } from './types'
+
+export const enum DOM_EVENT {
+  BEFORE_UNLOAD = 'beforeunload',
+  CLICK = 'click',
+  DBL_CLICK = 'dblclick',
+  KEY_DOWN = 'keydown',
+  LOAD = 'load',
+  POP_STATE = 'popstate',
+  SCROLL = 'scroll',
+  TOUCH_START = 'touchstart',
+  TOUCH_END = 'touchend',
+  TOUCH_MOVE = 'touchmove',
+  VISIBILITY_CHANGE = 'visibilitychange',
+  PAGE_SHOW = 'pageshow',
+  FREEZE = 'freeze',
+  RESUME = 'resume',
+  DOM_CONTENT_LOADED = 'DOMContentLoaded',
+  POINTER_DOWN = 'pointerdown',
+  POINTER_UP = 'pointerup',
+  POINTER_CANCEL = 'pointercancel',
+  HASH_CHANGE = 'hashchange',
+  PAGE_HIDE = 'pagehide',
+  MOUSE_DOWN = 'mousedown',
+  MOUSE_UP = 'mouseup',
+  MOUSE_MOVE = 'mousemove',
+  FOCUS = 'focus',
+  BLUR = 'blur',
+  CONTEXT_MENU = 'contextmenu',
+  RESIZE = 'resize',
+  CHANGE = 'change',
+  INPUT = 'input',
+  PLAY = 'play',
+  PAUSE = 'pause',
+  SECURITY_POLICY_VIOLATION = 'securitypolicyviolation',
+  SELECTION_CHANGE = 'selectionchange',
+}
+
+interface AddEventListenerOptions {
+  once?: boolean
+  capture?: boolean
+  passive?: boolean
+}
+
+type EventMapFor<T> = T extends Window
+  ? WindowEventMap & {
+      // TS 4.9.5 does not support `freeze` and `resume` events yet
+      freeze: Event
+      resume: Event
+      // TS 4.9.5 does not define `visibilitychange` on Window (only Document)
+      visibilitychange: Event
+    }
+  : T extends Document
+  ? DocumentEventMap
+  : T extends HTMLElement
+  ? HTMLElementEventMap
+  : T extends VisualViewport
+  ? VisualViewportEventMap
+  : T extends ShadowRoot
+  ? // ShadowRootEventMap is not yet defined in our supported TS version. Instead, use
+    // GlobalEventHandlersEventMap which is more than enough as we only need to listen for events bubbling
+    // through the ShadowRoot like "change" or "input"
+    GlobalEventHandlersEventMap
+  : T extends XMLHttpRequest
+  ? XMLHttpRequestEventMap
+  : T extends Performance
+  ? PerformanceEventMap
+  : T extends Worker
+  ? WorkerEventMap
+  : Record<never, never>
+
+/**
+ * Add an event listener to an event target object (Window, Element, mock object...).  This provides
+ * a few conveniences compared to using `element.addEventListener` directly:
+ *
+ * * supports IE11 by: using an option object only if needed and emulating the `once` option
+ *
+ * * wraps the listener with a `monitor` function
+ *
+ * * returns a `stop` function to remove the listener
+ */
+export function addEventListener<Target extends EventTarget, EventName extends keyof EventMapFor<Target> & string>(
+  configuration: Configuration,
+  eventTarget: Target,
+  eventName: EventName,
+  listener: (event: EventMapFor<Target>[EventName]) => void,
+  options?: AddEventListenerOptions
+) {
+  return addEventListeners(configuration, eventTarget, [eventName], listener, options)
+}
+
+/**
+ * Add event listeners to an event target object (Window, Element, mock object...).  This provides
+ * a few conveniences compared to using `element.addEventListener` directly:
+ *
+ * * supports IE11 by: using an option object only if needed and emulating the `once` option
+ *
+ * * wraps the listener with a `monitor` function
+ *
+ * * returns a `stop` function to remove the listener
+ *
+ * * with `once: true`, the listener will be called at most once, even if different events are listened
+ */
+export function addEventListeners<Target extends EventTarget, EventName extends keyof EventMapFor<Target> & string>(
+  _: Configuration,
+  eventTarget: Target,
+  eventNames: EventName[],
+  listener: (event: EventMapFor<Target>[EventName]) => void,
+  { once, capture, passive }: AddEventListenerOptions = {}
+) {
+  const wrappedListener = monitor(
+    once
+      ? (event: Event) => {
+          stop()
+          listener(event as EventMapFor<Target>[EventName])
+        }
+      : (listener as (event: Event) => void)
+  )
+
+  const options = passive ? { capture, passive } : capture
+
+  const add = getZoneJsOriginalValue(eventTarget, 'addEventListener')
+  eventNames.forEach((eventName) => add.call(eventTarget, eventName, wrappedListener, options))
+
+  function stop() {
+    const remove = getZoneJsOriginalValue(eventTarget, 'removeEventListener')
+    eventNames.forEach((eventName) => remove.call(eventTarget, eventName, wrappedListener, options))
+  }
+
+  return {
+    stop,
+  }
+}

package/src/browser/cookie.ts

@@ -0,0 +1,71 @@
+import { display } from '../tools/display'
+import { ONE_MINUTE, ONE_SECOND } from '../tools/utils/timeUtils'
+import { findCommaSeparatedValue, generateUUID } from '../tools/utils/stringUtils'
+
+export interface CookieOptions {
+  secure?: boolean
+  crossSite?: boolean
+  domain?: string
+}
+
+export function setCookie(name: string, value: string, expireDelay: number, options?: CookieOptions) {
+  const date = new Date()
+  date.setTime(date.getTime() + expireDelay)
+  const expires = `expires=${date.toUTCString()}`
+  const sameSite = options && options.crossSite ? 'none' : 'strict'
+  const domain = options && options.domain ? `;domain=${options.domain}` : ''
+  const secure = options && options.secure ? ';secure' : ''
+  document.cookie = `${name}=${value};${expires};path=/;samesite=${sameSite}${domain}${secure}`
+}
+
+export function getCookie(name: string) {
+  return findCommaSeparatedValue(document.cookie, name)
+}
+
+export function deleteCookie(name: string, options?: CookieOptions) {
+  setCookie(name, '', 0, options)
+}
+
+export function areCookiesAuthorized(options: CookieOptions): boolean {
+  if (document.cookie === undefined || document.cookie === null) {
+    return false
+  }
+  try {
+    // Use a unique cookie name to avoid issues when the SDK is initialized multiple times during
+    // the test cookie lifetime
+    const testCookieName = `oo_cookie_test_${generateUUID()}`
+    const testCookieValue = 'test'
+    setCookie(testCookieName, testCookieValue, ONE_MINUTE, options)
+    const isCookieCorrectlySet = getCookie(testCookieName) === testCookieValue
+    deleteCookie(testCookieName, options)
+    return isCookieCorrectlySet
+  } catch (error) {
+    display.error(error)
+    return false
+  }
+}
+
+/**
+ * No API to retrieve it, number of levels for subdomain and suffix are unknown
+ * strategy: find the minimal domain on which cookies are allowed to be set
+ * https://web.dev/same-site-same-origin/#site
+ */
+let getCurrentSiteCache: string | undefined
+export function getCurrentSite() {
+  if (getCurrentSiteCache === undefined) {
+    // Use a unique cookie name to avoid issues when the SDK is initialized multiple times during
+    // the test cookie lifetime
+    const testCookieName = `oo_site_test_${generateUUID()}`
+    const testCookieValue = 'test'
+
+    const domainLevels = window.location.hostname.split('.')
+    let candidateDomain = domainLevels.pop()!
+    while (domainLevels.length && !getCookie(testCookieName)) {
+      candidateDomain = `${domainLevels.pop()!}.${candidateDomain}`
+      setCookie(testCookieName, testCookieValue, ONE_SECOND, { domain: candidateDomain })
+    }
+    deleteCookie(testCookieName, { domain: candidateDomain })
+    getCurrentSiteCache = candidateDomain
+  }
+  return getCurrentSiteCache
+}

package/src/browser/fetchObservable.ts

@@ -0,0 +1,112 @@
+import { instrumentMethod } from '../tools/instrumentMethod'
+import { callMonitored, monitor } from '../tools/monitor'
+import { Observable } from '../tools/observable'
+import type { ClocksState } from '../tools/utils/timeUtils'
+import { clocksNow } from '../tools/utils/timeUtils'
+import { normalizeUrl } from '../tools/utils/urlPolyfill'
+
+interface FetchContextBase {
+  method: string
+  startClocks: ClocksState
+  input: unknown
+  init?: RequestInit
+  url: string
+}
+
+export interface FetchStartContext extends FetchContextBase {
+  state: 'start'
+}
+
+export interface FetchResolveContext extends FetchContextBase {
+  state: 'resolve'
+  status: number
+  response?: Response
+  responseType?: string
+  isAborted: boolean
+  error?: Error
+}
+
+export type FetchContext = FetchStartContext | FetchResolveContext
+
+let fetchObservable: Observable<FetchContext> | undefined
+
+export function initFetchObservable() {
+  if (!fetchObservable) {
+    fetchObservable = createFetchObservable()
+  }
+  return fetchObservable
+}
+
+function createFetchObservable() {
+  const observable = new Observable<FetchContext>(() => {
+    if (!window.fetch) {
+      return
+    }
+
+    const { stop } = instrumentMethod(
+      window,
+      'fetch',
+      (originalFetch) =>
+        function (input, init) {
+          let responsePromise: Promise<Response>
+
+          const context = callMonitored(beforeSend, null, [observable, input, init])
+          if (context) {
+            responsePromise = originalFetch.call(this, context.input as RequestInfo, context.init)
+            callMonitored(afterSend, null, [observable, responsePromise, context])
+          } else {
+            responsePromise = originalFetch.call(this, input, init)
+          }
+
+          return responsePromise
+        }
+    )
+
+    return stop
+  })
+
+  return observable
+}
+
+function beforeSend(observable: Observable<FetchContext>, input: unknown, init?: RequestInit) {
+  const method = (init && init.method) || (input instanceof Request && input.method) || 'GET'
+  const url = input instanceof Request ? input.url : normalizeUrl(String(input))
+  const startClocks = clocksNow()
+
+  const context: FetchStartContext = {
+    state: 'start',
+    init,
+    input,
+    method,
+    startClocks,
+    url,
+  }
+
+  observable.notify(context)
+
+  return context
+}
+
+function afterSend(
+  observable: Observable<FetchContext>,
+  responsePromise: Promise<Response>,
+  startContext: FetchStartContext
+) {
+  const reportFetch = (response: Response | Error) => {
+    const context = startContext as unknown as FetchResolveContext
+    context.state = 'resolve'
+    if ('stack' in response || response instanceof Error) {
+      context.status = 0
+      context.isAborted = response instanceof DOMException && response.code === DOMException.ABORT_ERR
+      context.error = response
+    } else if ('status' in response) {
+      context.response = response
+      context.responseType = response.type
+      context.status = response.status
+      context.isAborted = false
+    }
+    observable.notify(context)
+  }
+
+  responsePromise.then(monitor(reportFetch), monitor(reportFetch))
+}

package/src/browser/pageExitObservable.ts

@@ -0,0 +1,69 @@
+import { isExperimentalFeatureEnabled, ExperimentalFeature } from '../tools/experimentalFeatures'
+import { Observable } from '../tools/observable'
+import { objectValues, includes } from '../tools/utils/polyfills'
+import { noop } from '../tools/utils/functionUtils'
+import type { Configuration } from '../domain/configuration'
+import { addEventListeners, addEventListener, DOM_EVENT } from './addEventListener'
+
+export const PageExitReason = {
+  HIDDEN: 'visibility_hidden',
+  UNLOADING: 'before_unload',
+  PAGEHIDE: 'page_hide',
+  FROZEN: 'page_frozen',
+} as const
+
+export type PageExitReason = (typeof PageExitReason)[keyof typeof PageExitReason]
+
+export interface PageExitEvent {
+  reason: PageExitReason
+}
+
+export function createPageExitObservable(configuration: Configuration): Observable<PageExitEvent> {
+  const observable = new Observable<PageExitEvent>(() => {
+    const pagehideEnabled = isExperimentalFeatureEnabled(ExperimentalFeature.PAGEHIDE)
+    const { stop: stopListeners } = addEventListeners(
+      configuration,
+      window,
+      [DOM_EVENT.VISIBILITY_CHANGE, DOM_EVENT.FREEZE, DOM_EVENT.PAGE_HIDE],
+      (event) => {
+        if (event.type === DOM_EVENT.PAGE_HIDE && pagehideEnabled) {
+          /**
+           * Only event that detect page unload events while being compatible with the back/forward cache (bfcache)
+           */
+          observable.notify({ reason: PageExitReason.PAGEHIDE })
+        } else if (event.type === DOM_EVENT.VISIBILITY_CHANGE && document.visibilityState === 'hidden') {
+          /**
+           * Only event that guarantee to fire on mobile devices when the page transitions to background state
+           * (e.g. when user switches to a different application, goes to homescreen, etc), or is being unloaded.
+           */
+          observable.notify({ reason: PageExitReason.HIDDEN })
+        } else if (event.type === DOM_EVENT.FREEZE) {
+          /**
+           * After transitioning in background a tab can be freezed to preserve resources. (cf: https://developer.chrome.com/blog/page-lifecycle-api)
+           * Allow to collect events happening between hidden and frozen state.
+           */
+          observable.notify({ reason: PageExitReason.FROZEN })
+        }
+      },
+      { capture: true }
+    )
+
+    let stopBeforeUnloadListener = noop
+    if (!pagehideEnabled) {
+      stopBeforeUnloadListener = addEventListener(configuration, window, DOM_EVENT.BEFORE_UNLOAD, () => {
+        observable.notify({ reason: PageExitReason.UNLOADING })
+      }).stop
+    }
+
+    return () => {
+      stopListeners()
+      stopBeforeUnloadListener()
+    }
+  })
+
+  return observable
+}
+
+export function isPageExitReason(reason: string | undefined): reason is PageExitReason {
+  return includes(objectValues(PageExitReason), reason)
+}

package/src/browser/runOnReadyState.ts

@@ -0,0 +1,15 @@
+import type { Configuration } from '../domain/configuration'
+import { DOM_EVENT, addEventListener } from './addEventListener'
+
+export function runOnReadyState(
+  configuration: Configuration,
+  expectedReadyState: 'complete' | 'interactive',
+  callback: () => void
+) {
+  if (document.readyState === expectedReadyState || document.readyState === 'complete') {
+    callback()
+  } else {
+    const eventName = expectedReadyState === 'complete' ? DOM_EVENT.LOAD : DOM_EVENT.DOM_CONTENT_LOADED
+    addEventListener(configuration, window, eventName, callback, { once: true })
+  }
+}

package/src/browser/types.ts

@@ -0,0 +1,40 @@
+// Those types come from the official TypeScript DOM library, but are not included in our minimal
+// supported TS version.
+// https://github.com/microsoft/TypeScript/blob/13c374a868c926f6a907666a5599992c1351b773/src/lib/dom.generated.d.ts#L15399-L15418
+
+export interface VisualViewportEventMap {
+  resize: Event
+  scroll: Event
+}
+
+export interface VisualViewport extends EventTarget {
+  readonly height: number
+  readonly offsetLeft: number
+  readonly offsetTop: number
+  onresize: ((this: VisualViewport, ev: Event) => any) | null
+  onscroll: ((this: VisualViewport, ev: Event) => any) | null
+  readonly pageLeft: number
+  readonly pageTop: number
+  readonly scale: number
+  readonly width: number
+  addEventListener<K extends keyof VisualViewportEventMap>(
+    type: K,
+    listener: (this: VisualViewport, ev: VisualViewportEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  removeEventListener<K extends keyof VisualViewportEventMap>(
+    type: K,
+    listener: (this: VisualViewport, ev: VisualViewportEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void
+}

package/src/browser/xhrObservable.ts

@@ -0,0 +1,127 @@
+import { instrumentMethodAndCallOriginal } from '../tools/instrumentMethod'
+import { Observable } from '../tools/observable'
+import type { Duration, RelativeTime, ClocksState } from '../tools/utils/timeUtils'
+import { elapsed, relativeNow, clocksNow, timeStampNow } from '../tools/utils/timeUtils'
+import { normalizeUrl } from '../tools/utils/urlPolyfill'
+import { shallowClone } from '../tools/utils/objectUtils'
+import type { Configuration } from '../domain/configuration'
+import { addEventListener } from './addEventListener'
+
+export interface XhrOpenContext {
+  state: 'open'
+  method: string
+  url: string
+}
+
+export interface XhrStartContext extends Omit<XhrOpenContext, 'state'> {
+  state: 'start'
+  startTime: RelativeTime // deprecated
+  startClocks: ClocksState
+  isAborted: boolean
+  xhr: XMLHttpRequest
+}
+
+export interface XhrCompleteContext extends Omit<XhrStartContext, 'state'> {
+  state: 'complete'
+  duration: Duration
+  status: number
+}
+
+export type XhrContext = XhrOpenContext | XhrStartContext | XhrCompleteContext
+
+let xhrObservable: Observable<XhrContext> | undefined
+const xhrContexts = new WeakMap<XMLHttpRequest, XhrContext>()
+
+export function initXhrObservable(configuration: Configuration) {
+  if (!xhrObservable) {
+    xhrObservable = createXhrObservable(configuration)
+  }
+  return xhrObservable
+}
+
+function createXhrObservable(configuration: Configuration) {
+  const observable = new Observable<XhrContext>(() => {
+    const { stop: stopInstrumentingStart } = instrumentMethodAndCallOriginal(XMLHttpRequest.prototype, 'open', {
+      before: openXhr,
+    })
+
+    const { stop: stopInstrumentingSend } = instrumentMethodAndCallOriginal(XMLHttpRequest.prototype, 'send', {
+      before() {
+        sendXhr.call(this, configuration, observable)
+      },
+    })
+
+    const { stop: stopInstrumentingAbort } = instrumentMethodAndCallOriginal(XMLHttpRequest.prototype, 'abort', {
+      before: abortXhr,
+    })
+
+    return () => {
+      stopInstrumentingStart()
+      stopInstrumentingSend()
+      stopInstrumentingAbort()
+    }
+  })
+  return observable
+}
+
+function openXhr(this: XMLHttpRequest, method: string, url: string | URL | undefined | null) {
+  xhrContexts.set(this, {
+    state: 'open',
+    method,
+    url: normalizeUrl(String(url)),
+  })
+}
+
+function sendXhr(this: XMLHttpRequest, configuration: Configuration, observable: Observable<XhrContext>) {
+  const context = xhrContexts.get(this)
+  if (!context) {
+    return
+  }
+
+  const startContext = context as XhrStartContext
+  startContext.state = 'start'
+  startContext.startTime = relativeNow()
+  startContext.startClocks = clocksNow()
+  startContext.isAborted = false
+  startContext.xhr = this
+
+  let hasBeenReported = false
+
+  const { stop: stopInstrumentingOnReadyStateChange } = instrumentMethodAndCallOriginal(this, 'onreadystatechange', {
+    before() {
+      if (this.readyState === XMLHttpRequest.DONE) {
+        // Try to report the XHR as soon as possible, because the XHR may be mutated by the
+        // application during a future event. For example, Angular is calling .abort() on
+        // completed requests during a onreadystatechange event, so the status becomes '0'
+        // before the request is collected.
+        onEnd()
+      }
+    },
+  })
+
+  const onEnd = () => {
+    unsubscribeLoadEndListener()
+    stopInstrumentingOnReadyStateChange()
+    if (hasBeenReported) {
+      return
+    }
+    hasBeenReported = true
+
+    const completeContext = context as XhrCompleteContext
+    completeContext.state = 'complete'
+    completeContext.duration = elapsed(startContext.startClocks.timeStamp, timeStampNow())
+    completeContext.status = this.status
+    observable.notify(shallowClone(completeContext))
+  }
+
+  const { stop: unsubscribeLoadEndListener } = addEventListener(configuration, this, 'loadend', onEnd)
+
+  observable.notify(startContext)
+}
+
+function abortXhr(this: XMLHttpRequest) {
+  const context = xhrContexts.get(this) as XhrStartContext | undefined
+  if (context) {
+    context.isAborted = true
+  }
+}