webfunny如何上报自定义日志

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

前端技术日新月异,搭建前端的技术平台更是层出不穷,仅仅靠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"
    })

关于Webfunny

Webfunny专注于微信小程序、H5前端、PC前端线上应用实时监控,实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,容器化部署,可支持千万级PV的日活量!

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