返回介绍

Webfunny 前端监控系统

Webfunny 埋点系统

监控系统如何自定义上报

发布于 2023-08-08 23:14:10 字数 5527 浏览 0 评论 0 收藏 0

这里将讲解如何自定义上报日志

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

upMyLog - 自定义上报接口

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

// 日志可以是数据类型,一次性上报多个日志
// 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"
    })

自定义上报的日志也需要归属于一个项目,获取到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: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"
    })

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文