@kang123456/webmonitor v1.0.3

简介：

一款支持 H5,vue，react 可以收集用户在浏览器页面操作的 sdk。

实现功能：

● 支持代码运行报错，接口请求 500 等错误收集。

● 支持引用的资源，样式加载错误信息收集。

● 支持用户点击事件的收集。

● 支持用户填写表单数据收集。

● 支持通过 console.error 收集 trycatch 可能出现的错误。

● 支持基于单页面应用的菜单栏下功能页面停留时间统计。

● 支持用户通过接口上报自定义数据。

● 支持用户通过配置请求超时时间自动收集超时请求信息。

● 支持用户自定义是否开启相关配置(debug，是否收集页面停留时间)，自定义函数来处理数据上报前是否进行过滤。

配置方式：

1.线上形式： 在 index.html 的 head 里添加

<script  src="https://cdn.jsdelivr.net/npm/@kang123456/webmonitor/web.min.js"></script>

此方式默认引用最新版的 min 文件，更多方式请见https://www.jsdelivr.com/

开启 sdk 启用配置：

同样在 head 里面增加如下配置：

<script>
    window.MITO = MITO //方便在全局使用mito变量
    MITO.init({
      // 服务器地址
      dsn: 'http://127.0.0.1:3000/send',
      // 项目对应apikey
      apikey: '123-2223-123-123',
      debug:true,//本地调试时可以开启查看日志
      maxBreadcrumbs:4,//用户行为栈的最大容量，4-50之间
      languageType:'react',//表单收集用到（此配置默认开启），对于react 项目使用的ui 库为antd 4.x版本填写，其他不用（此配置可以默认帮助表单字段的id转为name属性，方便sdk收集）。
      timeOut:1000,//开启表示默认收集超过该时间的请求信息
      colConsoleError:true,//是否开启收集console.error 级别内容，默认关闭(false)
	  colFormValue:true,//是否开启表单内容收集（默认关闭）
      colPageDuration:true,//是否开启页面停留时间计时(单页面项目才适用)
	  beforePushBreadcrumb:function//每条数据上报前处理，可在此函数里自定义过滤逻辑
    });
</script>

表单收集注意：

sdk 默认开启表单收集事件，使用需要指定触发表单收集的标识，需要在某个元素上增加 data-submit="submit"
属性，以便 sdk 可以识别到收集时机，默认收集只会对 dom 上字段有 name 属性的元素进行收集，没有 name 属性字段会被
过滤。

测试发现大部分 ui 库并没有把字段的 name 属性转为 dom 上对应的 name，因此使用需要在标签上额外增加 name 属性。（antd 4.x 版本友好的支持把 name 属性转为 dom 上字段对应的 id，因此使用改类型 ui 库只需增加 languageType:'react'标识即可）

点击事件收集注意：

考虑到点击类型众多如果每个点击事件都收集那数据量会非常大，因此只收集元素具有 data-function="function"属性的标签。

eg：
    <Button type="primary" htmlType="submit" className={styles.login_button} onClick={this.login}
                     loading={loginLoading} data-function="function" data-submit="submit">
                  登录
    </Button>

beforePushBreadcrumb 使用示例：

beforePushBreadcrumb(data){//标识type为click类型的数据会被过滤
  if(data.type === “Click”)
      return false;
  return true;
}

sdk 接口使用

使用前需要配置在配置项配置： window.MITO = MITO

自定义上报数据，可以在任何地方调用

window.MITO.log({
	data //any
})

全部上报数据接口(触发一次性全部上报数据)，建议在用户退出登录后调用确保数据完整性。

window.MITO.flush()

数据格式

data：{
	type
	category
	data
    level
    time
}

接口发送数据格式：

{
    authInfo，sdk版本信息
	breadcrumb，用户行为操作数组
	deviceInfo，系统类型，浏览器版本信息
}

post 请求类型，application/json 参数格式

此外sdk内置了针对用户在浏览页面切换或者直接关闭浏览器时的事件监听，可以最大限度的确保在浏览器页面关闭下未发送的数据可以及时上报到服务端。

此sdk不能使用npm方式安装使用，只能通过<script>方式;另外文件夹node-express是简单的服务端接受数据显示，可以直接使用node node-express.js运行测试数据接受情况。

需要下载的可以到 https://www.jsdelivr.com/ 官网搜索 @kang123456/webmonitor 下载压缩包。