@openobserve/browser-core 0.2.8

package/src/tools/utils/timeUtils.ts

@@ -0,0 +1,112 @@
+import { isNumber, round } from './numberUtils'
+
+export const ONE_SECOND = 1000
+export const ONE_MINUTE = 60 * ONE_SECOND
+export const ONE_HOUR = 60 * ONE_MINUTE
+export const ONE_DAY = 24 * ONE_HOUR
+export const ONE_YEAR = 365 * ONE_DAY
+
+export type Duration = number & { d: 'Duration in ms' }
+export type ServerDuration = number & { s: 'Duration in ns' }
+export type TimeStamp = number & { t: 'Epoch time' }
+export type RelativeTime = number & { r: 'Time relative to navigation start' } & { d: 'Duration in ms' }
+export type ClocksState = { relative: RelativeTime; timeStamp: TimeStamp }
+
+export function relativeToClocks(relative: RelativeTime) {
+  return { relative, timeStamp: getCorrectedTimeStamp(relative) }
+}
+
+function getCorrectedTimeStamp(relativeTime: RelativeTime) {
+  const correctedOrigin = (dateNow() - performance.now()) as TimeStamp
+  // apply correction only for positive drift
+  if (correctedOrigin > getNavigationStart()) {
+    return Math.round(addDuration(correctedOrigin, relativeTime)) as TimeStamp
+  }
+  return getTimeStamp(relativeTime)
+}
+
+export function currentDrift() {
+  return Math.round(dateNow() - addDuration(getNavigationStart(), performance.now() as Duration))
+}
+
+export function toServerDuration(duration: Duration): ServerDuration
+export function toServerDuration(duration: Duration | undefined): ServerDuration | undefined
+export function toServerDuration(duration: Duration | undefined) {
+  if (!isNumber(duration)) {
+    return duration
+  }
+  return round(duration * 1e6, 0) as ServerDuration
+}
+
+export function dateNow() {
+  // Do not use `Date.now` because sometimes websites are wrongly "polyfilling" it. For example, we
+  // had some users using a very old version of `datejs`, which patched `Date.now` to return a Date
+  // instance instead of a timestamp[1]. Those users are unlikely to fix this, so let's handle this
+  // case ourselves.
+  // [1]: https://github.com/datejs/Datejs/blob/97f5c7c58c5bc5accdab8aa7602b6ac56462d778/src/core-debug.js#L14-L16
+  return new Date().getTime()
+}
+
+export function timeStampNow() {
+  return dateNow() as TimeStamp
+}
+
+export function relativeNow() {
+  return performance.now() as RelativeTime
+}
+
+export function clocksNow() {
+  return { relative: relativeNow(), timeStamp: timeStampNow() }
+}
+
+export function clocksOrigin() {
+  return { relative: 0 as RelativeTime, timeStamp: getNavigationStart() }
+}
+
+export function elapsed(start: TimeStamp, end: TimeStamp): Duration
+export function elapsed(start: RelativeTime, end: RelativeTime): Duration
+export function elapsed(start: number, end: number) {
+  return (end - start) as Duration
+}
+
+export function addDuration(a: TimeStamp, b: Duration): TimeStamp
+export function addDuration(a: RelativeTime, b: Duration): RelativeTime
+export function addDuration(a: Duration, b: Duration): Duration
+export function addDuration(a: number, b: number) {
+  return a + b
+}
+
+/**
+ * Get the time since the navigation was started.
+ *
+ * Note: this does not use `performance.timeOrigin` because it doesn't seem to reflect the actual
+ * time on which the navigation has started: it may be much farther in the past, at least in Firefox 71.
+ * Related issue in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1429926
+ */
+export function getRelativeTime(timestamp: TimeStamp) {
+  return (timestamp - getNavigationStart()) as RelativeTime
+}
+
+export function getTimeStamp(relativeTime: RelativeTime) {
+  return Math.round(addDuration(getNavigationStart(), relativeTime)) as TimeStamp
+}
+
+export function looksLikeRelativeTime(time: RelativeTime | TimeStamp): time is RelativeTime {
+  return time < ONE_YEAR
+}
+
+/**
+ * Navigation start slightly change on some rare cases
+ */
+let navigationStart: TimeStamp | undefined
+
+function getNavigationStart() {
+  if (navigationStart === undefined) {
+    navigationStart = performance.timing.navigationStart as TimeStamp
+  }
+  return navigationStart
+}
+
+export function resetNavigationStart() {
+  navigationStart = undefined
+}

package/src/tools/utils/typeUtils.ts

@@ -0,0 +1,12 @@
+/**
+ * Similar to `typeof`, but distinguish plain objects from `null` and arrays
+ */
+export function getType(value: unknown) {
+  if (value === null) {
+    return 'null'
+  }
+  if (Array.isArray(value)) {
+    return 'array'
+  }
+  return typeof value
+}

package/src/tools/utils/urlPolyfill.ts

@@ -0,0 +1,86 @@
+import { jsonStringify } from '../serialisation/jsonStringify'
+
+export function normalizeUrl(url: string) {
+  return buildUrl(url, getLocationOrigin()).href
+}
+
+export function isValidUrl(url: string) {
+  try {
+    return !!buildUrl(url)
+  } catch {
+    return false
+  }
+}
+
+export function getOrigin(url: string) {
+  return getLinkElementOrigin(buildUrl(url))
+}
+
+export function getPathName(url: string) {
+  const pathname = buildUrl(url).pathname
+  return pathname[0] === '/' ? pathname : `/${pathname}`
+}
+
+export function getSearch(url: string) {
+  return buildUrl(url).search
+}
+
+export function getHash(url: string) {
+  return buildUrl(url).hash
+}
+
+export function buildUrl(url: string, base?: string) {
+  const supportedURL = getSupportedUrl()
+  if (supportedURL) {
+    try {
+      return base !== undefined ? new supportedURL(url, base) : new supportedURL(url)
+    } catch (error) {
+      throw new Error(`Failed to construct URL: ${String(error)} ${jsonStringify({ url, base })!}`)
+    }
+  }
+  if (base === undefined && !/:/.test(url)) {
+    throw new Error(`Invalid URL: '${url}'`)
+  }
+  let doc = document
+  const anchorElement = doc.createElement('a')
+  if (base !== undefined) {
+    doc = document.implementation.createHTMLDocument('')
+    const baseElement = doc.createElement('base')
+    baseElement.href = base
+    doc.head.appendChild(baseElement)
+    doc.body.appendChild(anchorElement)
+  }
+  anchorElement.href = url
+  return anchorElement
+}
+
+const originalURL = URL
+let isURLSupported: boolean | undefined
+function getSupportedUrl(): typeof URL | undefined {
+  if (isURLSupported === undefined) {
+    try {
+      const url = new originalURL('http://test/path')
+      isURLSupported = url.href === 'http://test/path'
+    } catch {
+      isURLSupported = false
+    }
+  }
+  return isURLSupported ? originalURL : undefined
+}
+
+export function getLocationOrigin() {
+  return getLinkElementOrigin(window.location)
+}
+
+/**
+ * Fallback
+ * On IE HTMLAnchorElement origin is not supported: https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
+ * On Firefox window.location.origin is "null" for file: URIs: https://bugzilla.mozilla.org/show_bug.cgi?id=878297
+ */
+export function getLinkElementOrigin(element: Location | HTMLAnchorElement | URL) {
+  if (element.origin && element.origin !== 'null') {
+    return element.origin
+  }
+  const sanitizedHost = element.host.replace(/(:80|:443)$/, '')
+  return `${element.protocol}//${sanitizedHost}`
+}

package/src/tools/valueHistory.ts

@@ -0,0 +1,120 @@
+import { setInterval, clearInterval } from './timer'
+import type { TimeoutId } from './timer'
+import type { Duration, RelativeTime } from './utils/timeUtils'
+import { addDuration, relativeNow, ONE_MINUTE } from './utils/timeUtils'
+
+const END_OF_TIMES = Infinity as RelativeTime
+
+export interface ValueHistoryEntry<T> {
+  startTime: RelativeTime
+  endTime: RelativeTime
+  value: T
+  remove(): void
+  close(endTime: RelativeTime): void
+}
+
+export const CLEAR_OLD_VALUES_INTERVAL = ONE_MINUTE
+
+/**
+ * Store and keep track of values spans. This whole class assumes that values are added in
+ * chronological order (i.e. all entries have an increasing start time).
+ */
+export class ValueHistory<Value> {
+  private entries: Array<ValueHistoryEntry<Value>> = []
+  private clearOldValuesInterval: TimeoutId
+
+  constructor(
+    private expireDelay: number,
+    private maxEntries?: number
+  ) {
+    this.clearOldValuesInterval = setInterval(() => this.clearOldValues(), CLEAR_OLD_VALUES_INTERVAL)
+  }
+
+  /**
+   * Add a value to the history associated with a start time. Returns a reference to this newly
+   * added entry that can be removed or closed.
+   */
+  add(value: Value, startTime: RelativeTime): ValueHistoryEntry<Value> {
+    const entry: ValueHistoryEntry<Value> = {
+      value,
+      startTime,
+      endTime: END_OF_TIMES,
+      remove: () => {
+        const index = this.entries.indexOf(entry)
+        if (index >= 0) {
+          this.entries.splice(index, 1)
+        }
+      },
+      close: (endTime: RelativeTime) => {
+        entry.endTime = endTime
+      },
+    }
+
+    if (this.maxEntries && this.entries.length >= this.maxEntries) {
+      this.entries.pop()
+    }
+
+    this.entries.unshift(entry)
+
+    return entry
+  }
+
+  /**
+   * Return the latest value that was active during `startTime`, or the currently active value
+   * if no `startTime` is provided. This method assumes that entries are not overlapping.
+   */
+  find(startTime: RelativeTime = END_OF_TIMES): Value | undefined {
+    for (const entry of this.entries) {
+      if (entry.startTime <= startTime) {
+        if (startTime <= entry.endTime) {
+          return entry.value
+        }
+        break
+      }
+    }
+  }
+
+  /**
+   * Helper function to close the currently active value, if any. This method assumes that entries
+   * are not overlapping.
+   */
+  closeActive(endTime: RelativeTime) {
+    const latestEntry = this.entries[0]
+    if (latestEntry && latestEntry.endTime === END_OF_TIMES) {
+      latestEntry.close(endTime)
+    }
+  }
+
+  /**
+   * Return all values with an active period overlapping with the duration,
+   * or all values that were active during `startTime` if no duration is provided,
+   * or all currently active values if no `startTime` is provided.
+   */
+  findAll(startTime: RelativeTime = END_OF_TIMES, duration = 0 as Duration): Value[] {
+    const endTime = addDuration(startTime, duration)
+    return this.entries
+      .filter((entry) => entry.startTime <= endTime && startTime <= entry.endTime)
+      .map((entry) => entry.value)
+  }
+
+  /**
+   * Remove all entries from this collection.
+   */
+  reset() {
+    this.entries = []
+  }
+
+  /**
+   * Stop internal garbage collection of past entries.
+   */
+  stop() {
+    clearInterval(this.clearOldValuesInterval)
+  }
+
+  private clearOldValues() {
+    const oldTimeThreshold = relativeNow() - this.expireDelay
+    while (this.entries.length > 0 && this.entries[this.entries.length - 1].endTime < oldTimeThreshold) {
+      this.entries.pop()
+    }
+  }
+}

package/src/transport/batch.ts

@@ -0,0 +1,92 @@
+import { display } from '../tools/display'
+import type { Context } from '../tools/serialisation/context'
+import { objectValues } from '../tools/utils/polyfills'
+import { isPageExitReason } from '../browser/pageExitObservable'
+import { computeBytesCount } from '../tools/utils/byteUtils'
+import { jsonStringify } from '../tools/serialisation/jsonStringify'
+import type { HttpRequest } from './httpRequest'
+import type { FlushController, FlushEvent } from './flushController'
+
+export class Batch {
+  private pushOnlyBuffer: string[] = []
+  private upsertBuffer: { [key: string]: string } = {}
+
+  constructor(
+    private request: HttpRequest,
+    public flushController: FlushController,
+    private messageBytesLimit: number
+  ) {
+    this.flushController.flushObservable.subscribe((event) => this.flush(event))
+  }
+
+  add(message: Context) {
+    this.addOrUpdate(message)
+  }
+
+  upsert(message: Context, key: string) {
+    this.addOrUpdate(message, key)
+  }
+
+  private flush(event: FlushEvent) {
+    const messages = this.pushOnlyBuffer.concat(objectValues(this.upsertBuffer))
+
+    this.pushOnlyBuffer = []
+    this.upsertBuffer = {}
+
+    const payload = { data: messages.join('\n'), bytesCount: event.bytesCount, flushReason: event.reason }
+    if (isPageExitReason(event.reason)) {
+      this.request.sendOnExit(payload)
+    } else {
+      this.request.send(payload)
+    }
+  }
+
+  private addOrUpdate(message: Context, key?: string) {
+    const { processedMessage, messageBytesCount } = this.process(message)
+
+    if (messageBytesCount >= this.messageBytesLimit) {
+      display.warn(
+        `Discarded a message whose size was bigger than the maximum allowed size ${this.messageBytesLimit}KB.`
+      )
+      return
+    }
+
+    if (this.hasMessageFor(key)) {
+      this.remove(key)
+    }
+
+    this.push(processedMessage, messageBytesCount, key)
+  }
+
+  private process(message: Context) {
+    const processedMessage = jsonStringify(message)!
+    const messageBytesCount = computeBytesCount(processedMessage)
+    return { processedMessage, messageBytesCount }
+  }
+
+  private push(processedMessage: string, messageBytesCount: number, key?: string) {
+    // If there are other messages, a '\n' will be added at serialization
+    const separatorBytesCount = this.flushController.messagesCount > 0 ? 1 : 0
+
+    this.flushController.notifyBeforeAddMessage(messageBytesCount + separatorBytesCount)
+    if (key !== undefined) {
+      this.upsertBuffer[key] = processedMessage
+    } else {
+      this.pushOnlyBuffer.push(processedMessage)
+    }
+    this.flushController.notifyAfterAddMessage()
+  }
+
+  private remove(key: string) {
+    const removedMessage = this.upsertBuffer[key]
+    delete this.upsertBuffer[key]
+    const messageBytesCount = computeBytesCount(removedMessage)
+    // If there are other messages, a '\n' will be added at serialization
+    const separatorBytesCount = this.flushController.messagesCount > 1 ? 1 : 0
+    this.flushController.notifyAfterRemoveMessage(messageBytesCount + separatorBytesCount)
+  }
+
+  private hasMessageFor(key?: string): key is string {
+    return key !== undefined && this.upsertBuffer[key] !== undefined
+  }
+}

package/src/transport/eventBridge.ts

@@ -0,0 +1,42 @@
+import { endsWith } from '../tools/utils/polyfills'
+import { getGlobalObject } from '../tools/getGlobalObject'
+
+export interface BrowserWindowWithEventBridge extends Window {
+  DatadogEventBridge?: DatadogEventBridge
+}
+
+export interface DatadogEventBridge {
+  getAllowedWebViewHosts(): string
+  send(msg: string): void
+}
+
+export function getEventBridge<T, E>() {
+  const eventBridgeGlobal = getEventBridgeGlobal()
+
+  if (!eventBridgeGlobal) {
+    return
+  }
+
+  return {
+    getAllowedWebViewHosts() {
+      return JSON.parse(eventBridgeGlobal.getAllowedWebViewHosts()) as string[]
+    },
+    send(eventType: T, event: E) {
+      eventBridgeGlobal.send(JSON.stringify({ eventType, event }))
+    },
+  }
+}
+
+export function canUseEventBridge(currentHost = getGlobalObject<Window>().location?.hostname): boolean {
+  const bridge = getEventBridge()
+  return (
+    !!bridge &&
+    bridge
+      .getAllowedWebViewHosts()
+      .some((allowedHost) => currentHost === allowedHost || endsWith(currentHost, `.${allowedHost}`))
+  )
+}
+
+function getEventBridgeGlobal() {
+  return getGlobalObject<BrowserWindowWithEventBridge>().DatadogEventBridge
+}

package/src/transport/flushController.ts

@@ -0,0 +1,129 @@
+import type { PageExitEvent, PageExitReason } from '../browser/pageExitObservable'
+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
+  pageExitObservable: Observable<PageExitEvent>
+  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,
+  pageExitObservable,
+  sessionExpireObservable,
+}: FlushControllerOptions) {
+  const flushObservable = new Observable<FlushEvent>()
+
+  pageExitObservable.subscribe((event) => flush(event.reason))
+  sessionExpireObservable.subscribe(() => flush('session_expire'))
+
+  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.
+     */
+    notifyBeforeAddMessage(messageBytesCount: number) {
+      if (currentBytesCount + messageBytesCount >= 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 += messageBytesCount
+      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.
+     */
+    notifyAfterAddMessage() {
+      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`.
+     */
+    notifyAfterRemoveMessage(messageBytesCount: number) {
+      currentBytesCount -= messageBytesCount
+      currentMessagesCount -= 1
+      if (currentMessagesCount === 0) {
+        cancelDurationLimitTimeout()
+      }
+    },
+  }
+}