zhicheng-fe-monitor-sdk v2.2.0

发版Check List

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

安装与使用

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

import log from 'zhicheng-fe-monitor-sdk';

// 初始化配置
log.set({
  pid: 'project_id', 
  uuid: '', // [可选]设备唯一id
  ucid: '', // [可选]用户ucid

 record: {
    js_error: true, //  是否监控页面报错信息, 默认为true
    // 配置需要监控的页面报错类别, 仅在js_error为true时生效, 默认均为true(可以将配置改为false, 以屏蔽不需要上报的错误类别)
    js_error_report_config: {
      ERROR_RUNTIME: true, // js运行时报错
      ERROR_SCRIPT: true, // js资源加载失败
      ERROR_STYLE: true, // css资源加载失败
      ERROR_IMAGE: true, // 图片资源加载失败
      ERROR_AUDIO: true, // 音频资源加载失败
      ERROR_VIDEO: true, // 视频资源加载失败
      ERROR_CONSOLE: true, // vue运行时报错
      ERROR_TRY_CATCH: true, // 未catch错误
      // 自定义检测函数, 上报前最后判断是否需要报告该错误
      // 回调函数说明
      // 传入参数 => 
      //            desc:  字符串, 错误描述
      //            stack: 字符串, 错误堆栈信息
      // 返回值 =>  
      //            true  : 上报打点请求
      //            false : 不需要上报
      checkErrrorNeedReport: function(desc, stack){
        return true
      }
    }
  },

  // 业务方的js版本号, 会随着打点数据一起上传, 方便区分数据来源
  // 可以不填, 默认为1.0.0
  version: '1.0.0',

  // 对于如同
  // test.com/detail/1.html
  // test.com/detail/2.html
  // test.com/detail/3.html
  // ...
  // 这种页面来说, 虽然url不同, 但他们本质上是同一个页面
  // 因此需要业务方传入一个处理函数, 根据当前url解析出真实的页面类型(例如: 二手房列表/经纪人详情页), 以便灯塔系统对错误来源进行分类
  // 回调函数说明
  // 传入参数 => window.location
  // 返回值 => 对应的的页面类型(50字以内, 建议返回汉字, 方便查看), 默认是返回当前页面的url
  getPageType: function(location){ return `${location.host}${location.pathname}` }
})

/**
* JS错误主动上报接口
* @param {String} errorName 错误类型, 推荐格式 => "错误类型(中文)_${具体错误名}", 最长200字
* @param {String} url       错误对应的url,  location.host + location.pathname, 不包括get参数(get参数可以转成json后放在detail中), 最长200个字
* @param {Object} extraInfo 附属信息, 默认为空对象
*                 => extraInfo 中以下字段填写后可以在后台错误日志列表中直接展示
*                 =>        trace_url         // [String]请求对应的trace系统查看地址, 例如: trace系统url + trace_id
*                 =>        http_code         // [Number]接口响应的Http状态码，
*                 =>        during_ms         // [Number]接口响应时长(毫秒)
*                 =>        request_size_b    // [Number]post参数体积, 单位b
*                 =>        response_size_b   // [Number]响应值体积, 单位b
*                 => 其余字段会作为补充信息进行展示
*/

function notify (errorName = '', url = '', extraInfo = {}) 

// demo：
log.notify(
 'response code',         // 错误名, 不能超过200个字符
 'a.b.com',               // url地址, 不能超过200个字符
 {
  // 下列字段填写后会被统一展示 
  'trace_url':'trace.test.com/123456',
  'http_code':200,        
  'during_ms':10,         
  'request_size_b':1024,  
  'response_size_b':1024, 
  
  // 以下字段作为补充说明进行展示
  ... // 任意 key => value
 })