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

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"
    })

注：本文版权归作者所有，转载请注明出处以及本文地址