@cloudcare/browser-core 3.1.23 → 3.2.0

package/src/telemetry/telemetry.js

@@ -3,8 +3,10 @@ import {
   toStackTraceString,
   NO_ERROR_STACK_PRESENT_MESSAGE
 } from '../helper/errorTools'
+import { createBoundedBuffer } from '../helper/boundedBuffer'
 import { computeStackTrace } from '../tracekit'
 import { Observable } from '../helper/observable'
+import { getConnectivity } from '../helper/connectivity'
 import {
   displayIfDebugEnabled,
   startMonitorErrorCollection
@@ -31,35 +33,37 @@ export var TelemetryService = {
   RUM: 'browser-rum-sdk'
 }
 
-var telemetryConfiguration = {
-  maxEventsPerPage: 0,
-  sentEventCount: 0,
-  telemetryEnabled: false
+// eslint-disable-next-line local-rules/disallow-side-effects
+var preStartTelemetryBuffer = createBoundedBuffer()
+var onRawTelemetryEventCollected = function (event) {
+  preStartTelemetryBuffer.add(function () {
+    onRawTelemetryEventCollected(event)
+  })
 }
 
-var onRawTelemetryEventCollected
-
 export function startTelemetry(telemetryService, configuration) {
   let contextProvider
   var observable = new Observable()
-  telemetryConfiguration.telemetryEnabled =
+  const alreadySentEvents = new Set()
+  const telemetryEnabled =
     configuration.telemetryEnabled &&
     performDraw(configuration.telemetrySampleRate)
-
+  const runtimeEnvInfo = getRuntimeEnvInfo()
   onRawTelemetryEventCollected = function (rawEvent) {
-    if (telemetryConfiguration.telemetryEnabled) {
-      var event = toTelemetryEvent(telemetryService, rawEvent)
+    const stringifiedEvent = jsonStringify(rawEvent)
+    if (
+      telemetryEnabled &&
+      alreadySentEvents.size < configuration.maxTelemetryEventsPerPage &&
+      !alreadySentEvents.has(stringifiedEvent)
+    ) {
+      var event = toTelemetryEvent(telemetryService, rawEvent, runtimeEnvInfo)
       observable.notify(event)
+      alreadySentEvents.add(stringifiedEvent)
     }
   }
   startMonitorErrorCollection(addTelemetryError)
 
-  assign(telemetryConfiguration, {
-    maxEventsPerPage: configuration.maxTelemetryEventsPerPage,
-    sentEventCount: 0
-  })
-
-  function toTelemetryEvent(telemetryService, event) {
+  function toTelemetryEvent(telemetryService, event, runtimeEnvInfo) {
     return extend2Lev(
       {
         type: 'telemetry',
@@ -67,7 +71,10 @@ export function startTelemetry(telemetryService, configuration) {
         service: telemetryService,
         version: __BUILD_ENV__SDK_VERSION__,
         source: 'browser',
-        telemetry: event // https://github.com/microsoft/TypeScript/issues/48457
+        telemetry: extend2Lev(event, {
+          runtime_env: runtimeEnvInfo,
+          connectivity: getConnectivity()
+        })
       },
       contextProvider !== undefined ? contextProvider() : {}
     )
@@ -78,17 +85,39 @@ export function startTelemetry(telemetryService, configuration) {
       contextProvider = provider
     },
     observable: observable,
-    enabled: telemetryConfiguration.telemetryEnabled
+    enabled: telemetryEnabled
   }
 }
+function getRuntimeEnvInfo() {
+  return {
+    is_local_file: window.location.protocol === 'file:',
+    is_worker: 'WorkerGlobalScope' in self
+  }
+}
+export function startFakeTelemetry() {
+  const events = []
+
+  onRawTelemetryEventCollected = function (event) {
+    events.push(event)
+  }
 
+  return events
+}
+export function drainPreStartTelemetry() {
+  preStartTelemetryBuffer.drain()
+}
 export function resetTelemetry() {
-  onRawTelemetryEventCollected = undefined
+  preStartTelemetryBuffer = createBoundedBuffer()
+  onRawTelemetryEventCollected = function (event) {
+    preStartTelemetryBuffer.add(function () {
+      onRawTelemetryEventCollected(event)
+    })
+  }
 }
 
 export function addTelemetryDebug(message, context) {
-  displayIfDebugEnabled(ConsoleApiName.debug, message, context)
-  addTelemetry(
+  displayIfDebugEnabled(message, context)
+  onRawTelemetryEventCollected(
     assign(
       {
         type: TelemetryType.log,
@@ -101,7 +130,7 @@ export function addTelemetryDebug(message, context) {
 }
 
 export function addTelemetryError(e, context) {
-  addTelemetry(
+  onRawTelemetryEventCollected(
     assign(
       {
         type: TelemetryType.log,
@@ -114,23 +143,17 @@ export function addTelemetryError(e, context) {
 }
 
 export function addTelemetryConfiguration(configuration) {
-  if (telemetryConfiguration.telemetryEnabled) {
-    addTelemetry({
-      type: TelemetryType.configuration,
-      configuration: configuration
-    })
-  }
+  onRawTelemetryEventCollected({
+    type: TelemetryType.configuration,
+    configuration: configuration
+  })
 }
 
-function addTelemetry(event) {
-  if (
-    onRawTelemetryEventCollected &&
-    telemetryConfiguration.sentEventCount <
-      telemetryConfiguration.maxEventsPerPage
-  ) {
-    telemetryConfiguration.sentEventCount += 1
-    onRawTelemetryEventCollected(event)
-  }
+export function addTelemetryUsage(usage) {
+  onRawTelemetryEventCollected({
+    type: TelemetryType.usage,
+    usage: usage
+  })
 }
 
 export function formatError(e) {

package/src/telemetry/types.js

@@ -1,6 +1,7 @@
 export var TelemetryType = {
   log: 'log',
-  configuration: 'configuration'
+  configuration: 'configuration',
+  usage: 'usage'
 }
 
 export var TelemetryStatusType = {

package/src/transport/batch.js

@@ -22,7 +22,6 @@ import { isPageExitReason } from '../browser/pageExitObservable'
 import { jsonStringify } from '../helper/serialisation/jsonStringify'
 // https://en.wikipedia.org/wiki/UTF-8
 // eslint-disable-next-line no-control-regex
-var HAS_MULTI_BYTES_CHARACTERS = /[^\u0000-\u007F]/
 var CUSTOM_KEYS = 'custom_keys'
 export var processedMessageByDataMap = function (message) {
   if (!message || !message.type)
@@ -128,109 +127,175 @@ export var processedMessageByDataMap = function (message) {
     rowData: hasFileds ? rowData : undefined
   }
 }
-var batch = function (
-  request,
-  flushController,
-  messageBytesLimit,
-  sendContentTypeByJson
-) {
-  this.pushOnlyBuffer = []
-  this.upsertBuffer = {}
-  this.request = request
-  this.flushController = flushController
-  this.messageBytesLimit = messageBytesLimit
-  this.sendContentTypeByJson = sendContentTypeByJson
-  var _this = this
-  this.flushController.flushObservable.subscribe(function (event) {
-    _this.flush(event)
+
+export function createBatch(options) {
+  var encoder = options.encoder
+  var request = options.request
+  var messageBytesLimit = options.messageBytesLimit
+  var sendContentTypeByJson = options.sendContentTypeByJson
+  var flushController = options.flushController
+  var upsertBuffer = {}
+  var flushSubscription = flushController.flushObservable.subscribe(function (
+    event
+  ) {
+    flush(event)
   })
-}
-batch.prototype.add = function (message) {
-  this.addOrUpdate(message)
-}
-batch.prototype.upsert = function (message, key) {
-  this.addOrUpdate(message, key)
-}
-batch.prototype.flush = function (event) {
-  var messages = this.pushOnlyBuffer.concat(values(this.upsertBuffer))
-  this.pushOnlyBuffer = []
-  this.upsertBuffer = {}
-  if (messages.length > 0) {
-    var payloadData = ''
-    if (this.sendContentTypeByJson) {
-      payloadData = '[' + messages.join(',') + ']'
+  function getMessageText(messages, isEmpty = false) {
+    if (sendContentTypeByJson) {
+      if (isEmpty) {
+        return '[' + messages.join(',')
+      } else {
+        return ',' + messages.join(',')
+      }
     } else {
-      payloadData = messages.join('\n')
-    }
-    var payload = {
-      data: payloadData,
-      bytesCount: event.bytesCount,
-      flushReason: event.reason
+      if (isEmpty) {
+        return messages.join('\n')
+      } else {
+        return '\n' + messages.join('\n')
+      }
     }
-    if (isPageExitReason(event.reason)) {
-      this.request.sendOnExit(payload)
+  }
+  function push(serializedMessage, estimatedMessageBytesCount, key) {
+    flushController.notifyBeforeAddMessage(estimatedMessageBytesCount)
+
+    if (key !== undefined) {
+      upsertBuffer[key] = serializedMessage
+      flushController.notifyAfterAddMessage()
     } else {
-      this.request.send(payload)
+      encoder.write(
+        getMessageText([serializedMessage], encoder.isEmpty()),
+        function (realMessageBytesCount) {
+          flushController.notifyAfterAddMessage(
+            realMessageBytesCount - estimatedMessageBytesCount
+          )
+        }
+      )
     }
   }
-}
 
-batch.prototype.addOrUpdate = function (message, key) {
-  var _process = this.process(message)
-  var processedMessage = _process.processedMessage
-  var messageBytesCount = _process.messageBytesCount
-  if (messageBytesCount >= this.messageBytesLimit) {
-    display.warn(
-      'Discarded a message whose size was bigger than the maximum allowed size ' +
-        this.messageBytesLimit +
-        'KB.'
-    )
-    return
+  function hasMessageFor(key) {
+    return key !== undefined && upsertBuffer[key] !== undefined
   }
-  if (this.hasMessageFor(key)) {
-    this.remove(key)
+
+  function remove(key) {
+    var removedMessage = upsertBuffer[key]
+    delete upsertBuffer[key]
+    var messageBytesCount = encoder.estimateEncodedBytesCount(removedMessage)
+    flushController.notifyAfterRemoveMessage(messageBytesCount)
   }
-  this.push(processedMessage, messageBytesCount, key)
-}
-batch.prototype.process = function (message) {
-  var processedMessage = ''
-  if (this.sendContentTypeByJson) {
-    processedMessage = jsonStringify(processedMessageByDataMap(message).rowData)
-  } else {
-    processedMessage = processedMessageByDataMap(message).rowStr
+  function process(message) {
+    var processedMessage = ''
+    if (sendContentTypeByJson) {
+      processedMessage = jsonStringify(
+        processedMessageByDataMap(message).rowData
+      )
+    } else {
+      processedMessage = processedMessageByDataMap(message).rowStr
+    }
+    return processedMessage
+  }
+  function addOrUpdate(message, key) {
+    const serializedMessage = process(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.`
+      )
+      return
+    }
+
+    if (hasMessageFor(key)) {
+      remove(key)
+    }
+
+    push(serializedMessage, estimatedMessageBytesCount, key)
+  }
+
+  function flush(event) {
+    var upsertMessages = values(upsertBuffer).join(
+      sendContentTypeByJson ? ',' : '\n'
+    )
+    upsertBuffer = {}
+
+    var isPageExit = isPageExitReason(event.reason)
+    var send = isPageExit ? request.sendOnExit : request.send
+
+    if (
+      isPageExit &&
+      // 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
+    ) {
+      // 咱不支持json 模式
+      var encoderResult = encoder.finishSync()
+
+      // Send encoded messages
+      if (encoderResult.outputBytesCount) {
+        send(formatPayloadFromEncoder(encoderResult, sendContentTypeByJson))
+      }
+
+      // Send messages that are not yet encoded at this point
+      var pendingMessages = [encoderResult.pendingData, upsertMessages]
+        .filter(Boolean)
+        .join('\n')
+
+      if (pendingMessages) {
+        send({
+          data: pendingMessages,
+          bytesCount: computeBytesCount(pendingMessages)
+        })
+      }
+    } else {
+      if (upsertMessages) {
+        var text = getMessageText([upsertMessages], encoder.isEmpty())
+        if (sendContentTypeByJson) {
+          text += ']'
+        }
+        encoder.write(text)
+      } else {
+        if (sendContentTypeByJson) {
+          encoder.write(']')
+        }
+      }
+      encoder.finish(function (encoderResult) {
+        send(formatPayloadFromEncoder(encoderResult))
+      })
+    }
   }
-  var messageBytesCount = computeBytesCount(processedMessage)
+
   return {
-    processedMessage: processedMessage,
-    messageBytesCount: messageBytesCount
+    flushController: flushController,
+    add: addOrUpdate,
+    upsert: addOrUpdate,
+    stop: flushSubscription.unsubscribe
   }
 }
 
-batch.prototype.push = function (processedMessage, messageBytesCount, key) {
-  var separatorBytesCount = this.flushController.getMessagesCount() > 0 ? 1 : 0
-  this.flushController.notifyBeforeAddMessage(
-    messageBytesCount + separatorBytesCount
-  )
-  if (key !== undefined) {
-    this.upsertBuffer[key] = processedMessage
+function formatPayloadFromEncoder(encoderResult, sendContentTypeByJson) {
+  var data
+  if (typeof encoderResult.output === 'string') {
+    data = encoderResult.output
   } else {
-    this.pushOnlyBuffer.push(processedMessage)
+    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'
+    })
   }
-  this.flushController.notifyAfterAddMessage()
-}
-
-batch.prototype.remove = function (key) {
-  var removedMessage = this.upsertBuffer[key]
-  delete this.upsertBuffer[key]
-  var messageBytesCount = computeBytesCount(removedMessage)
-  // If there are other messages, a '\n' will be added at serialization
-  var separatorBytesCount = this.flushController.getMessagesCount() > 1 ? 1 : 0
-  this.flushController.notifyAfterRemoveMessage(
-    messageBytesCount + separatorBytesCount
-  )
-}
 
-batch.prototype.hasMessageFor = function (key) {
-  return key !== undefined && this.upsertBuffer[key] !== undefined
+  return {
+    data: data,
+    type: sendContentTypeByJson ? 'application/json;UTF-8' : undefined,
+    bytesCount: encoderResult.outputBytesCount,
+    encoding: encoderResult.encoding
+  }
 }
-export var Batch = batch

package/src/transport/flushController.js

@@ -15,14 +15,18 @@ export function createFlushController({
   pageExitObservable,
   sessionExpireObservable
 }) {
-  var flushObservable = new Observable()
-
   pageExitObservable.subscribe(function (event) {
     return flush(event.reason)
   })
   sessionExpireObservable.subscribe(function () {
     return flush('session_expire')
   })
+  var flushObservable = new Observable(function () {
+    return function () {
+      pageExitSubscription.unsubscribe()
+      sessionExpireSubscription.unsubscribe()
+    }
+  })
 
   var currentBytesCount = 0
   var currentMessagesCount = 0
@@ -72,15 +76,15 @@ export function createFlushController({
      * 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: function (messageBytesCount) {
-      if (currentBytesCount + messageBytesCount >= bytesLimit) {
+    notifyBeforeAddMessage: function (estimatedMessageBytesCount) {
+      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 += messageBytesCount
+      currentBytesCount += estimatedMessageBytesCount
       scheduleDurationLimitTimeout()
     },
 
@@ -90,7 +94,12 @@ export function createFlushController({
      * 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: function () {
+    notifyAfterAddMessage: function (messageBytesCountDiff) {
+      if (messageBytesCountDiff === undefined) {
+        messageBytesCountDiff = 0
+      }
+      currentBytesCount += messageBytesCountDiff
+
       if (currentMessagesCount >= messagesLimit) {
         flush('messages_limit')
       } else if (currentBytesCount >= bytesLimit) {
@@ -103,6 +112,10 @@ export function createFlushController({
      *
      * 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: function (messageBytesCount) {
       currentBytesCount -= messageBytesCount

package/src/transport/httpRequest.js

@@ -1,6 +1,7 @@
 import { newRetryState, sendWithRetryStrategy } from './sendWithRetryStrategy'
 import { addEventListener } from '../browser/addEventListener'
 import { monitor } from '../helper/monitor'
+import { addTelemetryError } from '../telemetry/telemetry'
 /**
  * Use POST request without content type to:
  * - avoid CORS preflight requests
@@ -9,28 +10,18 @@ import { monitor } from '../helper/monitor'
  * multiple elements are sent separated by \n in order
  * to be parsed correctly without content type header
  */
-function addBatchPrecision(url) {
+function addBatchPrecision(url, encoding) {
   if (!url) return url
-  return url + (url.indexOf('?') === -1 ? '?' : '&') + 'precision=ms'
+  url = url + (url.indexOf('?') === -1 ? '?' : '&') + 'precision=ms'
+  if (encoding) {
+    url = url + '&encoding=' + encoding
+  }
+  return url
 }
-export function createHttpRequest(
-  endpointUrl,
-  bytesLimit,
-  sendContentTypeByJson,
-  reportError
-) {
-  var contentType = sendContentTypeByJson
-    ? 'application/json; charset=UTF-8'
-    : undefined
+export function createHttpRequest(endpointUrl, bytesLimit, reportError) {
   var retryState = newRetryState()
   var sendStrategyForRetry = function (payload, onResponse) {
-    return fetchKeepAliveStrategy(
-      endpointUrl,
-      bytesLimit,
-      contentType,
-      payload,
-      onResponse
-    )
+    return fetchKeepAliveStrategy(endpointUrl, bytesLimit, payload, onResponse)
   }
 
   return {
@@ -48,22 +39,22 @@ export function createHttpRequest(
      * keep using sendBeaconStrategy on exit
      */
     sendOnExit: function (payload) {
-      sendBeaconStrategy(endpointUrl, bytesLimit, contentType, payload)
+      sendBeaconStrategy(endpointUrl, bytesLimit, payload)
     }
   }
 }
 
-function sendBeaconStrategy(endpointUrl, bytesLimit, contentType, payload) {
+function sendBeaconStrategy(endpointUrl, bytesLimit, payload) {
   var data = payload.data
   var bytesCount = payload.bytesCount
-  var url = addBatchPrecision(endpointUrl)
+  var url = addBatchPrecision(endpointUrl, payload.encoding)
   var canUseBeacon = !!navigator.sendBeacon && bytesCount < bytesLimit
   if (canUseBeacon) {
     try {
       var beaconData
-      if (contentType) {
+      if (payload.type) {
         beaconData = new Blob([data], {
-          type: contentType
+          type: payload.type
         })
       } else {
         beaconData = data
@@ -75,22 +66,28 @@ function sendBeaconStrategy(endpointUrl, bytesLimit, contentType, payload) {
         return
       }
     } catch (e) {
-      // reportBeaconError(e)
+      reportBeaconError(e)
     }
   }
-  sendXHR(url, contentType, data)
+  sendXHR(url, payload)
 }
+var hasReportedBeaconError = false
 
+function reportBeaconError(e) {
+  if (!hasReportedBeaconError) {
+    hasReportedBeaconError = true
+    addTelemetryError(e)
+  }
+}
 export function fetchKeepAliveStrategy(
   endpointUrl,
   bytesLimit,
-  contentType,
   payload,
   onResponse
 ) {
   var data = payload.data
   var bytesCount = payload.bytesCount
-  var url = addBatchPrecision(endpointUrl)
+  var url = addBatchPrecision(endpointUrl, payload.encoding)
   var canUseKeepAlive = isKeepAliveSupported() && bytesCount < bytesLimit
   if (canUseKeepAlive) {
     var fetchOption = {
@@ -99,9 +96,9 @@ export function fetchKeepAliveStrategy(
       keepalive: true,
       mode: 'cors'
     }
-    if (contentType) {
+    if (payload.type) {
       fetchOption.headers = {
-        'Content-Type': contentType
+        'Content-Type': payload.type
       }
     }
     fetch(url, fetchOption).then(
@@ -112,11 +109,11 @@ export function fetchKeepAliveStrategy(
       }),
       monitor(function () {
         // failed to queue the request
-        sendXHR(url, contentType, data, onResponse)
+        sendXHR(url, payload, onResponse)
       })
     )
   } else {
-    sendXHR(url, contentType, data, onResponse)
+    sendXHR(url, payload, onResponse)
   }
 }
 
@@ -129,12 +126,14 @@ function isKeepAliveSupported() {
   }
 }
 
-function sendXHR(url, contentType, data, onResponse) {
+function sendXHR(url, payload, onResponse) {
+  const data = payload.data
   const request = new XMLHttpRequest()
   request.open('POST', url, true)
-  if (contentType) {
-    //application/json; charset=UTF-8
-    request.setRequestHeader('Content-Type', contentType)
+  if (data instanceof Blob) {
+    request.setRequestHeader('Content-Type', data.type)
+  } else if (payload.type) {
+    request.setRequestHeader('Content-Type', payload.type)
   }
 
   addEventListener(

package/src/transport/index.js

@@ -1,5 +1,5 @@
 export { createHttpRequest } from './httpRequest'
-export { Batch, processedMessageByDataMap } from './batch'
+export { createBatch, processedMessageByDataMap } from './batch'
 export { startBatchWithReplica } from './startBatchWithReplica'
 export { createFlushController } from './flushController'
 export { getEventBridge, canUseEventBridge } from './eventBridge'