@pratham.raval/browser-core 6.22.3

package/src/transport/batch.ts

@@ -0,0 +1,144 @@
+import { DOCS_TROUBLESHOOTING, MORE_DETAILS, display } from '../tools/display'
+import type { Context } from '../tools/serialisation/context'
+import { objectValues } from '../tools/utils/polyfills'
+import { isPageExitReason } from '../browser/pageMayExitObservable'
+import { jsonStringify } from '../tools/serialisation/jsonStringify'
+import type { Encoder, EncoderResult } from '../tools/encoder'
+import { computeBytesCount } from '../tools/utils/byteUtils'
+import type { HttpRequest, Payload } from './httpRequest'
+import type { FlushController, FlushEvent } from './flushController'
+
+export interface Batch {
+  flushController: FlushController
+  add: (message: Context) => void
+  upsert: (message: Context, key: string) => void
+  stop: () => void
+}
+
+export function createBatch({
+  encoder,
+  request,
+  flushController,
+  messageBytesLimit,
+}: {
+  encoder: Encoder
+  request: HttpRequest
+  flushController: FlushController
+  messageBytesLimit: number
+}): Batch {
+  let upsertBuffer: { [key: string]: string } = {}
+  const flushSubscription = flushController.flushObservable.subscribe((event) => flush(event))
+
+  function push(serializedMessage: string, estimatedMessageBytesCount: number, key?: string) {
+    flushController.notifyBeforeAddMessage(estimatedMessageBytesCount)
+
+    if (key !== undefined) {
+      upsertBuffer[key] = serializedMessage
+      flushController.notifyAfterAddMessage()
+    } else {
+      encoder.write(encoder.isEmpty ? serializedMessage : `\n${serializedMessage}`, (realMessageBytesCount) => {
+        flushController.notifyAfterAddMessage(realMessageBytesCount - estimatedMessageBytesCount)
+      })
+    }
+  }
+
+  function hasMessageFor(key?: string): key is string {
+    return key !== undefined && upsertBuffer[key] !== undefined
+  }
+
+  function remove(key: string) {
+    const removedMessage = upsertBuffer[key]
+    delete upsertBuffer[key]
+    const messageBytesCount = encoder.estimateEncodedBytesCount(removedMessage)
+    flushController.notifyAfterRemoveMessage(messageBytesCount)
+  }
+
+  function addOrUpdate(message: Context, key?: string) {
+    const serializedMessage = jsonStringify(message)!
+
+    const estimatedMessageBytesCount = encoder.estimateEncodedBytesCount(serializedMessage)
+
+    if (estimatedMessageBytesCount >= messageBytesLimit) {
+      display.warn(
+        `Discarded a message whose size was bigger than the maximum allowed size ${messageBytesLimit}KB. ${MORE_DETAILS} ${DOCS_TROUBLESHOOTING}/#technical-limitations`
+      )
+      return
+    }
+
+    if (hasMessageFor(key)) {
+      remove(key)
+    }
+
+    push(serializedMessage, estimatedMessageBytesCount, key)
+  }
+
+  function flush(event: FlushEvent) {
+    const upsertMessages = objectValues(upsertBuffer).join('\n')
+    upsertBuffer = {}
+
+    const pageMightExit = isPageExitReason(event.reason)
+    const send = pageMightExit ? request.sendOnExit : request.send
+
+    if (
+      pageMightExit &&
+      // Note: checking that the encoder is async is not strictly needed, but it's an optimization:
+      // if the encoder is async we need to send two requests in some cases (one for encoded data
+      // and the other for non-encoded data). But if it's not async, we don't have to worry about
+      // it and always send a single request.
+      encoder.isAsync
+    ) {
+      const encoderResult = encoder.finishSync()
+
+      // Send encoded messages
+      if (encoderResult.outputBytesCount) {
+        send(formatPayloadFromEncoder(encoderResult))
+      }
+
+      // Send messages that are not yet encoded at this point
+      const pendingMessages = [encoderResult.pendingData, upsertMessages].filter(Boolean).join('\n')
+      if (pendingMessages) {
+        send({
+          data: pendingMessages,
+          bytesCount: computeBytesCount(pendingMessages),
+        })
+      }
+    } else {
+      if (upsertMessages) {
+        encoder.write(encoder.isEmpty ? upsertMessages : `\n${upsertMessages}`)
+      }
+      encoder.finish((encoderResult) => {
+        send(formatPayloadFromEncoder(encoderResult))
+      })
+    }
+  }
+
+  return {
+    flushController,
+    add: addOrUpdate,
+    upsert: addOrUpdate,
+    stop: flushSubscription.unsubscribe,
+  }
+}
+
+function formatPayloadFromEncoder(encoderResult: EncoderResult): Payload {
+  let data: string | Blob
+  if (typeof encoderResult.output === 'string') {
+    data = encoderResult.output
+  } else {
+    data = new Blob([encoderResult.output], {
+      // This will set the 'Content-Type: text/plain' header. Reasoning:
+      // * The intake rejects the request if there is no content type.
+      // * The browser will issue CORS preflight requests if we set it to 'application/json', which
+      // could induce higher intake load (and maybe has other impacts).
+      // * Also it's not quite JSON, since we are concatenating multiple JSON objects separated by
+      // new lines.
+      type: 'text/plain',
+    })
+  }
+
+  return {
+    data,
+    bytesCount: encoderResult.outputBytesCount,
+    encoding: encoderResult.encoding,
+  }
+}

package/src/transport/eventBridge.ts

@@ -0,0 +1,61 @@
+import { getGlobalObject } from '../tools/globalObject'
+import type { DefaultPrivacyLevel } from '../domain/configuration'
+
+export interface BrowserWindowWithEventBridge extends Window {
+  DatadogEventBridge?: DatadogEventBridge
+}
+
+export interface DatadogEventBridge {
+  getCapabilities?(): string
+  getPrivacyLevel?(): DefaultPrivacyLevel
+  getAllowedWebViewHosts(): string
+  send(msg: string): void
+}
+
+export const enum BridgeCapability {
+  RECORDS = 'records',
+}
+
+export function getEventBridge<T, E>() {
+  const eventBridgeGlobal = getEventBridgeGlobal()
+
+  if (!eventBridgeGlobal) {
+    return
+  }
+
+  return {
+    getCapabilities() {
+      return JSON.parse(eventBridgeGlobal.getCapabilities?.() || '[]') as BridgeCapability[]
+    },
+    getPrivacyLevel() {
+      return eventBridgeGlobal.getPrivacyLevel?.()
+    },
+    getAllowedWebViewHosts() {
+      return JSON.parse(eventBridgeGlobal.getAllowedWebViewHosts()) as string[]
+    },
+    send(eventType: T, event: E, viewId?: string) {
+      const view = viewId ? { id: viewId } : undefined
+      eventBridgeGlobal.send(JSON.stringify({ eventType, event, view }))
+    },
+  }
+}
+
+export function bridgeSupports(capability: BridgeCapability): boolean {
+  const bridge = getEventBridge()
+  return !!bridge && bridge.getCapabilities().includes(capability)
+}
+
+export function canUseEventBridge(currentHost = getGlobalObject<Window>().location?.hostname): boolean {
+  const bridge = getEventBridge()
+
+  return (
+    !!bridge &&
+    bridge
+      .getAllowedWebViewHosts()
+      .some((allowedHost) => currentHost === allowedHost || currentHost.endsWith(`.${allowedHost}`))
+  )
+}
+
+function getEventBridgeGlobal() {
+  return getGlobalObject<BrowserWindowWithEventBridge>().DatadogEventBridge
+}

package/src/transport/flushController.ts

@@ -0,0 +1,144 @@
+import type { PageMayExitEvent, PageExitReason } from '../browser/pageMayExitObservable'
+import { Observable } from '../tools/observable'
+import type { TimeoutId } from '../tools/timer'
+import { clearTimeout, setTimeout } from '../tools/timer'
+import type { Duration } from '../tools/utils/timeUtils'
+
+export type FlushReason = PageExitReason | 'duration_limit' | 'bytes_limit' | 'messages_limit' | 'session_expire'
+
+export type FlushController = ReturnType<typeof createFlushController>
+export interface FlushEvent {
+  reason: FlushReason
+  bytesCount: number
+  messagesCount: number
+}
+
+interface FlushControllerOptions {
+  messagesLimit: number
+  bytesLimit: number
+  durationLimit: Duration
+  pageMayExitObservable: Observable<PageMayExitEvent>
+  sessionExpireObservable: Observable<void>
+}
+
+/**
+ * Returns a "flush controller", responsible of notifying when flushing a pool of pending data needs
+ * to happen. The implementation is designed to support both synchronous and asynchronous usages,
+ * but relies on invariants described in each method documentation to keep a coherent state.
+ */
+export function createFlushController({
+  messagesLimit,
+  bytesLimit,
+  durationLimit,
+  pageMayExitObservable,
+  sessionExpireObservable,
+}: FlushControllerOptions) {
+  const pageMayExitSubscription = pageMayExitObservable.subscribe((event) => flush(event.reason))
+  const sessionExpireSubscription = sessionExpireObservable.subscribe(() => flush('session_expire'))
+
+  const flushObservable = new Observable<FlushEvent>(() => () => {
+    pageMayExitSubscription.unsubscribe()
+    sessionExpireSubscription.unsubscribe()
+  })
+
+  let currentBytesCount = 0
+  let currentMessagesCount = 0
+
+  function flush(flushReason: FlushReason) {
+    if (currentMessagesCount === 0) {
+      return
+    }
+
+    const messagesCount = currentMessagesCount
+    const bytesCount = currentBytesCount
+
+    currentMessagesCount = 0
+    currentBytesCount = 0
+    cancelDurationLimitTimeout()
+
+    flushObservable.notify({
+      reason: flushReason,
+      messagesCount,
+      bytesCount,
+    })
+  }
+
+  let durationLimitTimeoutId: TimeoutId | undefined
+  function scheduleDurationLimitTimeout() {
+    if (durationLimitTimeoutId === undefined) {
+      durationLimitTimeoutId = setTimeout(() => {
+        flush('duration_limit')
+      }, durationLimit)
+    }
+  }
+
+  function cancelDurationLimitTimeout() {
+    clearTimeout(durationLimitTimeoutId)
+    durationLimitTimeoutId = undefined
+  }
+
+  return {
+    flushObservable,
+    get messagesCount() {
+      return currentMessagesCount
+    },
+
+    /**
+     * Notifies that a message will be added to a pool of pending messages waiting to be flushed.
+     *
+     * This function needs to be called synchronously, right before adding the message, so no flush
+     * event can happen after `notifyBeforeAddMessage` and before adding the message.
+     *
+     * @param estimatedMessageBytesCount - an estimation of the message bytes count once it is
+     * actually added.
+     */
+    notifyBeforeAddMessage(estimatedMessageBytesCount: number) {
+      if (currentBytesCount + estimatedMessageBytesCount >= bytesLimit) {
+        flush('bytes_limit')
+      }
+      // Consider the message to be added now rather than in `notifyAfterAddMessage`, because if no
+      // message was added yet and `notifyAfterAddMessage` is called asynchronously, we still want
+      // to notify when a flush is needed (for example on page exit).
+      currentMessagesCount += 1
+      currentBytesCount += estimatedMessageBytesCount
+      scheduleDurationLimitTimeout()
+    },
+
+    /**
+     * Notifies that a message *was* added to a pool of pending messages waiting to be flushed.
+     *
+     * This function can be called asynchronously after the message was added, but in this case it
+     * should not be called if a flush event occurred in between.
+     *
+     * @param messageBytesCountDiff - the difference between the estimated message bytes count and
+     * its actual bytes count once added to the pool.
+     */
+    notifyAfterAddMessage(messageBytesCountDiff = 0) {
+      currentBytesCount += messageBytesCountDiff
+
+      if (currentMessagesCount >= messagesLimit) {
+        flush('messages_limit')
+      } else if (currentBytesCount >= bytesLimit) {
+        flush('bytes_limit')
+      }
+    },
+
+    /**
+     * Notifies that a message was removed from a pool of pending messages waiting to be flushed.
+     *
+     * This function needs to be called synchronously, right after removing the message, so no flush
+     * event can happen after removing the message and before `notifyAfterRemoveMessage`.
+     *
+     * @param messageBytesCount - the message bytes count that was added to the pool. Should
+     * correspond to the sum of bytes counts passed to `notifyBeforeAddMessage` and
+     * `notifyAfterAddMessage`.
+     */
+    notifyAfterRemoveMessage(messageBytesCount: number) {
+      currentBytesCount -= messageBytesCount
+      currentMessagesCount -= 1
+      if (currentMessagesCount === 0) {
+        cancelDurationLimitTimeout()
+      }
+    },
+  }
+}

package/src/transport/httpRequest.ts

@@ -0,0 +1,164 @@
+import type { EndpointBuilder } from '../domain/configuration'
+import type { Context } from '../tools/serialisation/context'
+import { monitor, monitorError } from '../tools/monitor'
+import type { RawError } from '../domain/error/error.types'
+import { Observable } from '../tools/observable'
+import { newRetryState, sendWithRetryStrategy } from './sendWithRetryStrategy'
+
+/**
+ * Use POST request without content type to:
+ * - avoid CORS preflight requests
+ * - allow usage of sendBeacon
+ *
+ * multiple elements are sent separated by \n in order
+ * to be parsed correctly without content type header
+ */
+
+export interface HttpRequest<Body extends Payload = Payload> {
+  observable: Observable<HttpRequestEvent<Body>>
+  send(this: void, payload: Body): void
+  sendOnExit(this: void, payload: Body): void
+}
+
+export interface HttpResponse extends Context {
+  status: number
+  type?: ResponseType
+}
+
+export interface BandwidthStats {
+  ongoingByteCount: number
+  ongoingRequestCount: number
+}
+
+export type HttpRequestEvent<Body extends Payload = Payload> =
+  | {
+      // A request to send the given payload failed. (We may retry.)
+      type: 'failure'
+      bandwidth: BandwidthStats
+      payload: Body
+    }
+  | {
+      // The given payload was discarded because the request queue is full.
+      type: 'queue-full'
+      bandwidth: BandwidthStats
+      payload: Body
+    }
+  | {
+      // A request to send the given payload succeeded.
+      type: 'success'
+      bandwidth: BandwidthStats
+      payload: Body
+    }
+
+export interface Payload {
+  data: string | FormData | Blob
+  bytesCount: number
+  retry?: RetryInfo
+  encoding?: 'deflate'
+}
+
+export interface RetryInfo {
+  count: number
+  lastFailureStatus: number
+}
+
+export function createHttpRequest<Body extends Payload = Payload>(
+  endpointBuilders: EndpointBuilder[],
+  bytesLimit: number,
+  reportError: (error: RawError) => void
+): HttpRequest<Body> {
+  const observable = new Observable<HttpRequestEvent<Body>>()
+  const retryState = newRetryState<Body>()
+
+  return {
+    observable,
+    send: (payload: Body) => {
+      for (const endpointBuilder of endpointBuilders) {
+        sendWithRetryStrategy(
+          payload,
+          retryState,
+          (payload, onResponse) => fetchKeepAliveStrategy(endpointBuilder, bytesLimit, payload, onResponse),
+          endpointBuilder.trackType,
+          reportError,
+          observable
+        )
+      }
+    },
+    /**
+     * Since fetch keepalive behaves like regular fetch on Firefox,
+     * keep using sendBeaconStrategy on exit
+     */
+    sendOnExit: (payload: Body) => {
+      for (const endpointBuilder of endpointBuilders) {
+        sendBeaconStrategy(endpointBuilder, bytesLimit, payload)
+      }
+    },
+  }
+}
+
+function sendBeaconStrategy(endpointBuilder: EndpointBuilder, bytesLimit: number, payload: Payload) {
+  const canUseBeacon = !!navigator.sendBeacon && payload.bytesCount < bytesLimit
+  if (canUseBeacon) {
+    try {
+      const beaconUrl = endpointBuilder.build('beacon', payload)
+      const isQueued = navigator.sendBeacon(beaconUrl, payload.data)
+
+      if (isQueued) {
+        return
+      }
+    } catch (e) {
+      reportBeaconError(e)
+    }
+  }
+
+  fetchStrategy(endpointBuilder, payload)
+}
+
+let hasReportedBeaconError = false
+
+function reportBeaconError(e: unknown) {
+  if (!hasReportedBeaconError) {
+    hasReportedBeaconError = true
+    monitorError(e)
+  }
+}
+
+export function fetchKeepAliveStrategy(
+  endpointBuilder: EndpointBuilder,
+  bytesLimit: number,
+  payload: Payload,
+  onResponse?: (r: HttpResponse) => void
+) {
+  const canUseKeepAlive = isKeepAliveSupported() && payload.bytesCount < bytesLimit
+
+  if (canUseKeepAlive) {
+    const fetchUrl = endpointBuilder.build('fetch-keepalive', payload)
+
+    fetch(fetchUrl, { method: 'POST', body: payload.data, keepalive: true, mode: 'cors' })
+      .then(monitor((response: Response) => onResponse?.({ status: response.status, type: response.type })))
+      .catch(monitor(() => fetchStrategy(endpointBuilder, payload, onResponse)))
+  } else {
+    fetchStrategy(endpointBuilder, payload, onResponse)
+  }
+}
+
+export function fetchStrategy(
+  endpointBuilder: EndpointBuilder,
+  payload: Payload,
+  onResponse?: (r: HttpResponse) => void
+) {
+  const fetchUrl = endpointBuilder.build('fetch', payload)
+
+  fetch(fetchUrl, { method: 'POST', body: payload.data, mode: 'cors' })
+    .then(monitor((response: Response) => onResponse?.({ status: response.status, type: response.type })))
+    .catch(monitor(() => onResponse?.({ status: 0 })))
+}
+
+function isKeepAliveSupported() {
+  // Request can throw, cf https://developer.mozilla.org/en-US/docs/Web/API/Request/Request#errors
+  try {
+    return window.Request && 'keepalive' in new Request('http://a')
+  } catch {
+    return false
+  }
+}

package/src/transport/index.ts

@@ -0,0 +1,7 @@
+export type { BandwidthStats, HttpRequest, HttpRequestEvent, Payload, RetryInfo } from './httpRequest'
+export { createHttpRequest } from './httpRequest'
+export type { BrowserWindowWithEventBridge, DatadogEventBridge } from './eventBridge'
+export { canUseEventBridge, bridgeSupports, getEventBridge, BridgeCapability } from './eventBridge'
+export { createBatch } from './batch'
+export type { FlushController, FlushEvent, FlushReason } from './flushController'
+export { createFlushController } from './flushController'