webfunny监控系统如何自定义上报

一步一个脚印一个坑 1年前 ⋅ 2331 阅读
ad

 

Hello,大家好,欢迎使用webfunny前端监控系统,这里将讲解如何自定义上报日志

webfunny支持自定义上报接口,只要安装webfunny需要的数据格式,就可以进行上报了。

upMyLog - 自定义上报接口

正常情况下,upMyLog完整的上报信息如下:

// 日志可以是数据类型,一次性上报多个日志
// content-type: application/x-www-form-urlencoded; charset=UTF-8
    $.ajax({
      url: "http://localhost:9011/wfMonitor/upMyLog",
      type: "post",
      data: {logs: [param, param]},
      dataType: "JSON"
    })

 

自定义上报的日志也需要归属于一个项目,获取到webMonitorId,就是对应的应用ID,可以在项目设置页获取。

webfunny未来保证数据的安全性,传输数据不会使用明文,所以需要准备好base64加密方法。下方是JS定义一个做base64加密方法(其他平台的可以自行搜索):

    var b64EncodeUnicode = function(str) {
      try {
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
          return String.fromCharCode("0x" + p1)
        }))
      } catch (e) {
        return str
      }
    }

注意:上报的数据请不要缺失字段哦,没有值的就用空字符串填充吧

一、上报PV/UV信息

日志格式及上报方法:

const pvInfo = {
      webMonitorId: "webfunny954", //【非空】探针标识
      userId: "123", //【非空】 用户的id
      uploadType: "CUSTOMER_PV", //【非空】 日志类型
      happenTime: new Date().getTime(), //【非空】 日志产生时间的毫秒数
      customerKey: window.webfunny && window.webfunny.getCustomerKey(), //【非空】 用户的唯一标识, 可以用(userId + 日期)拼接, 用户启动程序就将customerKey的值存放在本地,下次进入取本地的customerKey
      completeUrl: b64EncodeUnicode(encodeURIComponent(window.location.href)), //【非空】 页面的url

      newStatus: "n_uv", //【非空】 n_uv(新用户)、o_uv(老用户今天首次进入)、o(老用户今天非首次进入)
      projectVersion: b64EncodeUnicode("1.1.1"), // 项目发布的版本号

      monitorIp: "101.227.66.77",
      deviceName: "android", // 设备名称
      deviceSize: "1080x760", // 设备尺寸
      os: "MacOs", // 系统信息
      browserName: "chrome",  // 浏览器名称
      browserVersion: "21.1.12", // 浏览器版本
    }
    // 日志可以是数据类型,一次性上报多个日志
    // content-type: application/x-www-form-urlencoded; charset=UTF-8
    $.ajax({
      url: "http://localhost:9011/wfMonitor/upMyLog",
      type: "post",
      data: {logs: [pvInfo]}, // 可一次上传多个日志
      dataType: "JSON"
    })

二、上报错误日志

日志格式及上报方法:

const errorInfo = {
        webMonitorId: "webfunny954", //【非空】探针标识
        userId: "123", //【非空】 用户的id
        uploadType: "JS_ERROR", //【非空】 日志类型
        happenTime: new Date().getTime(), //【非空】 日志产生时间的毫秒数
        customerKey: window.webfunny && window.webfunny.getCustomerKey(), //【非空】 用户的唯一标识, 可以用(userId + 日期)拼接, 用户启动程序就将customerKey的值存放在本地,下次进入取本地的customerKey
        completeUrl: b64EncodeUnicode(encodeURIComponent(window.location.href)), //【非空】 页面的url

        infoType: "on_error", //【非空】 错误类型  on_error(代码报错)、console_error(自定义异常)
        simpleErrorMessage: b64EncodeUnicode("simple errorMsg"), //【非空】错误信息摘要(一般要简短)
        errorMessage: b64EncodeUnicode("errorMsg"), //【非空】错误信息
        errorStack: b64EncodeUnicode("errorObj"), //【非空】错误堆栈
        projectVersion: b64EncodeUnicode("1.1.1"), // 项目发布的版本号

        monitorIp: "", // ip地址
        deviceName: "android", // 设备名称
        os: "MacOs", // 系统信息
        browserName: "chrome",  // 浏览器名称
        browserVersion: "21.1.12", // 浏览器版本
      }

      // 日志可以是数据类型,一次性上报多个日志
      // content-type: application/x-www-form-urlencoded; charset=UTF-8
      $.ajax({
        url: "http://localhost:9011/wfMonitor/upMyLog",
        type: "post",
        data: {logs: [errorInfo]},
        dataType: "JSON"
      })

三、上报接口日志

日志格式及上报方法:

const httpLogInfo = {
      webMonitorId: "webfunny954", //【非空】探针标识
      userId: "123", //【非空】 用户的id
      uploadType: "HTTP_LOG", //【非空】 日志类型
      happenTime: new Date().getTime(), //【非空】 日志产生时间的毫秒数
      customerKey: window.webfunny && window.webfunny.getCustomerKey(), //【非空】 用户的唯一标识, 可以用(userId + 日期)拼接, 用户启动程序就将customerKey的值存放在本地,下次进入取本地的customerKey
      completeUrl: b64EncodeUnicode(encodeURIComponent(window.location.href)), //【非空】 页面的url

      httpUrl: b64EncodeUnicode(encodeURIComponent("请求地址")), //【非空】 请求地址,  // 接口请求地址
      status: "200", //【非空】 接口请求的状态码,非200的状态码会归类在错误接口里
      statusText: "ok", //【非空】 请求状态
      statusResult: "request", //【非空】 两个类型:「发起请求 request」、「请求返回 response」
      requestText: b64EncodeUnicode("请求参数的JSON字符串"), //【非空】 接口返回值
      responseText: b64EncodeUnicode("接口返回值的JSON字符串"), //【非空】 接口返回值
      loadTime: 100, //【非空】 接口耗时的毫秒数

      monitorIp: "", // ip地址
      deviceName: "android", // 设备名称
      os: "MacOs", // 系统信息
      browserName: "chrome",  // 浏览器名称
      browserVersion: "21.1.12", // 浏览器版本
    }

    // 日志可以是数据类型,一次性上报多个日志
    // content-type: application/x-www-form-urlencoded; charset=UTF-8
    $.ajax({
      url: "http://localhost:9011/wfMonitor/upMyLog",
      type: "post",
      data: {logs: [httpLogInfo]},
      dataType: "JSON"
    })

四、上报自定义日志(仅用于补全用户行为轨迹,不做数据分析)

const cusBehaviorInfo = {
      webMonitorId: "webfunny954", //【非空】探针标识
      userId: "123", //【非空】 用户的id
      uploadType: "CUSTOMIZE_BEHAVIOR", //【非空】 日志类型
      happenTime: new Date().getTime(), //【非空】 日志产生时间的毫秒数
      behaviorType: "click", //【非空】行为类型描述,如:点击了
      behaviorResult: "success", // 【非空】行为产生的结果。传值为:success 或 failed
      description: "" // 自定义行为描述
    }

    // 日志可以是数据类型,一次性上报多个日志
    // content-type: application/x-www-form-urlencoded; charset=UTF-8
    $.ajax({
      url: "http://localhost:9011/wfMonitor/upMyLog",
      type: "post",
      data: {logs: [cusBehaviorInfo]},
      dataType: "JSON"
    })

 

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 一步一个脚印一个坑
    共发布119篇文章 获得4个收藏
全部评论: 0