webfunny如何上报自定义日志

前端技术日新月异，搭建前端的技术平台更是层出不穷，仅仅靠webfunny的一套探针代码，可能无法覆盖更多前端的监控场景，所以我们给webfunny增加了上报自定义日志的接口。

理论上，我们可以监控任何前端平台的日志了。用户自己监控并生成日志，上报给webfunny，由webfunny给你分析日志的数据。

首先、创建一个项目

自定义上报的日志也需要归属于一个项目，不同的是，探针是自动生成日志上报的，自定义是手动获取日志上报的。其中webMonitorId就是对应项目的标识。上报后的日志数据，就可以在这个项目中看到了

下边来看下如何上报自定义日志：

首先需要定义一个做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
      }
    }

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

一、上报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:8011/server/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（自定义异常）
        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:8011/server/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:8011/server/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:8011/server/upMyLog",
      type: "post",
      data: {logs: [cusBehaviorInfo]},
      dataType: "JSON"
    })

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