Merge pull request M-cheng-web#20 from SaberA1ter/main

feat: 添加初始化配置项 recordScreen 用以控制是否启动录屏
draco1023 · Aug 28, 2023 · 6fdc2f8 · 6fdc2f8
2 parents dff283e + a338e1b
commit 6fdc2f8
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 31 deletions.
diff --git a/docs/guide/use/options.md b/docs/guide/use/options.md
@@ -9,30 +9,31 @@ sdk初始化时的配置项
 :::
 
 
-| 名称 | 类型 | 必填 | 默认值 | 说明 |
-| ------------------- | -------------------- | ------ | --------- | --------------------------------------- |
-| dsn | string | **是** | - | 上报地址 |
-| appName | string | **是** | - | 应用名称 |
-| appCode | string | 否 | - | 应用code |
-| appVersion | string | 否 | - | 应用版本 |
-| userUuid | string | 否 | - | 用户id |
-| debug | boolean | 否 | false | 是否开启触发事件时控制台输出 |
-| pv | object/boolean | 否 | false | ***见下方 pv 解释*** |
-| performance | object/boolean | 否 | false | ***见下方 performance 解释*** |
-| error | object/boolean | 否 | false | ***见下方 error 解释*** |
-| event | object/boolean | 否 | false | ***见下方 event 解释*** |
-| ext | object | 否 | undefined | 自定义的全局附加参数 |
-| tracesSampleRate | number | 否 | 1 | 抽样发送(0-1) |
-| cacheMaxLength | number | 否 | 5 | 上报数据最大缓存数 |
-| cacheWatingTime | number | 否 | 5000 | 上报数据最大等待时间(ms) |
-| ignoreErrors | Array<string/RegExp> | 否 | [] | 错误类型事件过滤 |
-| ignoreRequest | Array<string/RegExp> | 否 | [] | 请求类型事件过滤 |
-| scopeError | boolean | 否 | false | 开启范围错误 |
-| localization | boolean | 否 | false | 是否本地化 |
-| sendTypeByXmlBody | boolean | 否 | false | 是否强制指定发送形式为xml，body请求方式 |
-| beforePushEventList | function | 否 | - | 添加到行为列表前的 hook |
-| beforeSendData | function | 否 | - | 数据上报前的 hook |
-| afterSendData | function | 否 | - | 数据上报后的 hook |
+| 名称 | 类型 | 必填 | 默认值 | 说明 |
+|---------------------| -------------------- | ------ | --------- |--------------------------|
+| dsn | string | **是** | - | 上报地址 |
+| appName | string | **是** | - | 应用名称 |
+| appCode | string | 否 | - | 应用code |
+| appVersion | string | 否 | - | 应用版本 |
+| userUuid | string | 否 | - | 用户id |
+| debug | boolean | 否 | false | 是否开启触发事件时控制台输出 |
+| recordScreen | boolean | 否 | false | 是否开启录屏功能 |
+| pv | object/boolean | 否 | false | ***见下方 pv 解释*** |
+| performance | object/boolean | 否 | false | ***见下方 performance 解释*** |
+| error | object/boolean | 否 | false | ***见下方 error 解释*** |
+| event | object/boolean | 否 | false | ***见下方 event 解释*** |
+| ext | object | 否 | undefined | 自定义的全局附加参数 |
+| tracesSampleRate | number | 否 | 1 | 抽样发送(0-1) |
+| cacheMaxLength | number | 否 | 5 | 上报数据最大缓存数 |
+| cacheWatingTime | number | 否 | 5000 | 上报数据最大等待时间(ms) |
+| ignoreErrors | Array<string/RegExp> | 否 | [] | 错误类型事件过滤 |
+| ignoreRequest | Array<string/RegExp> | 否 | [] | 请求类型事件过滤 |
+| scopeError | boolean | 否 | false | 开启范围错误 |
+| localization | boolean | 否 | false | 是否本地化 |
+| sendTypeByXmlBody | boolean | 否 | false | 是否强制指定发送形式为xml，body请求方式 |
+| beforePushEventList | function | 否 | - | 添加到行为列表前的 hook |
+| beforeSendData | function | 否 | - | 数据上报前的 hook |
+| afterSendData | function | 否 | - | 数据上报后的 hook |
 
 ## pv
 当 pv 为布尔值时其内部所有属性都为此布尔值（例如：pv = true 代表 pv: {core: true}）
@@ -123,6 +124,11 @@ options.value.dsn = 'www.baidu.com' // 从此刻开始所有的事件都会发
 + 解释: sdk内部对所有已发生的事件会先存到事件列表中，同时也会开始倒计时(也就是最大等待时间)，倒计时结束后无论事件列表中是否满足最大缓存数都会触发发送
 + 默认值: 5000
 
+### recordScreen
++ 作用: 是否启动录屏功能
++ 解释: 错误采集时会保存页面录屏信息，该选项仅在启动错误采集时生效，为 false 时错误采集 recordscreen 属性为 null
++ 默认值: true
+
 ### ignoreErrors
 + 作用: 错误类型事件过滤
 + 解释: 在触发错误类型事件时，会依据此参数过滤一遍，最终决定哪些事件可以发生

diff --git a/packages/core/src/lib/err.ts b/packages/core/src/lib/err.ts
@@ -5,7 +5,7 @@ import { sendData } from './sendData'
 import { eventBus } from './eventBus'
 import { isArray, isRegExp } from '../utils/is'
 import { options } from './options'
-import { recordscreenList, zip } from './recordscreen'
+import { zip, getEventList } from './recordscreen'
 import { debug } from '../utils/debug'
 import { initBatchError, batchError } from './err-batch'
 import { RecordEventScope } from '../types'
@@ -193,7 +193,7 @@ function isIgnoreErrors(error: any): boolean {
  */
 function getRecordEvent(): RecordEventScope[] {
  const _recordscreenList: RecordEventScope[] = JSON.parse(
- JSON.stringify(recordscreenList)
+ JSON.stringify(getEventList())
  )
  return _recordscreenList
  .slice(-2)
@@ -209,7 +209,7 @@ function emit(errorInfo: any): void {
  const info = {
  ...errorInfo,
  eventType: SEDNEVENTTYPES.ERROR,
- recordscreen: zip(getRecordEvent()),
+ recordscreen: options.value.recordScreen ? zip(getRecordEvent()) : null,
  triggerPageUrl: getLocationHref(),
  triggerTime: getTimestamp()
  }

diff --git a/packages/core/src/lib/options.ts b/packages/core/src/lib/options.ts
@@ -32,6 +32,7 @@ export class Options implements InternalOptions {
  event = {
  core: false // 页面点击-是否采集点击事件
  }
+ recordScreen = true // 是否启动录屏
 
  ext = {} // 自定义全局附加参数(放在baseInfo中)
  tracesSampleRate = 1 // 抽样发送
@@ -120,6 +121,7 @@ function _validateInitOption(options: InitOptions) {
  appVersion,
  userUuid,
  debug,
+ recordScreen,
  pv,
  performance,
  error,
@@ -182,6 +184,7 @@ function _validateInitOption(options: InitOptions) {
  validateOption(appVersion, 'appVersion', 'string'),
  validateOption(userUuid, 'userUuid', 'string'),
  validateOption(debug, 'debug', 'boolean'),
+ validateOption(recordScreen, 'recordScreen', 'boolean'),
 
  validateOption(ext, 'ext', 'object'),
  validateOption(tracesSampleRate, 'tracesSampleRate', 'number'),

diff --git a/packages/core/src/lib/recordscreen.ts b/packages/core/src/lib/recordscreen.ts
@@ -3,6 +3,8 @@ import pako from 'pako'
 import { Base64 } from 'js-base64'
 import { RecordEventScope } from '../types'
 import { getTimestamp } from '../utils'
+import { options } from './options'
+import { watch } from '../observer'
 
 /**
  * 只存储最近30s的所有录屏 (分为3段)
@@ -41,15 +43,19 @@ import { getTimestamp } from '../utils'
 const MAXSCOPETIME = 5000 // 每5s记录一个区间
 const MAXSCOPELENGTH = 3 // 录屏数组最长长度 - 不要小于3
 
+let recordScreen: RecordScreen | undefined
+
 export class RecordScreen {
  public eventList: RecordEventScope[] = [
  { scope: `${getTimestamp()}-`, eventList: [] }
  ]
+ private closeCallback: ReturnType<typeof record>
+
  constructor() {
  this.init()
  }
  private init() {
- record({
+ this.closeCallback = record({
  emit: (event, isCheckout) => {
  const lastEvents = this.eventList[this.eventList.length - 1]
  lastEvents.eventList.push(event)
@@ -68,12 +74,29 @@ export class RecordScreen {
  checkoutEveryNms: MAXSCOPETIME // 每5s重新制作快照
  })
  }
+ public close() {
+ this.closeCallback?.()
+ this.closeCallback = undefined
+ }
 }
 
-export let recordscreenList: RecordEventScope[]
-
 export function initRecordScreen() {
- recordscreenList = new RecordScreen().eventList
+ watch(options, (newValue, oldValue) => {
+ if (newValue.recordScreen === oldValue.recordScreen) return
+
+ if (newValue.recordScreen) recordScreen = new RecordScreen()
+ else {
+ recordScreen!.close()
+ recordScreen = undefined
+ }
+ })
+
+ recordScreen = options.value.recordScreen ? new RecordScreen() : undefined
+}
+
+// 获取录屏数据
+export function getEventList() {
+ return recordScreen?.eventList ?? []
 }
 
 /**

diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -57,6 +57,7 @@ export type InternalOptions = {
  beforeSendData: AnyFun[] // 数据上报前的 hook
  afterSendData: AnyFun[] // 数据上报后的 hook
  localizationOverFlow: VoidFun // 本地化存储溢出后的回调
+ recordScreen: boolean // 是否启动录屏
 }
 
 /**
@@ -86,6 +87,7 @@ export type InitOptions = {
  beforePushEventList?: (data: any) => any // 添加到行为列表前的 hook (在这里面可以给出错误类型，然后就能达到用户想拿到是何种事件类型的触发)
  beforeSendData?: (data: any) => any // 数据上报前的 hook
  afterSendData?: (data: any) => void // 数据上报后的 hook
+ recordScreen?: boolean // 是否启动录屏
 }
 
 export type ElementOrList = Element | Element[]