funny-sdk v2.2.8

发版 Check List

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

安装与使用

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

import dt from 'funny-sdk'

// 初始化配置
function getUuid() {
  let key = 'funnu-sdk-uuid'
  if (localStorage.getItem(key)) return localStorage.getItem(key)

  let id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
  localStorage.setItem(key, id)
  return id
}
dt.set({
  pid: 'project_id', // [必填]项目id, 由项目组统一分配
  uuid: getUuid(), // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
  ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串

  record: {
    time_on_page: true, // 是否监控用户在线时长数据, 默认为true
    performance: true, // 是否监控页面载入性能, 默认为true
    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}`
  }
})

script 标签引入 =>

<script>
  window.dt &&
    dt.set({
      pid: 'project_id', // [必填]项目id, 由项目组统一分配
      uuid: '', // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
      ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串

      is_test: false, // 是否为测试数据, 默认为false(测试模式下打点数据仅供浏览, 不会展示在系统中)
      record: {
        time_on_page: true, // 是否监控用户在线时长数据, 默认为true
        performance: true, // 是否监控页面载入性能, 默认为true
        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}`
      }
    })
</script>

自动错误监控使用说明

浏览器中对脚本报错信息有跨域限制, 通过标签引入 js 时, 需要在所有要监控的 script 标签中添加 crossorigin="anonymous" 属性后, 才能获取到错误堆栈数据, 否则只能看到Script error的提示 有些项目用域名到 CDN 的脚本资源不同域，造成不同域的脚本报错无法捕获更多详细信息

解决： @vue/cli 脚手架项目 配置 vue.config.js

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  // 入口模块与splitChunks模块
  crossorigin: 'anonymous',
  chainWebpack: (config) => {
    // 异步模块
    config.output.crossOriginLoading('anonymous');
  },
});

webpack 项目 配置 webpack.config.js

const CorsPlugin = require('@vue/cli-service/lib/webpack/CorsPlugin.js');

module.exports = {
  output: {
    // 异步模块
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new CorsPlugin({
      publicPath: '项目的publicPath',
      crossorigin: 'anonymous',
      integrity: false,
    }),
  ],
};

主动打点方法说明

产品指标

/**
 * 用户点击行为上报，用于统计菜单点击量
 * @param {String}  clickBehavior [必填]用户行为标识符, 用于统计菜单点击量 , 最多50字符( menu/click/button/...)
 * @param {String} name [必填]用户行为名称, 和clickBehavior对应, 用于展示, 建议传中文, 最多50字符
 * @param {String} url  [可选]用户点击页面url, 可以作为辅助信息, 最多200字符
 */
dt.behavior(clickBehaviorType, name, url)

//demo:
dt.behavior(
'/abnormal_monitor/error_dashboard',
'-页面性能',
window.location.href
)


/**
 * 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：
dt.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
  })

如何确认埋点成功？

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

例如这个 URL: 点我

对应打点信息为

d: {
  "type": "error",
  "code": 3,
  "detail": {
    "error_no": 122,
    "http_code": "",
    "during_ms": "",
    "url": "a.b.c",
    "request_size_b": "",
    "response_size_b": "",
    "reason": "ERR_BLOCKED_BY_CLIENT"
  },
  "extra": {},
  "common": {
    "pid": "platfe",
    "uuid": "f770330d-b2c7-4bfa-94fb-b31338f65a85",
    "ssid": "df9c0245-005d-479c-81e0-7daa94c0681d",
    "ucid": 1000000023100106,
    "timestamp": 1537431733127
  },
  "msg": ""
}

数据更新周期