@kubesense/kubesense-browser-rum-core 1.8.0 → 2.0.0-beta.1

package/src/domain/resource/resourceUtils.ts

@@ -1,22 +1,21 @@
-import type { Duration, RelativeTime } from '@kubesense/kubesense-browser-core'
+import { elapsed, toServerDuration } from '@kubesense/kubesense-js-core/time'
+import type { Duration, RelativeTime } from '@kubesense/kubesense-js-core/time'
 import {
-  elapsed,
-  getPathName,
-  isValidUrl,
-  buildUrl,
-  matchList,
   ResourceType,
-  toServerDuration,
-  isIntakeUrl,
   isExperimentalFeatureEnabled,
   ExperimentalFeature,
+  matchList,
 } from '@kubesense/kubesense-browser-core'
-import type { MatchOption } from '@kubesense/kubesense-browser-core'
+import { getPathName, isValidUrl, buildUrl } from '@kubesense/kubesense-js-core/util'
+import type { MatchOption } from '@kubesense/kubesense-js-core/configuration'
+import { isIntakeUrl } from '@kubesense/kubesense-js-core/transport'
 
-import type { RumPerformanceResourceTiming } from '../../browser/performanceObservable'
+import type { RumPerformanceNavigationTiming, RumPerformanceResourceTiming } from '../../browser/performanceObservable'
 
 import type { ResourceEntryDetailsElement, DeliveryType } from '../../rawRumEvent.types'
 
+export type ResourceLikeEntry = RumPerformanceResourceTiming | RumPerformanceNavigationTiming
+
 export interface ResourceEntryDetails {
   worker?: ResourceEntryDetailsElement
   redirect?: ResourceEntryDetailsElement
@@ -27,10 +26,8 @@ export interface ResourceEntryDetails {
   download?: ResourceEntryDetailsElement
 }
 
-export const FAKE_INITIAL_DOCUMENT = 'initial_document'
-
 const RESOURCE_TYPES: Array<[ResourceType, (initiatorType: string, path: string) => boolean]> = [
-  [ResourceType.DOCUMENT, (initiatorType: string) => FAKE_INITIAL_DOCUMENT === initiatorType],
+  [ResourceType.DOCUMENT, (initiatorType: string) => 'navigation' === initiatorType],
   [ResourceType.XHR, (initiatorType: string) => 'xmlhttprequest' === initiatorType],
   [ResourceType.FETCH, (initiatorType: string) => 'fetch' === initiatorType],
   [ResourceType.BEACON, (initiatorType: string) => 'beacon' === initiatorType],
@@ -49,7 +46,7 @@ const RESOURCE_TYPES: Array<[ResourceType, (initiatorType: string, path: string)
   ],
 ]
 
-export function computeResourceEntryType(entry: RumPerformanceResourceTiming) {
+export function computeResourceEntryType(entry: ResourceLikeEntry) {
   const url = entry.name
   if (!isValidUrl(url)) {
     return ResourceType.OTHER
@@ -72,22 +69,23 @@ function areInOrder(...numbers: number[]) {
   return true
 }
 
-export function isResourceEntryRequestType(entry: RumPerformanceResourceTiming) {
+export function isResourceEntryRequestType(entry: ResourceLikeEntry): entry is RumPerformanceResourceTiming {
   return entry.initiatorType === 'xmlhttprequest' || entry.initiatorType === 'fetch'
 }
 
-export function computeResourceEntryDuration(entry: RumPerformanceResourceTiming): Duration {
+export function computeResourceEntryDuration(entry: ResourceLikeEntry): Duration {
   const { duration, startTime, responseEnd } = entry
-
-  // Safari duration is always 0 on timings blocked by cross origin policies.
-  if (duration === 0 && startTime < responseEnd) {
+  // For navigation timing, `duration` is the page load time rather than the response time,
+  // so use `responseEnd - startTime` instead. Same fallback applies for Safari where duration
+  // is always 0 for cross-origin resources blocked by cross origin policies.
+  if (entry.initiatorType === 'navigation' || (duration === 0 && startTime < responseEnd)) {
     return elapsed(startTime, responseEnd)
   }
 
   return duration
 }
 
-export function computeResourceEntryDetails(entry: RumPerformanceResourceTiming): ResourceEntryDetails | undefined {
+export function computeResourceEntryDetails(entry: ResourceLikeEntry): ResourceEntryDetails | undefined {
   if (!hasValidResourceEntryTimings(entry)) {
     return undefined
   }
@@ -146,11 +144,11 @@ export function computeResourceEntryDetails(entry: RumPerformanceResourceTiming)
  * Since Chromium 128, more entries have unexpected negative durations, see
  * https://issues.chromium.org/issues/363031537
  */
-export function hasValidResourceEntryDuration(entry: RumPerformanceResourceTiming) {
+export function hasValidResourceEntryDuration(entry: ResourceLikeEntry) {
   return entry.duration >= 0
 }
 
-export function hasValidResourceEntryTimings(entry: RumPerformanceResourceTiming) {
+export function hasValidResourceEntryTimings(entry: ResourceLikeEntry) {
   // Ensure timings are in the right order. On top of filtering out potential invalid
   // RumPerformanceResourceTiming, it will ignore entries from requests where timings cannot be
   // collected, for example cross origin requests without a "Timing-Allow-Origin" header allowing
@@ -174,7 +172,7 @@ export function hasValidResourceEntryTimings(entry: RumPerformanceResourceTiming
   return areCommonTimingsInOrder && areRedirectionTimingsInOrder
 }
 
-function hasRedirection(entry: RumPerformanceResourceTiming) {
+function hasRedirection(entry: ResourceLikeEntry) {
   return entry.redirectEnd > entry.startTime
 }
 function formatTiming(origin: RelativeTime, start: RelativeTime, end: RelativeTime) {
@@ -191,7 +189,7 @@ function formatTiming(origin: RelativeTime, start: RelativeTime, end: RelativeTi
  * meaning the protocol is unknown, and we shouldn't report it.
  * https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/nextHopProtocol#cross-origin_resources
  */
-export function computeResourceEntryProtocol(entry: RumPerformanceResourceTiming) {
+export function computeResourceEntryProtocol(entry: ResourceLikeEntry) {
   return entry.nextHopProtocol === '' ? undefined : entry.nextHopProtocol
 }
 
@@ -200,11 +198,11 @@ export function computeResourceEntryProtocol(entry: RumPerformanceResourceTiming
  * undefined (unsupported in some browsers), and other cases ('other' for unknown or unrecognized values).
  * see: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
  */
-export function computeResourceEntryDeliveryType(entry: RumPerformanceResourceTiming): DeliveryType | undefined {
+export function computeResourceEntryDeliveryType(entry: ResourceLikeEntry): DeliveryType | undefined {
   return entry.deliveryType === '' ? 'other' : entry.deliveryType
 }
 
-export function computeResourceEntrySize(entry: RumPerformanceResourceTiming) {
+export function computeResourceEntrySize(entry: ResourceLikeEntry) {
   const { encodedBodySize, decodedBodySize, transferSize } = entry
 
   // Report sizes when:

package/src/domain/resource/trackManualResources.ts

@@ -0,0 +1,121 @@
+import type { Context, ResourceType } from '@kubesense/kubesense-browser-core'
+import { elapsed, toServerDuration, clocksNow } from '@kubesense/kubesense-js-core/time'
+import { ResourceType as ResourceTypeEnum } from '@kubesense/kubesense-browser-core'
+import type { RawRumResourceEvent } from '../../rawRumEvent.types'
+import { RumEventType } from '../../rawRumEvent.types'
+import type { LifeCycle } from '../lifeCycle'
+import { LifeCycleEventType } from '../lifeCycle'
+import type { EventTracker } from '../eventTracker'
+import { sanitizeIfLongDataUrl } from './resourceUtils'
+
+export interface ResourceOptions {
+  /**
+   * Resource type
+   *
+   * @default 'other'
+   */
+  type?: ResourceType
+
+  /**
+   * HTTP method
+   */
+  method?: string
+
+  /**
+   * Resource context
+   */
+  context?: Context
+
+  /**
+   * Resource key
+   */
+  resourceKey?: string
+}
+
+export interface ResourceStopOptions {
+  /**
+   * Resource type
+   */
+  type?: ResourceType
+
+  /**
+   * HTTP status code
+   */
+  statusCode?: number
+
+  /**
+   * Resource size in bytes
+   */
+  size?: number
+
+  /**
+   * Resource context
+   */
+  context?: Context
+
+  /**
+   * Resource key
+   */
+  resourceKey?: string
+}
+
+export interface ManualResourceData {
+  url: string
+  type?: ResourceType
+  method?: string
+  context?: Context
+}
+
+export function trackManualResources(lifeCycle: LifeCycle, resourceTracker: EventTracker<ManualResourceData>) {
+  function startManualResource(url: string, options: ResourceOptions = {}, startClocks = clocksNow()) {
+    const lookupKey = options.resourceKey ?? url
+
+    resourceTracker.start(lookupKey, startClocks, {
+      url,
+      ...options,
+    })
+  }
+
+  function stopManualResource(url: string, options: ResourceStopOptions = {}, stopClocks = clocksNow()) {
+    const lookupKey = options.resourceKey ?? url
+
+    const stopped = resourceTracker.stop(lookupKey, stopClocks, {
+      context: options.context,
+      type: options.type,
+    })
+
+    if (!stopped) {
+      return
+    }
+
+    const duration = elapsed(stopped.startClocks.relative, stopClocks.relative)
+
+    const rawRumEvent: RawRumResourceEvent = {
+      date: stopped.startClocks.timeStamp,
+      type: RumEventType.RESOURCE,
+      resource: {
+        id: stopped.id,
+        type: stopped.type || ResourceTypeEnum.OTHER,
+        url: sanitizeIfLongDataUrl(stopped.url),
+        duration: toServerDuration(duration),
+        method: stopped.method,
+        status_code: options.statusCode,
+        size: options.size,
+      },
+      _kubesense: {},
+      context: stopped.context,
+    }
+
+    lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, {
+      rawRumEvent,
+      startClocks: stopped.startClocks,
+      duration,
+      domainContext: { isManual: true },
+    })
+  }
+
+  return {
+    startResource: startManualResource,
+    stopResource: stopManualResource,
+  }
+}

package/src/domain/resource/webSocketCollection.ts

@@ -0,0 +1,281 @@
+import type { Observable, WebSocketContext } from '@kubesense/kubesense-browser-core'
+import { generateUUID, initWebSocketObservable, sanitize } from '@kubesense/kubesense-browser-core'
+import type { ClocksState, Duration, TimeStamp } from '@kubesense/kubesense-js-core/time'
+import { clocksNow, elapsed } from '@kubesense/kubesense-js-core/time'
+import { buildUrl } from '@kubesense/kubesense-js-core/util'
+import { VitalType } from '../../rawRumEvent.types'
+import type { ViewHistory } from '../contexts/viewHistory'
+import type { LifeCycle } from '../lifeCycle'
+import { LifeCycleEventType } from '../lifeCycle'
+import type { DurationVital } from '../vital/vitalCollection'
+
+export const WEBSOCKET_CONNECTING_VITAL_NAME = 'websocket-connecting'
+export const WEBSOCKET_CLOSED_VITAL_NAME = 'websocket-closed'
+
+export type WebSocketTrackingEndReason = 'close_event' | 'session_end'
+
+export interface WebSocketCompleteEvent {
+  webSocket: WebSocket
+  connectionId: string
+  url: string
+  protocol?: string
+  startClocks: ClocksState
+  endClocks: ClocksState
+  startViewId?: string
+  endViewId?: string
+  messagesIn: { count: number; size: number }
+  messagesOut: { count: number; size: number }
+  firstMessageInOffset?: Duration
+  firstMessageOutOffset?: Duration
+  lastMessageInAt?: TimeStamp
+  longestInboundSilence: Duration
+  bufferedAmountMax: number
+  inboundIdleDurationBeforeClose?: Duration
+  closeCode?: number
+  closeReason?: string
+  wasClean?: boolean
+  handshakeSucceeded: boolean
+  trackingEndReason: WebSocketTrackingEndReason
+  setupDuration: Duration
+}
+
+interface WebSocketConnection {
+  webSocket: WebSocket
+  connectionId: string
+  url: string
+  protocol?: string
+  startClocks: ClocksState
+  openClocks?: ClocksState
+  startViewId?: string
+  messagesIn: { count: number; size: number }
+  messagesOut: { count: number; size: number }
+  firstMessageInOffset?: Duration
+  firstMessageOutOffset?: Duration
+  lastMessageInAt?: TimeStamp
+  longestInboundSilence: Duration
+  bufferedAmountMax: number
+  setupDuration?: Duration
+}
+
+export interface WebSocketConnectionTracker {
+  flushOpenConnections: (reason: WebSocketTrackingEndReason, endClocks?: ClocksState) => void
+  stop: () => void
+}
+
+export function startWebSocketCollection(
+  lifeCycle: LifeCycle,
+  viewHistory: ViewHistory,
+  addDurationVital: (vital: DurationVital) => void
+) {
+  const tracker = trackWebSocket(lifeCycle, initWebSocketObservable(), viewHistory, addDurationVital)
+
+  // Session-boundary cleanup happens on SESSION_EXPIRED (fired before SESSION_RENEWED). Open
+  // connections are finalized once with trackingEndReason "session_end"; later events on the same
+  // WebSocket instance are ignored.
+  const sessionExpiredSubscription = lifeCycle.subscribe(LifeCycleEventType.SESSION_EXPIRED, ({ endClocks }) => {
+    tracker.flushOpenConnections('session_end', endClocks)
+  })
+
+  return {
+    stop: () => {
+      sessionExpiredSubscription.unsubscribe()
+      tracker.flushOpenConnections('session_end')
+      tracker.stop()
+    },
+  }
+}
+
+export function trackWebSocket(
+  lifeCycle: LifeCycle,
+  webSocketContextObservable: Observable<WebSocketContext>,
+  viewHistory: ViewHistory,
+  addDurationVital: (vital: DurationVital) => void
+): WebSocketConnectionTracker {
+  const webSocketRegistry = new Map<WebSocket, WebSocketConnection>()
+
+  function completeConnection(
+    webSocket: WebSocketConnection,
+    endInfo: { at: ClocksState; code?: number; reason?: string; wasClean?: boolean },
+    reason: WebSocketTrackingEndReason
+  ) {
+    const completedEvent = buildCompletedEvent(webSocket, endInfo, reason, viewHistory)
+    lifeCycle.notify(LifeCycleEventType.WEBSOCKET_COMPLETED, completedEvent)
+
+    addDurationVital({
+      id: generateUUID(),
+      name: WEBSOCKET_CLOSED_VITAL_NAME,
+      type: VitalType.DURATION,
+      startClocks: completedEvent.endClocks,
+      duration: 0 as Duration,
+      context: sanitize({
+        url: completedEvent.url,
+        connection_id: completedEvent.connectionId,
+      }),
+    })
+  }
+
+  const subscription = webSocketContextObservable.subscribe((context) => {
+    switch (context.state) {
+      case 'connecting': {
+        const connectionId = generateUUID()
+        const startViewId = viewHistory.findView(context.startClocks.relative)?.id
+        const url = sanitizeWebSocketUrl(context.url)
+        const webSocket: WebSocketConnection = {
+          webSocket: context.instance,
+          connectionId,
+          url,
+          startClocks: context.startClocks,
+          startViewId,
+          messagesIn: { count: 0, size: 0 },
+          messagesOut: { count: 0, size: 0 },
+          longestInboundSilence: 0 as Duration,
+          bufferedAmountMax: 0,
+        }
+        webSocketRegistry.set(context.instance, webSocket)
+
+        addDurationVital({
+          id: generateUUID(),
+          name: WEBSOCKET_CONNECTING_VITAL_NAME,
+          type: VitalType.DURATION,
+          startClocks: context.startClocks,
+          duration: 0 as Duration,
+          context: sanitize({
+            url,
+            connection_id: connectionId,
+          }),
+        })
+        return
+      }
+
+      case 'open': {
+        const webSocket = webSocketRegistry.get(context.instance)
+        if (!webSocket) {
+          return
+        }
+
+        webSocket.openClocks = context.openClocks
+        webSocket.protocol = context.protocol
+        webSocket.setupDuration = elapsed(webSocket.startClocks.timeStamp, context.openClocks.timeStamp)
+
+        return
+      }
+
+      case 'message-in': {
+        const webSocket = webSocketRegistry.get(context.instance)
+        if (!webSocket) {
+          return
+        }
+
+        webSocket.messagesIn.count += 1
+        webSocket.messagesIn.size += context.size
+        recordMessageTiming(webSocket, context.at, 'in')
+
+        return
+      }
+
+      case 'message-out': {
+        const webSocket = webSocketRegistry.get(context.instance)
+        if (!webSocket) {
+          return
+        }
+
+        if (context.bufferedAmountPreSend > webSocket.bufferedAmountMax) {
+          webSocket.bufferedAmountMax = context.bufferedAmountPreSend
+        }
+        webSocket.messagesOut.count += 1
+        webSocket.messagesOut.size += context.size
+        recordMessageTiming(webSocket, context.at, 'out')
+
+        return
+      }
+
+      case 'closed': {
+        const webSocket = webSocketRegistry.get(context.instance)
+        if (!webSocket) {
+          return
+        }
+
+        webSocketRegistry.delete(context.instance)
+
+        completeConnection(webSocket, context, 'close_event')
+
+        return
+      }
+    }
+  })
+
+  return {
+    flushOpenConnections: (reason, endClocks = clocksNow()) => {
+      webSocketRegistry.forEach((webSocket) => {
+        completeConnection(webSocket, { at: endClocks }, reason)
+      })
+
+      webSocketRegistry.clear()
+    },
+    stop: () => {
+      subscription.unsubscribe()
+      webSocketRegistry.clear()
+    },
+  }
+}
+
+function sanitizeWebSocketUrl(url: string) {
+  const sanitizedUrl = buildUrl(url)
+  sanitizedUrl.search = ''
+  return sanitizedUrl.href
+}
+
+function recordMessageTiming(webSocket: WebSocketConnection, at: ClocksState, direction: 'in' | 'out') {
+  if (webSocket.openClocks === undefined) {
+    // handshake failed
+    return
+  }
+
+  const offset = elapsed(webSocket.openClocks.timeStamp, at.timeStamp)
+  if (direction === 'in' && webSocket.firstMessageInOffset === undefined) {
+    webSocket.firstMessageInOffset = offset
+  } else if (direction === 'out' && webSocket.firstMessageOutOffset === undefined) {
+    webSocket.firstMessageOutOffset = offset
+  }
+
+  if (direction === 'in') {
+    if (webSocket.lastMessageInAt !== undefined) {
+      const gap = elapsed(webSocket.lastMessageInAt, at.timeStamp)
+      if (gap > webSocket.longestInboundSilence) {
+        webSocket.longestInboundSilence = gap
+      }
+    }
+    webSocket.lastMessageInAt = at.timeStamp
+  }
+}
+
+function buildCompletedEvent(
+  webSocket: WebSocketConnection,
+  endInfo: { at: ClocksState; code?: number; reason?: string; wasClean?: boolean },
+  trackingEndReason: WebSocketTrackingEndReason,
+  viewHistory: ViewHistory
+): WebSocketCompleteEvent {
+  const endClocks = endInfo.at
+  const endViewId =
+    trackingEndReason === 'session_end'
+      ? // On session_end, the websocket event can be received after the active view has been closed.
+        viewHistory.findView(endClocks.relative, { returnInactive: true })?.id
+      : viewHistory.findView(endClocks.relative)?.id
+  const inboundIdleDurationBeforeClose =
+    webSocket.lastMessageInAt !== undefined ? elapsed(webSocket.lastMessageInAt, endClocks.timeStamp) : undefined
+
+  const { openClocks, ...rest } = webSocket
+
+  return {
+    ...rest,
+    endClocks,
+    endViewId,
+    inboundIdleDurationBeforeClose,
+    trackingEndReason,
+    handshakeSucceeded: openClocks !== undefined,
+    setupDuration: webSocket.setupDuration ?? elapsed(webSocket.startClocks.timeStamp, endClocks.timeStamp),
+    closeCode: endInfo.code,
+    closeReason: endInfo.reason,
+    wasClean: endInfo.wasClean,
+  }
+}

package/src/domain/session/session.types.ts

@@ -0,0 +1,5 @@
+import type { ClocksState } from '@kubesense/kubesense-js-core/time'
+
+export interface SessionExpiredEvent {
+  endClocks: ClocksState
+}

package/src/domain/sessionReplayState.ts

@@ -0,0 +1,36 @@
+import type { SessionContext } from '@kubesense/kubesense-browser-core'
+import {
+  BridgeCapability,
+  bridgeSupports,
+  canUseEventBridge,
+  correctedChildSampleRate,
+  isSampled,
+} from '@kubesense/kubesense-browser-core'
+import type { RumConfiguration } from './configuration'
+
+export const enum SessionReplayState {
+  OFF,
+  SAMPLED,
+  FORCED,
+}
+
+export function computeSessionReplayState(
+  session: SessionContext,
+  configuration: RumConfiguration
+): SessionReplayState {
+  if (canUseEventBridge()) {
+    return bridgeSupports(BridgeCapability.RECORDS) ? SessionReplayState.SAMPLED : SessionReplayState.OFF
+  }
+  if (
+    isSampled(
+      session.id,
+      correctedChildSampleRate(configuration.sessionSampleRate, configuration.sessionReplaySampleRate)
+    )
+  ) {
+    return SessionReplayState.SAMPLED
+  }
+  if (session.isReplayForced) {
+    return SessionReplayState.FORCED
+  }
+  return SessionReplayState.OFF
+}

package/src/domain/startCustomerDataTelemetry.ts

@@ -1,6 +1,6 @@
 import type { Context, FlushEvent, Observable, Telemetry } from '@kubesense/kubesense-browser-core'
-import { ONE_SECOND, addTelemetryMetrics, setInterval, TelemetryMetrics } from '@kubesense/kubesense-browser-core'
-import type { RumConfiguration } from './configuration'
+import { ONE_SECOND } from '@kubesense/kubesense-js-core/time'
+import { addTelemetryMetrics, setInterval, TelemetryMetrics } from '@kubesense/kubesense-browser-core'
 import type { LifeCycle } from './lifeCycle'
 import { LifeCycleEventType } from './lifeCycle'
 

package/src/domain/tracing/getDocumentTraceId.ts

@@ -1,5 +1,6 @@
-import type { TimeStamp } from '@kubesense/kubesense-browser-core'
-import { dateNow, findCommaSeparatedValue, ONE_MINUTE } from '@kubesense/kubesense-browser-core'
+import { ONE_MINUTE, getTimeOrigin } from '@kubesense/kubesense-js-core/time'
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
+import { findCommaSeparatedValue } from '@kubesense/kubesense-browser-core'
 import { isCommentNode, isTextNode } from '../../browser/htmlDomUtils'
 
 interface DocumentTraceData {
@@ -12,7 +13,7 @@ export const INITIAL_DOCUMENT_OUTDATED_TRACE_ID_THRESHOLD = 2 * ONE_MINUTE
 export function getDocumentTraceId(document: Document): string | undefined {
   const data = getDocumentTraceDataFromMeta(document) || getDocumentTraceDataFromComment(document)
 
-  if (!data || data.traceTime <= dateNow() - INITIAL_DOCUMENT_OUTDATED_TRACE_ID_THRESHOLD) {
+  if (!data || data.traceTime <= getTimeOrigin() - INITIAL_DOCUMENT_OUTDATED_TRACE_ID_THRESHOLD) {
     return undefined
   }
 
@@ -22,7 +23,7 @@ export function getDocumentTraceId(document: Document): string | undefined {
 export function getDocumentTraceDataFromMeta(document: Document): DocumentTraceData | undefined {
   const traceIdMeta = document.querySelector<HTMLMetaElement>('meta[name=kubesense-trace-id]')
   const traceTimeMeta = document.querySelector<HTMLMetaElement>('meta[name=kubesense-trace-time]')
-  return createDocumentTraceData(traceIdMeta && traceIdMeta.content, traceTimeMeta && traceTimeMeta.content)
+  return createDocumentTraceData(traceIdMeta?.content, traceTimeMeta?.content)
 }
 
 export function getDocumentTraceDataFromComment(document: Document): DocumentTraceData | undefined {

package/src/domain/tracing/identifier.ts

@@ -21,47 +21,16 @@ export function createSpanIdentifier() {
 }
 
 function createIdentifier(bits: 63 | 64): BaseIdentifier {
+  // TODO: when Safari 15 becomes the minimum, simplify to:
+  //   crypto.getRandomValues(new BigUint64Array(1))[0]
   const buffer = crypto.getRandomValues(new Uint32Array(2))
+  // eslint-disable-next-line no-bitwise
+  let value = BigInt(buffer[0]) + (BigInt(buffer[1]) << 32n)
   if (bits === 63) {
     // eslint-disable-next-line no-bitwise
-    buffer[buffer.length - 1] >>>= 1 // force 63-bit
-  }
-
-  // The `.toString` function is intentionally similar to Number and BigInt `.toString` method.
-  //
-  // JavaScript numbers can represent integers up to 48 bits, this is why we need two of them to
-  // represent a 64 bits identifier. But BigInts don't have this limitation and can represent larger
-  // integer values.
-  //
-  // In the future, when we drop browsers without BigInts support, we could use BigInts directly
-  // represent identifiers by simply returning a BigInt from this function (as all we need is a
-  // value with a `.toString` method).
-  //
-  // Examples:
-  //   const buffer = getCrypto().getRandomValues(new Uint32Array(2))
-  //   return BigInt(buffer[0]) + BigInt(buffer[1]) << 32n
-  //
-  //   // Alternative with BigUint64Array (different Browser support than plain bigints!):
-  //   return crypto.getRandomValues(new BigUint64Array(1))[0]
-  //
-  // For now, let's keep using two plain numbers as having two different implementations (one for
-  // browsers with BigInt support and one for older browsers) don't bring much value.
-  return {
-    toString(radix = 10) {
-      let high = buffer[1]
-      let low = buffer[0]
-      let str = ''
-
-      do {
-        const mod = (high % radix) * 4294967296 + low
-        high = Math.floor(high / radix)
-        low = Math.floor(mod / radix)
-        str = (mod % radix).toString(radix) + str
-      } while (high || low)
-
-      return str
-    },
+    value &= 0x7fffffffffffffffn // force 63-bit by clearing the top bit
   }
+  return value
 }
 
 export function toPaddedHexadecimalString(id: BaseIdentifier) {