@openobserve/browser-core 0.2.11-rc1 → 0.2.11

package/src/tools/instrumentMethod.ts

@@ -2,77 +2,30 @@ import { setTimeout } from './timer'
 import { callMonitored } from './monitor'
 import { noop } from './utils/functionUtils'
 
-/**
- * Object passed to the callback of an instrumented method call. See `instrumentMethod` for more
- * info.
- */
-export type InstrumentedMethodCall<TARGET extends { [key: string]: any }, METHOD extends keyof TARGET> = {
-  /**
-   * The target object on which the method was called.
-   */
-  target: TARGET
-
-  /**
-   * The parameters with which the method was called. To avoid having to clone the argument list
-   * every time, this property is actually an instance of Argument, not Array, so not all methods
-   * are available (like .forEach).
-   *
-   * Note: if needed, parameters can be mutated by the instrumentation
-   */
-  parameters: Parameters<TARGET[METHOD]>
-
-  /**
-   * Registers a callback that will be called after the original method is called, with the method
-   * result passed as argument.
-   */
-  onPostCall: (callback: PostCallCallback<TARGET, METHOD>) => void
-}
-
-type PostCallCallback<TARGET extends { [key: string]: any }, METHOD extends keyof TARGET> = (
-  result: ReturnType<TARGET[METHOD]>
-) => void
-
-/**
- * Instruments a method on a object, calling the given callback before the original method is
- * invoked. The callback receives an object with information about the method call.
- *
- * Note: it is generally better to instrument methods that are "owned" by the object instead of ones
- * that are inherited from the prototype chain. Example:
- * * do:    `instrumentMethod(Array.prototype, 'push', ...)`
- * * don't: `instrumentMethod([], 'push', ...)`
- *
- * @example
- *
- *  instrumentMethod(window, 'fetch', ({ target, parameters, onPostCall }) => {
- *    console.log('Before calling fetch on', target, 'with parameters', parameters)
- *
- *    onPostCall((result) => {
- *      console.log('After fetch calling on', target, 'with parameters', parameters, 'and result', result)
- *    })
- *  })
- */
-export function instrumentMethod<TARGET extends { [key: string]: any }, METHOD extends keyof TARGET>(
-  targetPrototype: TARGET,
+export function instrumentMethod<OBJECT extends { [key: string]: any }, METHOD extends keyof OBJECT>(
+  object: OBJECT,
   method: METHOD,
-  onPreCall: (this: null, callInfos: InstrumentedMethodCall<TARGET, METHOD>) => void
+  instrumentationFactory: (
+    original: OBJECT[METHOD]
+  ) => (this: OBJECT, ...args: Parameters<OBJECT[METHOD]>) => ReturnType<OBJECT[METHOD]>
 ) {
-  const original = targetPrototype[method]
+  const original = object[method]
 
-  let instrumentation = createInstrumentedMethod(original, onPreCall)
+  let instrumentation = instrumentationFactory(original)
 
-  const instrumentationWrapper = function (this: TARGET): ReturnType<TARGET[METHOD]> | undefined {
+  const instrumentationWrapper = function (this: OBJECT): ReturnType<OBJECT[METHOD]> | undefined {
     if (typeof instrumentation !== 'function') {
       return undefined
     }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
-    return instrumentation.apply(this, arguments as unknown as Parameters<TARGET[METHOD]>)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return instrumentation.apply(this, arguments as unknown as Parameters<OBJECT[METHOD]>)
   }
-  targetPrototype[method] = instrumentationWrapper as TARGET[METHOD]
+  object[method] = instrumentationWrapper as OBJECT[METHOD]
 
   return {
     stop: () => {
-      if (targetPrototype[method] === instrumentationWrapper) {
-        targetPrototype[method] = original
+      if (object[method] === instrumentationWrapper) {
+        object[method] = original
       } else {
         instrumentation = original
       }
@@ -80,71 +33,74 @@ export function instrumentMethod<TARGET extends { [key: string]: any }, METHOD e
   }
 }
 
-function createInstrumentedMethod<TARGET extends { [key: string]: any }, METHOD extends keyof TARGET>(
-  original: TARGET[METHOD],
-  onPreCall: (this: null, callInfos: InstrumentedMethodCall<TARGET, METHOD>) => void
-): TARGET[METHOD] {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return function (this: TARGET) {
-    const parameters = arguments as unknown as Parameters<TARGET[METHOD]>
-    let result
-
-    let postCallCallback: PostCallCallback<TARGET, METHOD> | undefined
-
-    callMonitored(onPreCall, null, [
-      {
-        target: this,
-        parameters,
-        onPostCall: (callback) => {
-          postCallCallback = callback
-        },
-      },
-    ])
-
-    if (typeof original === 'function') {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      result = original.apply(this, parameters)
-    }
-
-    if (postCallCallback) {
-      callMonitored(postCallCallback, null, [result])
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return result
-  } as TARGET[METHOD]
+export function instrumentMethodAndCallOriginal<OBJECT extends { [key: string]: any }, METHOD extends keyof OBJECT>(
+  object: OBJECT,
+  method: METHOD,
+  {
+    before,
+    after,
+  }: {
+    before?: (this: OBJECT, ...args: Parameters<OBJECT[METHOD]>) => void
+    after?: (this: OBJECT, ...args: Parameters<OBJECT[METHOD]>) => void
+  }
+) {
+  return instrumentMethod(
+    object,
+    method,
+    (original) =>
+      function () {
+        const args = arguments as unknown as Parameters<OBJECT[METHOD]>
+        let result
+
+        if (before) {
+          callMonitored(before, this, args)
+        }
+
+        if (typeof original === 'function') {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          result = original.apply(this, args)
+        }
+
+        if (after) {
+          callMonitored(after, this, args)
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return result
+      }
+  )
 }
 
-export function instrumentSetter<TARGET extends { [key: string]: any }, PROPERTY extends keyof TARGET>(
-  targetPrototype: TARGET,
+export function instrumentSetter<OBJECT extends { [key: string]: any }, PROPERTY extends keyof OBJECT>(
+  object: OBJECT,
   property: PROPERTY,
-  after: (target: TARGET, value: TARGET[PROPERTY]) => void
+  after: (thisObject: OBJECT, value: OBJECT[PROPERTY]) => void
 ) {
-  const originalDescriptor = Object.getOwnPropertyDescriptor(targetPrototype, property)
+  const originalDescriptor = Object.getOwnPropertyDescriptor(object, property)
   if (!originalDescriptor || !originalDescriptor.set || !originalDescriptor.configurable) {
     return { stop: noop }
   }
 
-  let instrumentation = (target: TARGET, value: TARGET[PROPERTY]) => {
+  let instrumentation = (thisObject: OBJECT, value: OBJECT[PROPERTY]) => {
     // put hooked setter into event loop to avoid of set latency
     setTimeout(() => {
-      after(target, value)
+      after(thisObject, value)
     }, 0)
   }
 
-  const instrumentationWrapper = function (this: TARGET, value: TARGET[PROPERTY]) {
+  const instrumentationWrapper = function (this: OBJECT, value: OBJECT[PROPERTY]) {
     originalDescriptor.set!.call(this, value)
     instrumentation(this, value)
   }
 
-  Object.defineProperty(targetPrototype, property, {
+  Object.defineProperty(object, property, {
     set: instrumentationWrapper,
   })
 
   return {
     stop: () => {
-      if (Object.getOwnPropertyDescriptor(targetPrototype, property)?.set === instrumentationWrapper) {
-        Object.defineProperty(targetPrototype, property, originalDescriptor)
+      if (Object.getOwnPropertyDescriptor(object, property)?.set === instrumentationWrapper) {
+        Object.defineProperty(object, property, originalDescriptor)
       } else {
         instrumentation = noop
       }

package/src/tools/mergeInto.ts

@@ -5,22 +5,22 @@ type Merged<TDestination, TSource> =
   TSource extends undefined
     ? TDestination
     : // case 2 - destination is undefined - return source
-      TDestination extends undefined
-      ? TSource
-      : // case 3 - source is an array - see if it merges or overwrites
-        TSource extends any[]
-        ? TDestination extends any[]
-          ? TDestination & TSource
-          : TSource
-        : // case 4 - source is an object - see if it merges or overwrites
-          TSource extends object
-          ? TDestination extends object
-            ? TDestination extends any[]
-              ? TSource
-              : TDestination & TSource
-            : TSource
-          : // case 5 - cannot merge - return source
-            TSource
+    TDestination extends undefined
+    ? TSource
+    : // case 3 - source is an array - see if it merges or overwrites
+    TSource extends any[]
+    ? TDestination extends any[]
+      ? TDestination & TSource
+      : TSource
+    : // case 4 - source is an object - see if it merges or overwrites
+    TSource extends object
+    ? TDestination extends object
+      ? TDestination extends any[]
+        ? TSource
+        : TDestination & TSource
+      : TSource
+    : // case 5 - cannot merge - return source
+      TSource
 
 /**
  * Iterate over source and affect its sub values into destination, recursively.

package/src/tools/monitor.ts

@@ -1,4 +1,4 @@
-import { display } from './display'
+import { ConsoleApiName, display } from './display'
 
 let onMonitorErrorCollected: undefined | ((error: unknown) => void)
 let debugMode = false
@@ -50,19 +50,19 @@ export function callMonitored<T extends (...args: any[]) => any>(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return fn.apply(context, args)
   } catch (e) {
-    displayIfDebugEnabled(e)
+    displayIfDebugEnabled(ConsoleApiName.error, e)
     if (onMonitorErrorCollected) {
       try {
         onMonitorErrorCollected(e)
       } catch (e) {
-        displayIfDebugEnabled(e)
+        displayIfDebugEnabled(ConsoleApiName.error, e)
       }
     }
   }
 }
 
-export function displayIfDebugEnabled(...args: any[]) {
+export function displayIfDebugEnabled(api: ConsoleApiName, ...args: any[]) {
   if (debugMode) {
-    display.error('[MONITOR]', ...args)
+    display(api, '[MONITOR]', ...args)
   }
 }

package/src/tools/observable.ts

@@ -6,11 +6,11 @@ export class Observable<T> {
   private observers: Array<(data: T) => void> = []
   private onLastUnsubscribe?: () => void
 
-  constructor(private onFirstSubscribe?: (observable: Observable<T>) => (() => void) | void) {}
+  constructor(private onFirstSubscribe?: () => (() => void) | void) {}
 
   subscribe(f: (data: T) => void): Subscription {
     if (!this.observers.length && this.onFirstSubscribe) {
-      this.onLastUnsubscribe = this.onFirstSubscribe(this) || undefined
+      this.onLastUnsubscribe = this.onFirstSubscribe() || undefined
     }
     this.observers.push(f)
     return {
@@ -29,10 +29,12 @@ export class Observable<T> {
 }
 
 export function mergeObservables<T>(...observables: Array<Observable<T>>) {
-  return new Observable<T>((globalObservable) => {
+  const globalObservable = new Observable<T>(() => {
     const subscriptions: Subscription[] = observables.map((observable) =>
       observable.subscribe((data) => globalObservable.notify(data))
     )
     return () => subscriptions.forEach((subscription) => subscription.unsubscribe())
   })
+
+  return globalObservable
 }

package/src/tools/serialisation/contextManager.ts

@@ -0,0 +1,79 @@
+import { computeBytesCount } from '../utils/byteUtils'
+import { throttle } from '../utils/functionUtils'
+import { deepClone } from '../mergeInto'
+import { getType } from '../utils/typeUtils'
+import { jsonStringify } from './jsonStringify'
+import { sanitize } from './sanitize'
+import { warnIfCustomerDataLimitReached } from './heavyCustomerDataWarning'
+import type { CustomerDataType } from './heavyCustomerDataWarning'
+import type { Context, ContextValue } from './context'
+
+export const BYTES_COMPUTATION_THROTTLING_DELAY = 200
+
+export type ContextManager = ReturnType<typeof createContextManager>
+
+export function createContextManager(customerDataType: CustomerDataType, computeBytesCountImpl = computeBytesCount) {
+  let context: Context = {}
+  let bytesCountCache: number
+  let alreadyWarned = false
+
+  // Throttle the bytes computation to minimize the impact on performance.
+  // Especially useful if the user call context APIs synchronously multiple times in a row
+  const { throttled: computeBytesCountThrottled } = throttle((context: Context) => {
+    bytesCountCache = computeBytesCountImpl(jsonStringify(context)!)
+    if (!alreadyWarned) {
+      alreadyWarned = warnIfCustomerDataLimitReached(bytesCountCache, customerDataType)
+    }
+  }, BYTES_COMPUTATION_THROTTLING_DELAY)
+
+  const contextManager = {
+    getBytesCount: () => bytesCountCache,
+    /** @deprecated use getContext instead */
+    get: () => context,
+
+    /** @deprecated use setContextProperty instead */
+    add: (key: string, value: any) => {
+      context[key] = value as ContextValue
+      computeBytesCountThrottled(context)
+    },
+
+    /** @deprecated renamed to removeContextProperty */
+    remove: (key: string) => {
+      delete context[key]
+      computeBytesCountThrottled(context)
+    },
+
+    /** @deprecated use setContext instead */
+    set: (newContext: object) => {
+      context = newContext as Context
+      computeBytesCountThrottled(context)
+    },
+
+    getContext: () => deepClone(context),
+
+    setContext: (newContext: Context) => {
+      if (getType(newContext) === 'object') {
+        context = sanitize(newContext)
+        computeBytesCountThrottled(context)
+      } else {
+        contextManager.clearContext()
+      }
+    },
+
+    setContextProperty: (key: string, property: any) => {
+      context[key] = sanitize(property)
+      computeBytesCountThrottled(context)
+    },
+
+    removeContextProperty: (key: string) => {
+      delete context[key]
+      computeBytesCountThrottled(context)
+    },
+
+    clearContext: () => {
+      context = {}
+      bytesCountCache = 0
+    },
+  }
+  return contextManager
+}

package/src/tools/serialisation/heavyCustomerDataWarning.ts

@@ -0,0 +1,26 @@
+import { ONE_KIBI_BYTE } from '../utils/byteUtils'
+import { display } from '../display'
+
+// RUM and logs batch bytes limit is 16KB
+// ensure that we leave room for other event attributes and maintain a decent amount of event per batch
+// (3KB (customer data) + 1KB (other attributes)) * 4 (events per batch) = 16KB
+export const CUSTOMER_DATA_BYTES_LIMIT = 3 * ONE_KIBI_BYTE
+
+export const enum CustomerDataType {
+  FeatureFlag = 'feature flag evaluation',
+  User = 'user',
+  GlobalContext = 'global context',
+  LoggerContext = 'logger context',
+}
+
+export function warnIfCustomerDataLimitReached(bytesCount: number, customerDataType: CustomerDataType): boolean {
+  if (bytesCount > CUSTOMER_DATA_BYTES_LIMIT) {
+    display.warn(
+      `The ${customerDataType} data exceeds the recommended ${
+        CUSTOMER_DATA_BYTES_LIMIT / ONE_KIBI_BYTE
+      }KiB threshold. More details: https://docs.datadoghq.com/real_user_monitoring/browser/troubleshooting/#customer-data-exceeds-the-recommended-3kib-warning`
+    )
+    return true
+  }
+  return false
+}

package/src/tools/utils/browserDetection.ts

@@ -1,48 +1,7 @@
-// Exported only for tests
-export const enum Browser {
-  IE,
-  CHROMIUM,
-  SAFARI,
-  OTHER,
-}
-
 export function isIE() {
-  return detectBrowserCached() === Browser.IE
+  return Boolean((document as any).documentMode)
 }
 
 export function isChromium() {
-  return detectBrowserCached() === Browser.CHROMIUM
-}
-
-export function isSafari() {
-  return detectBrowserCached() === Browser.SAFARI
-}
-
-let browserCache: Browser | undefined
-function detectBrowserCached() {
-  return browserCache ?? (browserCache = detectBrowser())
-}
-
-// Exported only for tests
-export function detectBrowser(browserWindow: Window = window) {
-  const userAgent = browserWindow.navigator.userAgent
-  if ((browserWindow as any).chrome || /HeadlessChrome/.test(userAgent)) {
-    return Browser.CHROMIUM
-  }
-
-  if (
-    // navigator.vendor is deprecated, but it is the most resilient way we found to detect
-    // "Apple maintained browsers" (AKA Safari). If one day it gets removed, we still have the
-    // useragent test as a semi-working fallback.
-    browserWindow.navigator.vendor?.indexOf('Apple') === 0 ||
-    (/safari/i.test(userAgent) && !/chrome|android/i.test(userAgent))
-  ) {
-    return Browser.SAFARI
-  }
-
-  if ((browserWindow.document as any).documentMode) {
-    return Browser.IE
-  }
-
-  return Browser.OTHER
+  return !!(window as any).chrome || /HeadlessChrome/.test(window.navigator.userAgent)
 }

package/src/tools/utils/polyfills.ts

@@ -27,7 +27,10 @@ export function find<T, S extends T>(
   predicate: (item: T, index: number) => item is S
 ): S | undefined
 export function find<T>(array: ArrayLike<T>, predicate: (item: T, index: number) => boolean): T | undefined
-export function find(array: ArrayLike<unknown>, predicate: (item: unknown, index: number) => boolean): unknown {
+export function find(
+  array: ArrayLike<unknown>,
+  predicate: (item: unknown, index: number) => boolean
+): unknown | undefined {
   for (let i = 0; i < array.length; i += 1) {
     const item = array[i]
     if (predicate(item, i)) {

package/src/tools/utils/stringUtils.ts

@@ -9,36 +9,10 @@ export function generateUUID(placeholder?: string): string {
     : `${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g, generateUUID)
 }
 
-const COMMA_SEPARATED_KEY_VALUE = /([\w-]+)\s*=\s*([^;]+)/g
-
-export function findCommaSeparatedValue(rawString: string, name: string): string | undefined {
-  COMMA_SEPARATED_KEY_VALUE.lastIndex = 0
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const match = COMMA_SEPARATED_KEY_VALUE.exec(rawString)
-    if (match) {
-      if (match[1] === name) {
-        return match[2]
-      }
-    } else {
-      break
-    }
-  }
-}
-
-export function findCommaSeparatedValues(rawString: string): Map<string, string> {
-  const result = new Map<string, string>()
-  COMMA_SEPARATED_KEY_VALUE.lastIndex = 0
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    const match = COMMA_SEPARATED_KEY_VALUE.exec(rawString)
-    if (match) {
-      result.set(match[1], match[2])
-    } else {
-      break
-    }
-  }
-  return result
+export function findCommaSeparatedValue(rawString: string, name: string) {
+  const regex = new RegExp(`(?:^|;)\\s*${name}\\s*=\\s*([^;]+)`)
+  const matches = regex.exec(rawString)
+  return matches ? matches[1] : undefined
 }
 
 export function safeTruncate(candidate: string, length: number, suffix = '') {