发版Check List

  • 目前有两处修改版本号的地方, config/index.js & package.json, 两处版本号是否统一

安装与使用

使用项目中自带的SDK包，引入进行打点

  1. import dt from 'sdk';
  3. // 初始化配置
  4. dt.set({
  5.   pid: 'project_id', // [必填]项目id, 由灯塔项目组统一分配
  6.   uuid: '', // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
  7.   ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串
  9.  record: {
  10.     time_on_page: true, // 是否监控用户在线时长数据, 默认为true
  11.     performance: true, // 是否监控页面载入性能, 默认为true
  12.     js_error: true, //  是否监控页面报错信息, 默认为true
  13.     // 配置需要监控的页面报错类别, 仅在js_error为true时生效, 默认均为true(可以将配置改为false, 以屏蔽不需要上报的错误类别)
  14.     js_error_report_config: {
  15.       ERROR_RUNTIME: true, // js运行时报错
  16.       ERROR_SCRIPT: true, // js资源加载失败
  17.       ERROR_STYLE: true, // css资源加载失败
  18.       ERROR_IMAGE: true, // 图片资源加载失败
  19.       ERROR_AUDIO: true, // 音频资源加载失败
  20.       ERROR_VIDEO: true, // 视频资源加载失败
  21.       ERROR_CONSOLE: true, // vue运行时报错
  22.       ERROR_TRY_CATCH: true, // 未catch错误
  23.       // 自定义检测函数, 上报前最后判断是否需要报告该错误
  24.       // 回调函数说明
  25.       // 传入参数 => 
  26.       //            desc:  字符串, 错误描述
  27.       //            stack: 字符串, 错误堆栈信息
  28.       // 返回值 =>  
  29.       //            true  : 上报打点请求
  30.       //            false : 不需要上报
  31.       checkErrrorNeedReport: function(desc, stack){
  32.         return true
  33.       }
  34.     }
  35.   },
  37.   // 业务方的js版本号, 会随着打点数据一起上传, 方便区分数据来源
  38.   // 可以不填, 默认为1.0.0
  39.   version: '1.0.0',
  41.   // 对于如同
  42.   // test.com/detail/1.html
  43.   // test.com/detail/2.html
  44.   // test.com/detail/3.html
  45.   // ...
  46.   // 这种页面来说, 虽然url不同, 但他们本质上是同一个页面
  47.   // 因此需要业务方传入一个处理函数, 根据当前url解析出真实的页面类型(例如: 二手房列表/经纪人详情页), 以便灯塔系统对错误来源进行分类
  48.   // 回调函数说明
  49.   // 传入参数 => window.location
  50.   // 返回值 => 对应的的页面类型(50字以内, 建议返回汉字, 方便查看), 默认是返回当前页面的url
  51.   getPageType: function(location){ return `${location.host}${location.pathname}` }
  52. })

script标签引入 =>

  1. <script>
  2.   window.dt && dt.set({
  3.     pid: 'project_id', // [必填]项目id, 由灯塔项目组统一分配
  4.     uuid: '', // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
  5.     ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串
  7.     is_test: false, // 是否为测试数据, 默认为false(测试模式下打点数据仅供浏览, 不会展示在系统中)
  8.     record: {
  9.       time_on_page: true, // 是否监控用户在线时长数据, 默认为true
  10.       performance: true, // 是否监控页面载入性能, 默认为true
  11.       js_error: true, //  是否监控页面报错信息, 默认为true
  12.       // 配置需要监控的页面报错类别, 仅在js_error为true时生效, 默认均为true(可以将配置改为false, 以屏蔽不需要上报的错误类别)
  13.       js_error_report_config: {
  14.         ERROR_RUNTIME: true, // js运行时报错
  15.         ERROR_SCRIPT: true, // js资源加载失败
  16.         ERROR_STYLE: true, // css资源加载失败
  17.         ERROR_IMAGE: true, // 图片资源加载失败
  18.         ERROR_AUDIO: true, // 音频资源加载失败
  19.         ERROR_VIDEO: true, // 视频资源加载失败
  20.         ERROR_CONSOLE: true, // vue运行时报错
  21.         ERROR_TRY_CATCH: true, // 未catch错误
  22.         // 自定义检测函数, 上报前最后判断是否需要报告该错误
  23.         // 回调函数说明
  24.         // 传入参数 => 
  25.         //            desc:  字符串, 错误描述
  26.         //            stack: 字符串, 错误堆栈信息
  27.         // 返回值 =>  
  28.         //            true  : 上报打点请求
  29.         //            false : 不需要上报
  30.         checkErrrorNeedReport: function(desc, stack){
  31.           return true
  32.         }
  33.       }
  34.     },
  36.     // 业务方的js版本号, 会随着打点数据一起上传, 方便区分数据来源
  37.     // 可以不填, 默认为1.0.0
  38.     version: '1.0.0',
  40.     // 对于如同
  41.     // test.com/detail/1.html
  42.     // test.com/detail/2.html
  43.     // test.com/detail/3.html
  44.     // ...
  45.     // 这种页面来说, 虽然url不同, 但他们本质上是同一个页面
  46.     // 因此需要业务方传入一个处理函数, 根据当前url解析出真实的页面类型(例如: 二手房列表/经纪人详情页), 以便灯塔系统对错误来源进行分类
  47.     // 回调函数说明
  48.     // 传入参数 => window.location
  49.     // 返回值 => 对应的的页面类型(50字以内, 建议返回汉字, 方便查看), 默认是返回当前页面的url
  50.     getPageType: function(location){ return `${location.host}${location.pathname}` }
  51.   })
  52. </script>

自动错误监控使用说明

浏览器中对脚本报错信息有跨域限制, 通过标签引入js时, 需要在所有要监控的script标签中添加 crossorigin="anonymous" 属性后, 才能获取到错误堆栈数据, 否则只能看到Script error的提示

参考: FunDebug: Script error.解决方法

主动打点方法说明

产品指标

  1. /**
  2.  * 用户点击行为上报，用于统计菜单点击量
  3.  * @param {String}  clickBehavior [必填]用户行为标识符, 用于统计菜单点击量 , 最多50字符( menu/click/button/...)
  4.  * @param {String} name [必填]用户行为名称, 和clickBehavior对应, 用于展示, 建议传中文, 最多50字符
  5.  * @param {String} url  [可选]用户点击页面url, 可以作为辅助信息, 最多200字符
  6.  */
  7. dt.behavior(clickBehaviorType, name, url)
  9. //demo:
  10. dt.behavior(
  11. '/abnormal_monitor/error_dashboard',
  12. '灯塔-页面性能',
  13. window.location.href
  14. )
  17. /**
  18.  * JS错误主动上报接口
  19.  * @param {String} errorName 错误类型, 推荐格式 => "错误类型(中文)_${具体错误名}", 最长200字
  20.  * @param {String} url       错误对应的url,  location.host + location.pathname, 不包括get参数(get参数可以转成json后放在detail中), 最长200个字
  21.  * @param {Object} extraInfo 附属信息, 默认为空对象
  22.  *                 => extraInfo 中以下字段填写后可以在后台错误日志列表中直接展示
  23.  *                 =>        trace_url         // [String]请求对应的trace系统查看地址, 例如: trace系统url + trace_id
  24.  *                 =>        http_code         // [Number]接口响应的Http状态码，
  25.  *                 =>        during_ms         // [Number]接口响应时长(毫秒)
  26.  *                 =>        request_size_b    // [Number]post参数体积, 单位b
  27.  *                 =>        response_size_b   // [Number]响应值体积, 单位b
  28.  *                 => 其余字段会作为补充信息进行展示
  29.  */
  30. function notify (errorName = '', url = '', extraInfo = {}) 
  32. // demo：
  33. dt.notify(
  34.   'response code',         // 错误名, 不能超过200个字符
  35.   'a.b.com',               // url地址, 不能超过200个字符
  36.   {
  37.    // 下列字段填写后会被统一展示 
  38.    'trace_url':'trace.test.com/123456',
  39.    'http_code':200,        
  40.    'during_ms':10,         
  41.    'request_size_b':1024,  
  42.    'response_size_b':1024, 
  44.    // 以下字段作为补充说明进行展示
  45.    ... // 任意 key => value
  46.   })

如何确认埋点成功？

通过Chrome或Charles等工具拦截URL为https://dig.xtest.com/fee.gif开头的网络请求,查看请求参数是否携带埋点信息

例如这个URL: 点我

对应打点信息为

  1. d: {
  2.   "type": "error",
  3.   "code": 3,
  4.   "detail": {
  5.     "error_no": 122,
  6.     "http_code": "",
  7.     "during_ms": "",
  8.     "url": "a.b.c",
  9.     "request_size_b": "",
  10.     "response_size_b": "",
  11.     "reason": "ERR_BLOCKED_BY_CLIENT"
  12.   },
  13.   "extra": {},
  14.   "common": {
  15.     "pid": "platfe",
  16.     "uuid": "f770330d-b2c7-4bfa-94fb-b31338f65a85",
  17.     "ssid": "df9c0245-005d-479c-81e0-7daa94c0681d",
  18.     "ucid": 1000000023100106,
  19.     "timestamp": 1537431733127
  20.   },
  21.   "msg": ""
  22. }

数据更新周期

数据项 更新周期
页面异常 5分钟
页面性能指标 15分钟
用户停留时长 15分钟
新用户数 1小时
设备数据 1小时
新用户数 1小时
终端:操作系统分布 6小时
终端:设备分布 6小时
终端:浏览器分布 6小时