web-tracing-core 2.1.1 → 2.1.2

package/src/observer/index.ts

@@ -0,0 +1,91 @@
+import { ref as _ref } from './ref'
+import { computed as _computed } from './computed'
+import { watch as _watch } from './watch'
+import { ObserverValue, AnyFun, voidFun } from './types'
+
+/**
+ * 响应式
+ * 说明：与vue用法相似，但不提供多样的写法，只完成了基础用法，observer文件并不引用其他文件，为了方便移植
+ * 完成功能：ref computed watch
+ * 兼容性：需要支持proxy，如不支持则响应式无效
+ *
+ * 不支持proxy时各个函数表现：
+ * ref：返回 { value: target } 对象
+ * computed：返回 { value: fun() } 对象
+ * watch：返回空函数
+ */
+
+function hasProxy(): boolean {
+  return !!window.Proxy
+}
+
+function ref<T>(target: T) {
+  return hasProxy() ? _ref<T>(target) : { value: target }
+}
+
+function computed<T>(fun: AnyFun) {
+  return hasProxy() ? _computed<T>(fun) : { value: fun() }
+}
+
+function watch<T>(target: ObserverValue<T>, fun: voidFun<T>) {
+  return hasProxy() ? _watch<T>(target, fun) : () => ({})
+}
+
+export { ref, computed, watch }
+
+// ---------------- demo 1 ----------------
+// const data = {
+//   name: 'aaa',
+//   age: 1,
+//   cheng: {
+//     a: 1,
+//     b: 1,
+//     c: 1
+//   }
+// }
+// const a = ref(data)
+// const b = ref({
+//   name: 'bbb',
+//   age: 2
+// })
+// const c = ref({
+//   name: 'ccc',
+//   age: 3
+// })
+// const d = computed<number>(() => a.value.age + b.value.age + c.value.age)
+
+// watch(d, val => {
+//   console.log('val', val)
+// })
+
+// setTimeout(() => {
+//   a.value.age = 11
+//   console.log('d', d.value)
+// }, 1000)
+
+// ---------------- demo 2 ----------------
+// const a = ref(1)
+// const b = ref(2)
+// const c = ref(3)
+
+// const d = computed<number>(() => a.value + b.value) // 3
+// const e = computed<number>(() => d.value + c.value) // 6
+// const f = computed<number>(() => e.value + d.value) // 9
+
+// c.value = 6
+
+// setTimeout(() => {
+//   console.log('f', f.value) // 12
+// }, 1000)
+
+// ---------------- demo 3 ----------------
+// const a = ref(1)
+// const b = ref(2)
+// const c = 3
+
+// const d = computed<number>(() => a.value + b.value) // 3
+// const e = computed<number>(() => d.value + c) // 6
+
+// setTimeout(() => {
+//   console.log('e', e.value) // 6
+// }, 1000)

package/src/observer/ref.ts

@@ -0,0 +1,80 @@
+import { Dep } from './dep'
+import { ObserverValue, AnyFun } from './types'
+import { OBSERVERSIGNBOARD } from './config'
+
+function isRegExp(value: any) {
+  return Object.prototype.toString.call(value) === `[object RegExp]`
+}
+
+class Observer<T> {
+  target: ObserverValue<T>
+  constructor(target: ObserverValue<T>) {
+    this.target = target
+  }
+  defineReactive() {
+    const dep = new Dep()
+    const handlers = getHandlers(
+      () => {
+        dep.addSub()
+      },
+      (oldValue: any) => {
+        dep.notify(oldValue)
+      }
+    )
+    return new Proxy<ObserverValue<T>>(this.target, handlers)
+  }
+}
+
+function getHandlers(
+  getCallBack?: AnyFun,
+  setCallBack?: AnyFun
+): ProxyHandler<ObserverValue<any>> {
+  const proxyCache = new WeakMap<ObserverValue<any>, any>()
+  const handlers: ProxyHandler<ObserverValue<any>> = {
+    get(target, key: string, receiver) {
+      // console.log(`读取属性：${key}`)
+      const value = Reflect.get(target, key, receiver)
+      getCallBack && getCallBack()
+      if (typeof value === 'object' && value !== null && !isRegExp(value)) {
+        let proxy = proxyCache.get(value)
+        if (!proxy) {
+          proxy = new Proxy(value, handlers)
+          proxyCache.set(value, proxy)
+        }
+        return proxy
+      }
+      return value
+    },
+    set(target, key: string, value, receiver) {
+      const oldValue = Reflect.get(target, key, receiver)
+      if (oldValue === value) return oldValue
+      // console.log(`设置属性：${key}=${value}, oldValue:${oldValue}`)
+      const beforeTarget = JSON.parse(JSON.stringify(target))
+      const result = Reflect.set(target, key, value, receiver)
+      setCallBack && setCallBack(beforeTarget)
+      return result
+    }
+  }
+  return handlers
+}
+
+export const refMap = new WeakMap<any, ObserverValue<any>>()
+
+export function ref<T>(target: T) {
+  const newObj: any = { value: target }
+  newObj[OBSERVERSIGNBOARD] = true
+
+  const ob = new Observer<T>(newObj)
+  const proxy = ob.defineReactive()
+
+  refMap.set(ob, proxy)
+  return proxy
+}
+
+export function isRef(ref: any) {
+  return !!ref[OBSERVERSIGNBOARD]
+}
+
+export function unRef(ref: any) {
+  return isRef(ref) ? ref.value : ref
+}

package/src/observer/types.ts

@@ -0,0 +1,22 @@
+export interface ObserverValue<T> {
+  value: T
+}
+
+export type AnyFun = {
+  (...args: any[]): any
+}
+
+export type voidFun<T> = {
+  (...args: T[]): void
+}
+
+export type Options = {
+  computed?: boolean
+  watch?: boolean
+  callback?: AnyFun
+}
+
+export type Proxy = {
+  value: any
+  dirty: boolean
+}

package/src/observer/watch.ts

@@ -0,0 +1,19 @@
+import { Watcher } from './watcher'
+import { isRef } from './ref'
+import { ObserverValue, AnyFun, voidFun } from './types'
+
+function watchInit(callback: AnyFun, getter: AnyFun) {
+  new Watcher('', { watch: true, callback }, getter)
+}
+
+export function watch<T>(target: ObserverValue<T>, fun: voidFun<T>) {
+  if (!isRef(target)) return
+  watchInit(
+    (newValue: T, oldValue: T) => {
+      fun(newValue, oldValue)
+    },
+    function () {
+      return target.value
+    }
+  )
+}

package/src/observer/watcher.ts

@@ -0,0 +1,88 @@
+import { Dep } from './dep'
+import { computedMap } from './computed'
+import { AnyFun, Options, Proxy } from './types'
+
+const targetStack: Watcher[] = []
+function pushTarget(_target: Watcher) {
+  if (Dep.target) targetStack.push(Dep.target)
+  Dep.target = _target
+}
+function popTarget() {
+  Dep.target = targetStack.pop()
+}
+
+export class Watcher {
+  vm: any
+  computed: boolean
+  watch: boolean
+  proxy: Proxy
+  dep: Dep | undefined
+  getter: AnyFun | undefined
+  callback: AnyFun | undefined
+  constructor(vm: any, options: Options, getter?: AnyFun) {
+    const { computed, watch, callback } = options
+    this.getter = getter // 获取值函数
+    this.computed = computed || false // 是否为计算属性
+    this.watch = watch || false // 是否为监听属性
+    this.callback = callback // 回调函数,专门给watch用的
+    this.proxy = {
+      value: '', // 存储这个属性的值,在不需要更新的时候会直接取这个值
+      dirty: true // 表示这个属性是否脏了(脏了代表需要重新运算更新这个值)
+    }
+    this.vm = vm
+
+    if (computed) {
+      this.dep = new Dep()
+    } else if (watch) {
+      this.watchGet()
+    } else {
+      this.get()
+    }
+  }
+  update(oldValue: any) {
+    if (this.computed) {
+      // 更新计算属性(不涉及渲染)
+      this.dep!.notify()
+    } else if (this.watch) {
+      // 触发watch
+      // this.watchGet()
+      if (oldValue !== this.proxy.value) {
+        this.callback && this.callback(this.proxy.value, oldValue)
+      }
+    } else {
+      // 更新data, 触发依赖其的属性更新
+      this.get()
+    }
+  }
+  get() {
+    // 存入当前上下文到依赖(表示当前是哪个属性在依赖其他属性,这样在其他属性发生变化时就知道应该通知谁了)
+    pushTarget(this)
+
+    // 目前只有计算属性才会调用 get 方法
+    const value = this.computed ? computedMap.get(this.vm)!.call(this.vm) : ''
+    if (value !== this.proxy.value) {
+      this.proxy.dirty = false // 标记为不是脏的数据
+      this.proxy.value = value // 缓存数据,在数据不脏的时候直接拿这个缓存值
+    }
+    popTarget() // 取出依赖
+    return value
+  }
+  /**
+   * 监听属性专用 - 拿到最新值并添加依赖
+   */
+  watchGet() {
+    pushTarget(this) // 将当前上下文放入 Dep.target
+    this.proxy.dirty = false // 设定不为脏数据
+    if (this.getter) {
+      this.proxy.value = this.getter() // 设定值(在这个过程中就给上了依赖)
+    }
+    popTarget() // 取出上面放入 Dep.target 的上下文
+  }
+  /**
+   * 计算属性专用 - 添加依赖
+   * 其他值用到了这个计算属性就会被记录添加到依赖中
+   */
+  depend() {
+    this.dep!.addSub()
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,126 @@
+import type { EventBus } from '../lib/eventBus'
+import type { BaseInfo } from '../lib/base'
+import type { ObserverValue } from '../observer/types'
+
+export type WebTracing = {
+  eventBus: EventBus
+  baseInfo: BaseInfo
+  sendData: any
+  lineStatus: any
+  options: ObserverValue<InternalOptions> // 配置信息
+  firstScreen: any // 首屏信息
+  intersection: any // 曝光采集
+}
+
+interface Pv {
+  core?: boolean // 是否发送页面跳转相关数据
+}
+interface Performance {
+  core?: boolean // 是否采集静态资源、接口的相关数据
+  firstResource?: boolean // 是否采集首次进入页面的数据
+  server?: boolean // 是否采集接口请求
+}
+interface Error {
+  core?: boolean // 是否采集异常数据
+  server?: boolean // 是否采集报错接口数据
+}
+interface Event {
+  core?: boolean // 是否采集点击事件
+}
+
+/**
+ * sdk内部配置
+ */
+export type InternalOptions = {
+  dsn: string // 上报地址
+  appName: string // 应用名称
+  appCode: string // 应用code
+  appVersion: string // 应用版本
+  userUuid: string // 用户id(外部填充进来的id)
+  sdkUserUuid: string // 用户id(sdk内部生成的id)
+  debug: boolean // 是否开启调试模式(控制台会输出sdk动作)
+  pv: Pv
+  performance: Performance
+  error: Error
+  event: Event
+  ext: AnyObj // 自定义全局附加参数(放在baseInfo中)
+  tracesSampleRate: number // 抽样发送
+  cacheMaxLength: number // 上报数据最大缓存数
+  cacheWatingTime: number // 上报数据最大等待时间
+  ignoreErrors: Array<string | RegExp> // 错误类型事件过滤
+  ignoreRequest: Array<string | RegExp> // 请求类型事件过滤
+  scopeError: boolean // 当某个时间段报错时，会将此类错误转为特殊错误类型，会新增错误持续时间范围
+  localization: boolean // 是否本地化：sdk不再主动发送事件，事件都存储在本地，由用户手动调用方法发送
+  sendTypeByXmlBody?: boolean // 是否强制指定发送形式为xml，body请求方式
+  // whiteScreen: boolean // 开启白屏检测
+  beforePushEventList: AnyFun[] // 添加到行为列表前的 hook (在这里面可以给出错误类型，然后就能达到用户想拿到是何种事件类型的触发)
+  beforeSendData: AnyFun[] // 数据上报前的 hook
+  afterSendData: AnyFun[] // 数据上报后的 hook
+  localizationOverFlow: VoidFun // 本地化存储溢出后的回调
+  recordScreen: boolean // 是否启动录屏
+  timeout?: number // 日志上报超时时间（毫秒）
+  maxQueueLength?: number // 上报接口异常，日志队列最大缓存数
+  checkRecoverInterval?: number // 多长时间检测一次上报接口是否恢复（分钟）
+}
+
+/**
+ * sdk初始化入参配置
+ */
+export type InitOptions = {
+  dsn: string // 上报地址
+  appName: string // 应用名称
+  appCode?: string // 应用code
+  appVersion?: string // 应用版本
+  userUuid?: string // 用户id(外部填充进来的id)
+  debug?: boolean // 是否开启调试模式(控制台会输出sdk动作)
+  pv?: Pv | boolean
+  performance?: Performance | boolean
+  error?: Error | boolean
+  event?: Event | boolean
+  ext?: { [key: string]: any } // 自定义全局附加参数(放在baseInfo中)
+  tracesSampleRate?: number // 抽样发送
+  cacheMaxLength?: number // 上报数据最大缓存数
+  cacheWatingTime?: number // 上报数据最大等待时间
+  ignoreErrors?: Array<string | RegExp> // 错误类型事件过滤
+  ignoreRequest?: Array<string | RegExp> // 请求类型事件过滤
+  scopeError?: boolean // 当某个时间段报错时，会将此类错误转为特殊错误类型，会新增错误持续时间范围
+  localization?: boolean // 是否本地化：sdk不再主动发送事件，事件都存储在本地，由用户手动调用方法发送
+  sendTypeByXmlBody?: boolean // 是否强制指定发送形式为xml，body请求方式
+  // whiteScreen?: boolean // 开启白屏检测
+  beforePushEventList?: (data: any) => any // 添加到行为列表前的 hook (在这里面可以给出错误类型，然后就能达到用户想拿到是何种事件类型的触发)
+  beforeSendData?: (data: any) => any // 数据上报前的 hook
+  afterSendData?: (data: any) => void // 数据上报后的 hook
+  recordScreen?: boolean // 是否启动录屏
+  timeout?: number // 日志上报超时时间（毫秒）
+  maxQueueLength?: number // 上报接口异常，日志队列最大缓存数
+  checkRecoverInterval?: number // 多长时间检测一次上报接口是否恢复（分钟）
+}
+
+export type ElementOrList = Element | Element[]
+export interface TargetGather {
+  target: ElementOrList
+  threshold: number
+  params?: AnyObj
+}
+
+export interface RecordEventScope {
+  scope: string
+  eventList: any[]
+}
+
+export type VoidFun = {
+  (...args: any[]): void
+}
+
+export type AnyFun = {
+  (...args: any[]): any
+}
+
+export type AnyObj<T = any> = {
+  [key: string]: T
+}
+
+export interface SendData {
+  baseInfo: object
+  eventInfo: unknown[]
+}

package/src/utils/debug.ts

@@ -0,0 +1,17 @@
+import { options } from '../lib/options'
+
+/**
+ * 控制台输出信息
+ * @param args 输出信息
+ */
+export function debug(...args: any[]): void {
+  if (options.value.debug) console.log('@web-tracing: ', ...args)
+}
+
+/**
+ * 控制台输出错误信息
+ * @param args 错误信息
+ */
+export function logError(...args: any[]): void {
+  console.error('@web-tracing: ', ...args)
+}

package/src/utils/element.ts

@@ -0,0 +1,47 @@
+/**
+ * 判断元素是否含有目标属性
+ */
+export function getElByAttr(list: Element[], key: string): Element | undefined {
+  return list.find(item => item.hasAttribute && item.hasAttribute(key))
+}
+
+/**
+ * 是否为简单的标签
+ * 简单标签数组：['em', 'b', 'strong', 'span', 'img', 'i', 'code']
+ */
+export function isSimpleEl(children: Element[]): boolean {
+  if (children.length > 0) {
+    const arr = ['em', 'b', 'strong', 'span', 'img', 'i', 'code']
+    const a = children.filter(
+      ({ tagName }) => arr.indexOf(tagName.toLowerCase()) >= 0
+    )
+    return a.length === children.length
+  }
+  return true
+}
+
+/**
+ * 获取元素的关系字符串(从子级一直递归到最外层)
+ * 例如两层div的关系会得到字符串: div>div
+ */
+export function getNodeXPath(node: Element, curPath = ''): string {
+  if (!node) return curPath
+  const parent = node.parentElement
+  const { id } = node
+  const tagName = node.tagName.toLowerCase()
+  const path = curPath ? `>${curPath}` : ''
+
+  if (
+    !parent ||
+    parent === document.documentElement ||
+    parent === document.body
+  ) {
+    return `${tagName}${path}`
+  }
+
+  if (id) {
+    return `#${id}${path}` // 知道了id 就不需要获取上下级关系了(id是唯一的)
+  }
+
+  return getNodeXPath(parent, `${tagName}${path}`)
+}