@cloudcare/browser-core 1.2.9 → 2.0.0

package/src/browser/fetchObservable.js

@@ -13,7 +13,7 @@ export function initFetchObservable() {
 }
 
 function createFetchObservable() {
-  var observable = new Observable(function() {
+  var observable = new Observable(function () {
     if (!window.fetch) {
       return
     }
@@ -21,19 +21,23 @@ function createFetchObservable() {
     var fetchMethod = instrumentMethod(
       window,
       'fetch',
-      function(originalFetch) {
+      function (originalFetch) {
         return function (input, init) {
           var responsePromise
           var context = beforeSend(observable, input, init)
           if (context) {
-            responsePromise = originalFetch.call(this, context.input, context.init)
+            responsePromise = originalFetch.call(
+              this,
+              context.input,
+              context.init
+            )
             afterSend(observable, responsePromise, context)
           } else {
             responsePromise = originalFetch.call(this, input, init)
           }
           return responsePromise
         }
-      }   
+      }
     )
     return fetchMethod.stop
   })
@@ -42,7 +46,10 @@ function createFetchObservable() {
 }
 
 function beforeSend(observable, input, init) {
-  var method = (init && init.method) || (typeof input === 'object' && input.method) || 'GET'
+  var method =
+    (init && init.method) ||
+    (typeof input === 'object' && input.method) ||
+    'GET'
   var url = normalizeUrl((typeof input === 'object' && input.url) || input)
   var startClocks = clocksNow()
 
@@ -52,7 +59,7 @@ function beforeSend(observable, input, init) {
     input: input,
     method: method,
     startClocks: startClocks,
-    url: url,
+    url: url
   }
 
   observable.notify(context)
@@ -60,27 +67,24 @@ function beforeSend(observable, input, init) {
   return context
 }
 
-function afterSend(
-  observable,
-  responsePromise,
-  startContext
-) {
-  var reportFetch = function(response) {
+function afterSend(observable, responsePromise, startContext) {
+  var reportFetch = function (response) {
     var context = startContext
-    context.state = 'complete'
-    context.duration = elapsed(context.startClocks.timeStamp, timeStampNow())
+    context.state = 'resolve'
+    // context.duration = elapsed(context.startClocks.timeStamp, timeStampNow())
     if ('stack' in response || response instanceof Error) {
       context.status = 0
-      context.isAborted = response instanceof DOMException && response.code === DOMException.ABORT_ERR
+      context.isAborted =
+        response instanceof DOMException &&
+        response.code === DOMException.ABORT_ERR
       context.error = response
-      observable.notify(context)
     } else if ('status' in response) {
       context.response = response
       context.responseType = response.type
       context.status = response.status
       context.isAborted = false
-      observable.notify(context)
     }
+    observable.notify(context)
   }
   responsePromise.then(reportFetch, reportFetch)
 }

package/src/browser/htmlDomUtils.js

@@ -0,0 +1,35 @@
+export function isTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE
+}
+
+export function isCommentNode(node) {
+  return node.nodeType === Node.COMMENT_NODE
+}
+
+export function isElementNode(node) {
+  return node.nodeType === Node.ELEMENT_NODE
+}
+
+export function isNodeShadowHost(node) {
+  return isElementNode(node) && Boolean(node.shadowRoot)
+}
+
+export function isNodeShadowRoot(node) {
+  var shadowRoot = node
+  return (
+    !!shadowRoot.host &&
+    shadowRoot.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
+    isElementNode(shadowRoot.host)
+  )
+}
+
+export function getChildNodes(node) {
+  return isNodeShadowHost(node) ? node.shadowRoot.childNodes : node.childNodes
+}
+
+/**
+ * Return `host` in case if the current node is a shadow root otherwise will return the `parentNode`
+ */
+export function getParentNode(node) {
+  return isNodeShadowRoot(node) ? node.host : node.parentNode
+}

package/src/browser/pageExitObservable.js

@@ -0,0 +1,70 @@
+import { Observable } from '../helper/observable'
+import {
+  addEventListener,
+  addEventListeners,
+  includes,
+  values
+} from '../helper/tools'
+import { DOM_EVENT } from '../helper/enums'
+export var PageExitReason = {
+  HIDDEN: 'visibility_hidden',
+  UNLOADING: 'before_unload',
+  PAGEHIDE: 'page_hide',
+  FROZEN: 'page_frozen'
+}
+
+export function createPageExitObservable() {
+  var observable = new Observable(function () {
+    /**
+     * Only event that guarantee to fire on mobile devices when the page transitions to background state
+     * (e.g. when user switches to a different application, goes to homescreen, etc), or is being unloaded.
+     */
+    var visibilityChangeListener = addEventListeners(
+      document,
+      [DOM_EVENT.VISIBILITY_CHANGE, DOM_EVENT.FREEZE, DOM_EVENT.PAGE_HIDE],
+      function (event) {
+        if (
+          event.type === DOM_EVENT.VISIBILITY_CHANGE &&
+          document.visibilityState === 'hidden'
+        ) {
+          /**
+           * Only event that guarantee to fire on mobile devices when the page transitions to background state
+           * (e.g. when user switches to a different application, goes to homescreen, etc), or is being unloaded.
+           */
+          observable.notify({ reason: PageExitReason.HIDDEN })
+        } else if (event.type === DOM_EVENT.FREEZE) {
+          /**
+           * After transitioning in background a tab can be freezed to preserve resources. (cf: https://developer.chrome.com/blog/page-lifecycle-api)
+           * Allow to collect events happening between hidden and frozen state.
+           */
+          observable.notify({ reason: PageExitReason.FROZEN })
+        }
+      },
+      { capture: true }
+    )
+
+    /**
+     * Safari does not support yet to send a request during:
+     * - a visibility change during doc unload (cf: https://bugs.webkit.org/show_bug.cgi?id=194897)
+     * - a page hide transition (cf: https://bugs.webkit.org/show_bug.cgi?id=188329)
+     */
+    var beforeUnloadListener = addEventListener(
+      window,
+      DOM_EVENT.BEFORE_UNLOAD,
+      function () {
+        observable.notify({ reason: PageExitReason.UNLOADING })
+      }
+    )
+
+    return function () {
+      visibilityChangeListener.stop()
+      beforeUnloadListener.stop()
+    }
+  })
+
+  return observable
+}
+
+export function isPageExitReason(reason) {
+  return includes(values(PageExitReason), reason)
+}

package/src/configuration/configuration.js

@@ -9,6 +9,12 @@ import {
   isNullUndefinedDefaultValue
 } from '../helper/tools'
 import { computeTransportConfiguration } from './transportConfiguration'
+
+export var DefaultPrivacyLevel = {
+  ALLOW: 'allow',
+  MASK: 'mask',
+  MASK_USER_INPUT: 'mask-user-input'
+}
 export function validateAndBuildConfiguration(initConfiguration) {
   if (
     initConfiguration.sampleRate !== undefined &&

package/src/configuration/transportConfiguration.js

@@ -12,13 +12,31 @@ function getLogsEndPoint(url) {
     return trim(url) + 'v1/write/logging'
   return trim(url) + '/v1/write/logging'
 }
+function getSessionReplayEndPoint(url) {
+  //   return 'http://localhost:3002/write_data'
+  if (url.lastIndexOf('/') === url.length - 1)
+    return trim(url) + 'v1/write/rum/replay'
+  return trim(url) + '/v1/write/rum/replay'
+}
 export function computeTransportConfiguration(initConfiguration) {
-  var isIntakeUrl = function(url) { return false }
-  if ('isIntakeUrl' in initConfiguration && isFunction(initConfiguration.isIntakeUrl) && isBoolean(initConfiguration.isIntakeUrl())) {
+  var isIntakeUrl = function (url) {
+    return false
+  }
+  if (
+    'isIntakeUrl' in initConfiguration &&
+    isFunction(initConfiguration.isIntakeUrl) &&
+    isBoolean(initConfiguration.isIntakeUrl())
+  ) {
     isIntakeUrl = initConfiguration.isIntakeUrl
   }
-  var isServerError = function(request) { return false }
-  if ('isServerError' in initConfiguration && isFunction(initConfiguration.isServerError) && isBoolean(initConfiguration.isServerError())) {
+  var isServerError = function (request) {
+    return false
+  }
+  if (
+    'isServerError' in initConfiguration &&
+    isFunction(initConfiguration.isServerError) &&
+    isBoolean(initConfiguration.isServerError())
+  ) {
     isServerError = initConfiguration.isServerError
   }
   return {
@@ -26,10 +44,12 @@ export function computeTransportConfiguration(initConfiguration) {
       initConfiguration.datakitUrl || initConfiguration.datakitOrigin
     ),
     logsEndpoint: getLogsEndPoint(initConfiguration.datakitOrigin),
+    sessionReplayEndPoint: getSessionReplayEndPoint(
+      initConfiguration.datakitOrigin
+    ),
     isIntakeUrl: isIntakeUrl,
     isServerError: isServerError
   }
-  
 }
 export function isIntakeRequest(url, configuration) {
   // return haveSameOrigin(url, configuration.datakitUrl)
@@ -38,5 +58,9 @@ export function isIntakeRequest(url, configuration) {
     notTakeRequest.push(configuration.logsEndpoint)
   }
   // datakit 地址，log 地址，以及客户自定义过滤方法定义url
-  return some(notTakeRequest, function(takeUrl) { return url.indexOf(takeUrl) === 0 }) || configuration.isIntakeUrl(url)
+  return (
+    some(notTakeRequest, function (takeUrl) {
+      return url.indexOf(takeUrl) === 0
+    }) || configuration.isIntakeUrl(url)
+  )
 }

package/src/dataMap.js

@@ -1,6 +1,5 @@
 import { RumEventType } from './helper/enums'
 export var commonTags = {
-  action_id: 'action.id',
   sdk_name: '_dd.sdk_name',
   sdk_version: '_dd.sdk_version',
   app_id: 'application.id',
@@ -13,6 +12,7 @@ export var commonTags = {
   session_id: 'session.id',
   session_type: 'session.type',
   session_sampling: 'session.is_sampling',
+  session_has_replay: 'session.has_replay',
   is_signin: 'user.is_signin',
   os: 'device.os',
   os_version: 'device.os_version',
@@ -32,6 +32,10 @@ export var commonTags = {
   view_path_group: 'view.path_group',
   view_url_query: 'view.url_query'
 }
+export var commonFields = {
+  action_id: 'action.id',
+  view_in_foreground: 'view.in_foreground'
+}
 // 需要用双引号将字符串类型的field value括起来， 这里有数组标示[string, path]
 export var dataMap = {
   view: {
@@ -42,6 +46,7 @@ export var dataMap = {
       is_active: 'view.is_active'
     },
     fields: {
+      session_replay_stats: '_dd.replay_stats',
       view_error_count: 'view.error.count',
       view_resource_count: 'view.resource.count',
       view_long_task_count: 'view.long_task.count',
@@ -62,7 +67,9 @@ export var dataMap = {
       time_to_interactive: 'view.tti',
       dom: 'view.dom',
       dom_ready: 'view.dom_ready',
-      time_spent: 'view.time_spent'
+      time_spent: 'view.time_spent',
+      in_foreground_periods: 'view.in_foreground_periods',
+      frustration_count: 'view.frustration.count'
     }
   },
   resource: {

package/src/helper/contextHistory.js

@@ -1,4 +1,4 @@
-import { relativeNow, ONE_MINUTE, filter, map, each } from './tools'
+import { relativeNow, ONE_MINUTE, filter, map } from './tools'
 
 var END_OF_TIMES = Infinity
 

package/src/helper/deviceInfo.js

@@ -247,9 +247,45 @@ var MethodLibrary = {
   },
   // 获取网络状态
   getNetwork: function () {
-    var netWork =
-      navigator && navigator.connection && navigator.connection.effectiveType
-    return netWork
+    var connection =
+      window.navigator.connection ||
+      window.navigator.mozConnection ||
+      window.navigator.webkitConnection
+    var result = 'unknown'
+    var type = connection ? connection.type || connection.effectiveType : null
+    if (type && typeof type === 'string') {
+      switch (type) {
+        // possible type values
+        case 'bluetooth':
+        case 'cellular':
+          result = 'cellular'
+          break
+        case 'none':
+          result = 'none'
+          break
+        case 'ethernet':
+        case 'wifi':
+        case 'wimax':
+          result = 'wifi'
+          break
+        case 'other':
+        case 'unknown':
+          result = 'unknown'
+          break
+        // possible effectiveType values
+        case 'slow-2g':
+        case '2g':
+        case '3g':
+          result = 'cellular'
+          break
+        case '4g':
+          result = 'wifi'
+          break
+        default:
+          break
+      }
+    }
+    return result
   },
   // 获取当前语言
   getLanguage: function () {

package/src/helper/enums.js

@@ -1,34 +1,37 @@
 export var DOM_EVENT = {
   BEFORE_UNLOAD: 'beforeunload',
-  CLICK : 'click',
-  DBL_CLICK : 'dblclick',
-  KEY_DOWN : 'keydown',
-  LOAD : 'load',
-  POP_STATE : 'popstate',
-  SCROLL : 'scroll',
-  TOUCH_START : 'touchstart',
-  TOUCH_END : 'touchend',
-  TOUCH_MOVE : 'touchmove',
-  VISIBILITY_CHANGE : 'visibilitychange',
-  DOM_CONTENT_LOADED : 'DOMContentLoaded',
-  POINTER_DOWN : 'pointerdown',
-  POINTER_UP : 'pointerup',
-  POINTER_CANCEL : 'pointercancel',
-  HASH_CHANGE : 'hashchange',
-  PAGE_HIDE : 'pagehide',
-  MOUSE_DOWN : 'mousedown',
-  MOUSE_UP : 'mouseup',
-  MOUSE_MOVE : 'mousemove',
-  FOCUS : 'focus',
-  BLUR : 'blur',
-  CONTEXT_MENU : 'contextmenu',
-  RESIZE : 'resize',
-  CHANGE : 'change',
-  INPUT : 'input',
-  PLAY : 'play',
-  PAUSE : 'pause',
-  SECURITY_POLICY_VIOLATION : 'securitypolicyviolation',
-  SELECTION_CHANGE : 'selectionchange',
+  CLICK: 'click',
+  DBL_CLICK: 'dblclick',
+  KEY_DOWN: 'keydown',
+  LOAD: 'load',
+  POP_STATE: 'popstate',
+  SCROLL: 'scroll',
+  TOUCH_START: 'touchstart',
+  TOUCH_END: 'touchend',
+  TOUCH_MOVE: 'touchmove',
+  VISIBILITY_CHANGE: 'visibilitychange',
+  PAGE_SHOW: 'pageshow',
+  FREEZE: 'freeze',
+  RESUME: 'resume',
+  DOM_CONTENT_LOADED: 'DOMContentLoaded',
+  POINTER_DOWN: 'pointerdown',
+  POINTER_UP: 'pointerup',
+  POINTER_CANCEL: 'pointercancel',
+  HASH_CHANGE: 'hashchange',
+  PAGE_HIDE: 'pagehide',
+  MOUSE_DOWN: 'mousedown',
+  MOUSE_UP: 'mouseup',
+  MOUSE_MOVE: 'mousemove',
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  CONTEXT_MENU: 'contextmenu',
+  RESIZE: 'resize',
+  CHANGE: 'change',
+  INPUT: 'input',
+  PLAY: 'play',
+  PAUSE: 'pause',
+  SECURITY_POLICY_VIOLATION: 'securitypolicyviolation',
+  SELECTION_CHANGE: 'selectionchange'
 }
 export var ResourceType = {
   DOCUMENT: 'document',
@@ -48,9 +51,9 @@ export var ActionType = {
   CUSTOM: 'custom'
 }
 export var FrustrationType = {
-  RAGE_CLICK :'rage_click',
-  ERROR_CLICK :'error_click',
-  DEAD_CLICK :'dead_click',
+  RAGE_CLICK: 'rage_click',
+  ERROR_CLICK: 'error_click',
+  DEAD_CLICK: 'dead_click'
 }
 export var RumEventType = {
   ACTION: 'action',
@@ -61,9 +64,9 @@ export var RumEventType = {
   LOGGER: 'logger'
 }
 
-export var ViewLoadingType  = {
+export var ViewLoadingType = {
   INITIAL_LOAD: 'initial_load',
-  ROUTE_CHANGE: 'route_change',
+  ROUTE_CHANGE: 'route_change'
 }
 export var RequestType = {
   FETCH: ResourceType.FETCH,
@@ -76,9 +79,9 @@ export var TraceType = {
   ZIPKIN_SINGLE_HEADER: 'zipkin_single_header',
   W3C_TRACEPARENT: 'w3c_traceparent',
   SKYWALKING_V3: 'skywalking_v3',
-  JAEGER: 'jaeger',
+  JAEGER: 'jaeger'
 }
 export var ErrorHandling = {
   HANDLED: 'handled',
-  UNHANDLED: 'unhandled',
-}
+  UNHANDLED: 'unhandled'
+}

package/src/helper/getZoneJsOriginalValue.js

@@ -0,0 +1,27 @@
+/**
+ * Gets the original value for a DOM API that was potentially patched by Zone.js.
+ *
+ * Zone.js[1] is a library that patches a bunch of JS and DOM APIs. It usually stores the original
+ * value of the patched functions/constructors/methods in a hidden property prefixed by
+ * __zone_symbol__.
+ *
+ * In multiple occasions, we observed that Zone.js is the culprit of important issues leading to
+ * browser resource exhaustion (memory leak, high CPU usage). This method is used as a workaround to
+ * use the original DOM API instead of the one patched by Zone.js.
+ *
+ * [1]: https://github.com/angular/angular/tree/main/packages/zone.js
+ */
+export function getZoneJsOriginalValue(target, name) {
+  var browserWindow = window
+  var original
+  if (
+    browserWindow.Zone &&
+    typeof browserWindow.Zone.__symbol__ === 'function'
+  ) {
+    original = target[browserWindow.Zone.__symbol__(name)]
+  }
+  if (!original) {
+    original = target[name]
+  }
+  return original
+}

package/src/helper/instrumentMethod.js

@@ -1,10 +1,6 @@
 import { noop } from './tools'
-
-export function instrumentMethod(
-  object,
-  method,
-  instrumentationFactory
-) {
+import { getZoneJsOriginalValue } from './getZoneJsOriginalValue'
+export function instrumentMethod(object, method, instrumentationFactory) {
   var original = object[method]
 
   var instrumentation = instrumentationFactory(original)
@@ -18,62 +14,52 @@ export function instrumentMethod(
   }
   object[method] = instrumentationWrapper
   return {
-    stop: function() {
+    stop: function () {
       if (object[method] === instrumentationWrapper) {
         object[method] = original
       } else {
         instrumentation = original
       }
-    },
+    }
   }
 }
 
-export function instrumentMethodAndCallOriginal(
-  object,
-  method,
-  aliasOption
-) {
-  return instrumentMethod(
-    object,
-    method,
-    function(original) {
-      return function () {
-        var result
-        if (aliasOption && aliasOption.before) {
-          aliasOption.before.apply(this, arguments)
-        }
-        if (typeof original === 'function') {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          result = original.apply(this, arguments)
-        }
-        if (aliasOption && aliasOption.after) {
-          aliasOption.after.apply(this, arguments)
-        }
-        return result
+export function instrumentMethodAndCallOriginal(object, method, aliasOption) {
+  return instrumentMethod(object, method, function (original) {
+    return function () {
+      var result
+      if (aliasOption && aliasOption.before) {
+        aliasOption.before.apply(this, arguments)
+      }
+      if (typeof original === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        result = original.apply(this, arguments)
+      }
+      if (aliasOption && aliasOption.after) {
+        aliasOption.after.apply(this, arguments)
       }
+      return result
     }
-     
-  )
+  })
 }
 
-export function instrumentSetter(
-  object,
-  property,
-  after
-) {
+export function instrumentSetter(object, property, after) {
   var originalDescriptor = Object.getOwnPropertyDescriptor(object, property)
-  if (!originalDescriptor || !originalDescriptor.set || !originalDescriptor.configurable) {
+  if (
+    !originalDescriptor ||
+    !originalDescriptor.set ||
+    !originalDescriptor.configurable
+  ) {
     return { stop: noop }
   }
-
-  var instrumentation = function(thisObject, value) {
+  // Using the patched `setTimeout` from Zone.js triggers a rendering loop in some Angular
+  // component, see issue RUMF-1443
+  var setTimeout = getZoneJsOriginalValue(window, 'setTimeout')
+  var instrumentation = function (thisObject, value) {
     // put hooked setter into event loop to avoid of set latency
-    setTimeout(
-      function() {
-        after(thisObject, value)
-      },
-      0
-    )
+    setTimeout(function () {
+      after(thisObject, value)
+    }, 0)
   }
 
   var instrumentationWrapper = function (value) {
@@ -82,16 +68,20 @@ export function instrumentSetter(
   }
 
   Object.defineProperty(object, property, {
-    set: instrumentationWrapper,
+    set: instrumentationWrapper
   })
 
   return {
-    stop: function() {
-      if (Object.getOwnPropertyDescriptor(object, property) && Object.getOwnPropertyDescriptor(object, property).set === instrumentationWrapper) {
+    stop: function () {
+      if (
+        Object.getOwnPropertyDescriptor(object, property) &&
+        Object.getOwnPropertyDescriptor(object, property).set ===
+          instrumentationWrapper
+      ) {
         Object.defineProperty(object, property, originalDescriptor)
       } else {
         instrumentation = noop
       }
-    },
+    }
   }
 }

package/src/helper/lifeCycle.js

@@ -1,28 +1,23 @@
 import { each, filter } from './tools'
 export var LifeCycleEventType = {
   PERFORMANCE_ENTRIES_COLLECTED: 'PERFORMANCE_ENTRIES_COLLECTED',
-  AUTO_ACTION_CREATED: 'AUTO_ACTION_CREATED',
   AUTO_ACTION_COMPLETED: 'AUTO_ACTION_COMPLETED',
   VIEW_CREATED: 'VIEW_CREATED',
   VIEW_UPDATED: 'VIEW_UPDATED',
   VIEW_ENDED: 'VIEW_ENDED',
   SESSION_RENEWED: 'SESSION_RENEWED',
   SESSION_EXPIRED: 'SESSION_EXPIRED',
-  DOM_MUTATED: 'DOM_MUTATED',
-  BEFORE_UNLOAD: 'BEFORE_UNLOAD',
+  PAGE_EXITED: 'PAGE_EXITED',
   REQUEST_STARTED: 'REQUEST_STARTED',
   REQUEST_COMPLETED: 'REQUEST_COMPLETED',
   RAW_RUM_EVENT_COLLECTED: 'RAW_RUM_EVENT_COLLECTED',
   RUM_EVENT_COLLECTED: 'RUM_EVENT_COLLECTED',
   RAW_ERROR_COLLECTED: 'RAW_ERROR_COLLECTED',
-  RECORD_STARTED: 'RECORD_STARTED',
-  RECORD_STOPPED: 'RECORD_STOPPED',
   RAW_LOG_COLLECTED: 'RAW_LOG_COLLECTED',
   LOG_COLLECTED: 'LOG_COLLECTED'
 }
-
 export function LifeCycle() {
-  this.callbacks = []
+  this.callbacks = {}
 }
 LifeCycle.prototype = {
   notify: function (eventType, data) {