@openobserve/browser-core 0.2.11 → 0.2.12-beta.1

package/src/tools/instrumentMethod.ts

@@ -1,109 +1,170 @@
 import { setTimeout } from './timer'
 import { callMonitored } from './monitor'
 import { noop } from './utils/functionUtils'
+import { createHandlingStack } from './stackTrace/handlingStack'
 
-export function instrumentMethod<OBJECT extends { [key: string]: any }, METHOD extends keyof OBJECT>(
-  object: OBJECT,
+/**
+ * Object passed to the callback of an instrumented method call. See `instrumentMethod` for more
+ * info.
+ */
+export interface 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.
+   *
+   * 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
+
+  /**
+   * The stack trace of the method call.
+   */
+  handlingStack?: string
+}
+
+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.
+ *
+ * This function makes sure that we are "good citizens" regarding third party instrumentations: when
+ * removing the instrumentation, the original method is usually restored, but if a third party
+ * instrumentation was set after ours, we keep it in place and just replace our instrumentation with
+ * a noop.
+ *
+ * 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', ...)`
+ *
+ * This method is also used to set event handler properties (ex: window.onerror = ...), as it has
+ * the same requirements as instrumenting a method:
+ * * if the event handler is already set by a third party, we need to call it and not just blindly
+ * override it.
+ * * if the event handler is set by a third party after us, we need to keep it in place when
+ * removing ours.
+ *
+ * @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 & string>(
+  targetPrototype: TARGET,
   method: METHOD,
-  instrumentationFactory: (
-    original: OBJECT[METHOD]
-  ) => (this: OBJECT, ...args: Parameters<OBJECT[METHOD]>) => ReturnType<OBJECT[METHOD]>
+  onPreCall: (this: null, callInfos: InstrumentedMethodCall<TARGET, METHOD>) => void,
+  { computeHandlingStack }: { computeHandlingStack?: boolean } = {}
 ) {
-  const original = object[method]
+  let original = targetPrototype[method]
+
+  if (typeof original !== 'function') {
+    if (method in targetPrototype && method.startsWith('on')) {
+      original = noop as TARGET[METHOD]
+    } else {
+      return { stop: noop }
+    }
+  }
+
+  let stopped = false
+
+  const instrumentation = function (this: TARGET): ReturnType<TARGET[METHOD]> | undefined {
+    if (stopped) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
+      return original.apply(this, arguments as unknown as Parameters<TARGET[METHOD]>)
+    }
 
-  let instrumentation = instrumentationFactory(original)
+    const parameters = Array.from(arguments) as Parameters<TARGET[METHOD]>
 
-  const instrumentationWrapper = function (this: OBJECT): ReturnType<OBJECT[METHOD]> | undefined {
-    if (typeof instrumentation !== 'function') {
-      return undefined
+    let postCallCallback: PostCallCallback<TARGET, METHOD> | undefined
+
+    callMonitored(onPreCall, null, [
+      {
+        target: this,
+        parameters,
+        onPostCall: (callback) => {
+          postCallCallback = callback
+        },
+        handlingStack: computeHandlingStack ? createHandlingStack('instrumented method') : undefined,
+      },
+    ])
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    const result = original.apply(this, parameters)
+
+    if (postCallCallback) {
+      callMonitored(postCallCallback, null, [result])
     }
+
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return instrumentation.apply(this, arguments as unknown as Parameters<OBJECT[METHOD]>)
+    return result
   }
-  object[method] = instrumentationWrapper as OBJECT[METHOD]
+
+  targetPrototype[method] = instrumentation as TARGET[METHOD]
 
   return {
     stop: () => {
-      if (object[method] === instrumentationWrapper) {
-        object[method] = original
-      } else {
-        instrumentation = original
+      stopped = true
+      // If the instrumentation has been removed by a third party, keep the last one
+      if (targetPrototype[method] === instrumentation) {
+        targetPrototype[method] = original
       }
     },
   }
 }
 
-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<OBJECT extends { [key: string]: any }, PROPERTY extends keyof OBJECT>(
-  object: OBJECT,
+export function instrumentSetter<TARGET extends { [key: string]: any }, PROPERTY extends keyof TARGET>(
+  targetPrototype: TARGET,
   property: PROPERTY,
-  after: (thisObject: OBJECT, value: OBJECT[PROPERTY]) => void
+  after: (target: TARGET, value: TARGET[PROPERTY]) => void
 ) {
-  const originalDescriptor = Object.getOwnPropertyDescriptor(object, property)
+  const originalDescriptor = Object.getOwnPropertyDescriptor(targetPrototype, property)
   if (!originalDescriptor || !originalDescriptor.set || !originalDescriptor.configurable) {
     return { stop: noop }
   }
 
-  let instrumentation = (thisObject: OBJECT, value: OBJECT[PROPERTY]) => {
+  const stoppedInstrumentation = noop
+  let instrumentation = (target: TARGET, value: TARGET[PROPERTY]) => {
     // put hooked setter into event loop to avoid of set latency
     setTimeout(() => {
-      after(thisObject, value)
+      if (instrumentation !== stoppedInstrumentation) {
+        after(target, value)
+      }
     }, 0)
   }
 
-  const instrumentationWrapper = function (this: OBJECT, value: OBJECT[PROPERTY]) {
+  const instrumentationWrapper = function (this: TARGET, value: TARGET[PROPERTY]) {
     originalDescriptor.set!.call(this, value)
     instrumentation(this, value)
   }
 
-  Object.defineProperty(object, property, {
+  Object.defineProperty(targetPrototype, property, {
     set: instrumentationWrapper,
   })
 
   return {
     stop: () => {
-      if (Object.getOwnPropertyDescriptor(object, property)?.set === instrumentationWrapper) {
-        Object.defineProperty(object, property, originalDescriptor)
-      } else {
-        instrumentation = noop
+      if (Object.getOwnPropertyDescriptor(targetPrototype, property)?.set === instrumentationWrapper) {
+        Object.defineProperty(targetPrototype, property, originalDescriptor)
       }
+      instrumentation = stoppedInstrumentation
     },
   }
 }

package/src/tools/matchOption.ts

@@ -1,4 +1,3 @@
-import { startsWith } from './utils/polyfills'
 import { display } from './display'
 import { getType } from './utils/typeUtils'
 
@@ -22,7 +21,7 @@ export function matchList(list: MatchOption[], value: string, useStartsWith = fa
       } else if (item instanceof RegExp) {
         return item.test(value)
       } else if (typeof item === 'string') {
-        return useStartsWith ? startsWith(value, item) : item === value
+        return useStartsWith ? value.startsWith(item) : item === value
       }
     } catch (e) {
       display.error(e)

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 { ConsoleApiName, display } from './display'
+import { display } from './display'
 
 let onMonitorErrorCollected: undefined | ((error: unknown) => void)
 let debugMode = false
@@ -50,19 +50,23 @@ 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(ConsoleApiName.error, e)
-    if (onMonitorErrorCollected) {
-      try {
-        onMonitorErrorCollected(e)
-      } catch (e) {
-        displayIfDebugEnabled(ConsoleApiName.error, e)
-      }
+    monitorError(e)
+  }
+}
+
+export function monitorError(e: unknown) {
+  displayIfDebugEnabled(e)
+  if (onMonitorErrorCollected) {
+    try {
+      onMonitorErrorCollected(e)
+    } catch (e) {
+      displayIfDebugEnabled(e)
     }
   }
 }
 
-export function displayIfDebugEnabled(api: ConsoleApiName, ...args: any[]) {
+export function displayIfDebugEnabled(...args: any[]) {
   if (debugMode) {
-    display(api, '[MONITOR]', ...args)
+    display.error('[MONITOR]', ...args)
   }
 }

package/src/tools/observable.ts

@@ -1,40 +1,104 @@
+import { queueMicrotask } from './queueMicrotask'
+
 export interface Subscription {
   unsubscribe: () => void
 }
 
+type Observer<T> = (data: T) => void
+
+// eslint-disable-next-line no-restricted-syntax
 export class Observable<T> {
-  private observers: Array<(data: T) => void> = []
+  protected observers: Array<Observer<T>> = []
   private onLastUnsubscribe?: () => void
 
-  constructor(private onFirstSubscribe?: () => (() => void) | void) {}
+  constructor(private onFirstSubscribe?: (observable: Observable<T>) => (() => void) | void) {}
 
-  subscribe(f: (data: T) => void): Subscription {
-    if (!this.observers.length && this.onFirstSubscribe) {
-      this.onLastUnsubscribe = this.onFirstSubscribe() || undefined
-    }
-    this.observers.push(f)
+  subscribe(observer: Observer<T>): Subscription {
+    this.addObserver(observer)
     return {
-      unsubscribe: () => {
-        this.observers = this.observers.filter((other) => f !== other)
-        if (!this.observers.length && this.onLastUnsubscribe) {
-          this.onLastUnsubscribe()
-        }
-      },
+      unsubscribe: () => this.removeObserver(observer),
     }
   }
 
   notify(data: T) {
     this.observers.forEach((observer) => observer(data))
   }
+
+  protected addObserver(observer: Observer<T>) {
+    this.observers.push(observer)
+    if (this.observers.length === 1 && this.onFirstSubscribe) {
+      this.onLastUnsubscribe = this.onFirstSubscribe(this) || undefined
+    }
+  }
+
+  protected removeObserver(observer: Observer<T>) {
+    this.observers = this.observers.filter((other) => observer !== other)
+    if (!this.observers.length && this.onLastUnsubscribe) {
+      this.onLastUnsubscribe()
+    }
+  }
 }
 
 export function mergeObservables<T>(...observables: Array<Observable<T>>) {
-  const globalObservable = new Observable<T>(() => {
+  return new Observable<T>((globalObservable) => {
     const subscriptions: Subscription[] = observables.map((observable) =>
       observable.subscribe((data) => globalObservable.notify(data))
     )
     return () => subscriptions.forEach((subscription) => subscription.unsubscribe())
   })
+}
+
+// eslint-disable-next-line no-restricted-syntax
+export class BufferedObservable<T> extends Observable<T> {
+  private buffer: T[] = []
+
+  constructor(private maxBufferSize: number) {
+    super()
+  }
 
-  return globalObservable
+  notify(data: T) {
+    this.buffer.push(data)
+    if (this.buffer.length > this.maxBufferSize) {
+      this.buffer.shift()
+    }
+    super.notify(data)
+  }
+
+  subscribe(observer: Observer<T>): Subscription {
+    let closed = false
+
+    const subscription = {
+      unsubscribe: () => {
+        closed = true
+        this.removeObserver(observer)
+      },
+    }
+
+    queueMicrotask(() => {
+      for (const data of this.buffer) {
+        if (closed) {
+          return
+        }
+        observer(data)
+      }
+
+      if (!closed) {
+        this.addObserver(observer)
+      }
+    })
+
+    return subscription
+  }
+
+  /**
+   * Drop buffered data and don't buffer future data. This is to avoid leaking memory when it's not
+   * needed anymore. This can be seen as a performance optimization, and things will work probably
+   * even if this method isn't called, but still useful to clarify our intent and lowering our
+   * memory impact.
+   */
+  unbuffer() {
+    queueMicrotask(() => {
+      this.maxBufferSize = this.buffer.length = 0
+    })
+  }
 }

package/src/tools/queueMicrotask.ts

@@ -0,0 +1,13 @@
+import { monitor } from './monitor'
+import { globalObject } from './globalObject'
+
+export function queueMicrotask(callback: () => void) {
+  const nativeImplementation = globalObject.queueMicrotask?.bind(globalObject)
+
+  if (typeof nativeImplementation === 'function') {
+    nativeImplementation(monitor(callback))
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises -- the callback is monitored, so it'll never throw
+    Promise.resolve().then(monitor(callback))
+  }
+}

package/src/tools/readBytesFromStream.ts

@@ -1,77 +1,37 @@
-import { monitor } from './monitor'
+import type { Uint8ArrayBuffer } from './utils/byteUtils'
+import { concatBuffers } from './utils/byteUtils'
 import { noop } from './utils/functionUtils'
 
-type Options = {
-  bytesLimit: number
+interface Options {
+  // TODO(next-major): always collect stream body when `trackEarlyRequests` is removed, as we don't
+  // need to use this function to just wait for the end of the stream without collecting it
   collectStreamBody?: boolean
 }
+
 /**
- * Read bytes from a ReadableStream until at least `limit` bytes have been read (or until the end of
- * the stream). The callback is invoked with the at most `limit` bytes, and indicates that the limit
- * has been exceeded if more bytes were available.
+ * Read bytes from a ReadableStream until the end of the stream.
+ * Returns the bytes if collectStreamBody is true, otherwise returns undefined.
  */
-export function readBytesFromStream(
-  stream: ReadableStream<Uint8Array>,
-  callback: (error?: Error, bytes?: Uint8Array, limitExceeded?: boolean) => void,
-  options: Options
-) {
+export async function readBytesFromStream(stream: ReadableStream<Uint8ArrayBuffer>, options: Options) {
   const reader = stream.getReader()
-  const chunks: Uint8Array[] = []
-  let readBytesCount = 0
-
-  readMore()
-
-  function readMore() {
-    reader.read().then(
-      monitor((result: ReadableStreamReadResult<Uint8Array>) => {
-        if (result.done) {
-          onDone()
-          return
-        }
-
-        if (options.collectStreamBody) {
-          chunks.push(result.value)
-        }
-        readBytesCount += result.value.length
-
-        if (readBytesCount > options.bytesLimit) {
-          onDone()
-        } else {
-          readMore()
-        }
-      }),
-      monitor((error) => callback(error))
-    )
-  }
+  const chunks: Uint8ArrayBuffer[] = []
 
-  function onDone() {
-    reader.cancel().catch(
-      // we don't care if cancel fails, but we still need to catch the error to avoid reporting it
-      // as an unhandled rejection
-      noop
-    )
+  while (true) {
+    const result = await reader.read()
+    if (result.done) {
+      break
+    }
 
-    let bytes: Uint8Array | undefined
-    let limitExceeded: boolean | undefined
     if (options.collectStreamBody) {
-      let completeBuffer: Uint8Array
-      if (chunks.length === 1) {
-        // optimization: if the response is small enough to fit in a single buffer (provided by the browser), just
-        // use it directly.
-        completeBuffer = chunks[0]
-      } else {
-        // else, we need to copy buffers into a larger buffer to concatenate them.
-        completeBuffer = new Uint8Array(readBytesCount)
-        let offset = 0
-        chunks.forEach((chunk) => {
-          completeBuffer.set(chunk, offset)
-          offset += chunk.length
-        })
-      }
-      bytes = completeBuffer.slice(0, options.bytesLimit)
-      limitExceeded = completeBuffer.length > options.bytesLimit
+      chunks.push(result.value)
     }
-
-    callback(undefined, bytes, limitExceeded)
   }
+
+  reader.cancel().catch(
+    // we don't care if cancel fails, but we still need to catch the error to avoid reporting it
+    // as an unhandled rejection
+    noop
+  )
+
+  return options.collectStreamBody ? concatBuffers(chunks) : undefined
 }

package/src/tools/requestIdleCallback.ts

@@ -0,0 +1,40 @@
+import { setTimeout, clearTimeout } from './timer'
+import { monitor } from './monitor'
+import { dateNow } from './utils/timeUtils'
+
+// This type is not yet supported in TS 3.8. Imported from the TS source until we upgrade the
+// minimum supported TS version.
+// https://github.com/microsoft/TypeScript/blob/13c374a868c926f6a907666a5599992c1351b773/src/lib/dom.generated.d.ts#L9513-L9516
+export interface IdleDeadline {
+  readonly didTimeout: boolean
+  timeRemaining(): DOMHighResTimeStamp
+}
+
+/**
+ * 'requestIdleCallback' with a shim.
+ */
+export function requestIdleCallback(callback: (deadline: IdleDeadline) => void, opts?: { timeout?: number }) {
+  // Note: check both 'requestIdleCallback' and 'cancelIdleCallback' existence because some polyfills only implement 'requestIdleCallback'.
+  if (window.requestIdleCallback && window.cancelIdleCallback) {
+    const id = window.requestIdleCallback(monitor(callback), opts)
+    return () => window.cancelIdleCallback(id)
+  }
+  return requestIdleCallbackShim(callback)
+}
+
+export const MAX_TASK_TIME = 50
+
+/*
+ * Shim from https://developer.chrome.com/blog/using-requestidlecallback#checking_for_requestidlecallback
+ * Note: there is no simple way to support the "timeout" option, so we ignore it.
+ */
+export function requestIdleCallbackShim(callback: (deadline: IdleDeadline) => void) {
+  const start = dateNow()
+  const timeoutId = setTimeout(() => {
+    callback({
+      didTimeout: false,
+      timeRemaining: () => Math.max(0, MAX_TASK_TIME - (dateNow() - start)),
+    })
+  }, 0)
+  return () => clearTimeout(timeoutId)
+}

package/src/tools/sendToExtension.ts

@@ -1,3 +1,5 @@
+import { globalObject } from './globalObject'
+
 interface BrowserWindow {
   __ooBrowserSdkExtensionCallback?: (message: unknown) => void
 }
@@ -5,7 +7,7 @@ interface BrowserWindow {
 type ExtensionMessageType = 'logs' | 'record' | 'rum' | 'telemetry'
 
 export function sendToExtension(type: ExtensionMessageType, payload: unknown) {
-  const callback = (window as BrowserWindow).__ooBrowserSdkExtensionCallback
+  const callback = (globalObject as BrowserWindow).__ooBrowserSdkExtensionCallback
   if (callback) {
     callback({ type, payload })
   }

package/src/tools/serialisation/context.ts

@@ -4,5 +4,8 @@ export interface Context {
 
 export type ContextValue = string | number | boolean | Context | ContextArray | undefined | null
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+/**
+ * @hidden
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ContextArray extends Array<ContextValue> {}