前端技术日新月异,搭建前端的技术平台更是层出不穷,仅仅靠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"
})
注:本文版权归作者所有,转载请注明出处以及本文地址