前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧
监控的内容我们已经说了很多了，那么我们一般上报一条监控内容都具体包含什么数据呢
今天就来详细列举一下
本文列出的数据会这样说明
1、有什么数据
2、作用是什么
3、怎么获取
我会给每个具体分个类，按分类来逐个说明
数据大概分为下面几类
1、监控点数据
2、用户信息
3、设备信息
4、项目信息
5、日志信息
下面就按这个分类来说明里面包含的详细数据
这个就是每个监控点类型相应的数据，像接口请求信息，静态资源，首屏测速等等
具体可以在相应的文章中查看
3、页面错误监控
4、单页首屏测速
所以这里就不一一列举了，本文主要是讲一些公共的监控数据
不过这里简单说个接口信息的监控数据
| cgi | 接口链接 |
| status | 状态码 |
| body | 请求体 |
| responce | 响应 |
| reqHeader |
请求header |
| code |
接口状态码 |
| cost_time |
接口耗时 |
包括用户的特征，唯一标识等等
uin
用户的账号信息。如果是QQ 登陆，就是QQ 号，微信登陆就是 微信uin（不是微信号），或者你们公司自己登录体系下的账号
下面是获取 qq 或者 微信uin
function getCookie(name) {
const cookieReg = new RegExp(`(^| )${name}=([^;]*)(;|$)`);
const matches = document.cookie.match(cookieReg);
return !matches ? '' : decodeURIComponent(matches[2]);
}
function getQQUin() {
const uin = getCookie('p_luin') || getCookie('p_uin') || getCookie('uin');
return uin ? parseInt(uin.replace(/[^\d]/g, ''), 10).toString() : null;
}
function getWeixinUin() {
const uidUin = getCookie('uid_uin');
return uidUin || null;
}微信uin 是创建微信时分配的独有的uin，不是微信号，因为微信号能改，并不唯一。大概像这样 14411xxxxxxxx134
地区
国家、省、市 这些位置信息，在服务端通过客户端ip 做解析
可以使用 npm 包 node-ip2region 来解析
简单使用如下
const searcher = require('node-ip2region').create();
const res = searcher.btreeSearchSync('120.68.22.68');
console.log(res);返回结果如下
{
city: 0,
region: '中国|0|新疆|伊犁|电信',
}具体可以看
设备标识 - aid
页面初始化的时候，会给用户分配一个尽可能唯一的id标识，存在localstorage 中。
可以使用 uuid 生成，或者自己写一个
const getRandomId = () => {
const aid = 'xxxxxxxx-xxxx-3xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0;
const v = c === 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
return aid;
}会话标识 - sessionId
同样也是唯一的id 标识，但是表示的是会话id，存在 sessionStorage 中。
比如你这次打开页面，为你生成一个，接着你的任何操作都会带上这个id。
下次再打开页面时，会重新生成。
生成方式和 aid 一样
关于设备信息的数据就比较多了，对于前端比较重要，前端看重兼容性，各端的支持五花八门，定位问题需要考虑这一点
设备信息，一般我们可以通过 navigator.userAgent 来获取，拿到以下这些字段
| os | 系统以及版本 |
| brand | 品牌（苹果，华为，小米 等） |
| device |
产品型号（Huawei P30、Mate40...等等） |
| engine | 浏览器渲染引擎 |
| browser | 浏览器以及版本 |
具体我们会使用一个 npm 包来解析拿到相应的数据
https://github.com/faisalman/ua-parser-js
使用方式如下
const parser = require('ua-parser-js');
const sliceVersion = (version, count = 2) => {
if (!version) return '';
return version.split('.').slice(0, count).join('.');
};
const parserUa = (ua) => {
const { browser = {}, os = {}, engine = {}, device = {} } = parser(ua);
return {
browser: browser.name
? `${browser.name}(${sliceVersion(browser.version)})`
: '',
device: device.vendor ? `${device.vendor} - ${device.model || ''}` : '',
os: os.name ? `${os.name} - ${os.version || ''}` : '',
engine: engine.name
? `${engine.name}(${sliceVersion(engine.version)})`
: '',
brand: device.vendor || '',
};
};比如 userAgent 是
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
可以解析得到
关于渲染引擎，大概有这么几种
1、IE浏览器 (Trident内核)
2、Firefox (Gecko内核)
3、Safari (Webkit内核）
4、Chrome (Blink内核)
5、Opera (原为Presto内核，现为Blink内核)
6、QQ/WX (原为Webkit内核，现为Blink内核)
网络状态 netType
用户网络状态很重要，有可能用户加载慢时因为网络不行，所以需要记录这个指标
具体先从 navigator.userAgent 中获取，因为微信会将网络类型注入 ua。
看一个 wx 的 userAgent 例子
Mozilla/5.0 (Linux; Android 10; VOG-AL00 Build/HUAWEIVOG-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/89.0.4389.72 MQQBrowser/6.2 TBS/045811 Mobile Safari/537.36 MMWEBID/2264 MicroMessenger/8.0.11.1980(0x28000B3B) Process/tools WeChat/arm64 Weixin NetType/WIFI Language/zh_CN ABI/arm64
其次我们再从 navigator.connection 中获取，但是兼容性有点问题，iOS 不支持这个。
代码如下
const NetworkTypeNum = {
unknown: 'unknown',
wifi: 'wifi',
net2g: '2g',
net3g: '3g',
net4g: '4g',
net5g: '5g',
net6g: '6g',
};
const parseNumberType = (net) => {
net = String(net).toLowerCase();
if (net.indexOf('4g') >= 0) return NetworkTypeNum.net4g;
if (net.indexOf('wifi') >= 0) return NetworkTypeNum.wifi;
if (net.indexOf('5g') >= 0) return NetworkTypeNum.net5g;
if (net.indexOf('6g') >= 0) return NetworkTypeNum.net6g;
if (net.indexOf('3g') >= 0) return NetworkTypeNum.net3g;
if (net.indexOf('2g') >= 0) return NetworkTypeNum.net2g;
return NetworkTypeNum.unknown;
};
const getNetworkType = function () {
let netType = '';
// 优先从 ua 中获取（微信会将网络类型注入 ua）
const arr = navigator.userAgent.match(/NetType\/(\w+)/);
if (arr) {
[, netType] = arr;
} else if (navigator.connection) {
// navigator.connection 存在兼容性问题，当前不支持 ios
netType = navigator.connection.effectiveType || navigator.connection.type;
}
if (!netType) {
netType = 'unknown';
}
const net = parseNumberType(netType);
return;
}客户端 ip
客户端ip 需要在服务端获取了
function getClientIp(req) {
try {
const xff = (
req.headers['X-Forwarded-For']
|| req.headers['x-forwarded-for']
|| ''
).split(',')[0].trim();
return xff
|| req.connection.remoteAddress
|| req.socket.remoteAddress
|| req.connection.socket.remoteAddress;
} catch (ex) {
}
return '0.0.0.0';
}网络运营商 ISP
就是 中国移动，联通，电信 那些数据，在服务端通过 ip 解析拿到，和上面解析省市区一样
可以使用 npm 包 node-ip2region 来解析
简单使用如下
const searcher = require('node-ip2region').create();
const res = searcher.btreeSearchSync('120.68.22.68');
console.log(res);返回结果如下，最后一个就是运营商
{
city: 0,
region: '中国|0|新疆|伊犁|电信',
}这一类数据可以帮助你查看用户画像，比如建立像下面这些可视化图
主要是页面相关的信息
页面 url
就是页面url 。可以便于根据 url 定位出所有数据，包括错误、资源、请求、性能 等数据，全方位评测出一个页面的质量。
环境 env
一般环境分为 local 本地开发环境、test 线上测试环境、pre 预发布环境、prod 正式环境。
告警都是设置正式环境，测试环境错误日志可不要浪费时间排查
项目 project
团队有很多项目，上报的数据肯定要带上项目名。便于你排查过滤日志
监控npm包版本 sdk_version
项目引入的 监控 sdk 的版本也要记录。
如果因为sdk 导致日志记录的数据有问题，sdk 修复更新了版本之后，还存在有问题的日志。需要查看它依赖的是否是更新之后的版本
项目更新标识 build_time | project_version
这个很重要，作用和上面差不多
比如你线上出现了一个很严重的bug，已经触发告警了。
你修复之后，需要看线上运作情况
因为仍然会存在错误日志，所以需要一个字段去筛选修复之后的线上日志。
可以使用项目打包构建的世界，可以使用项目版本号。不过考虑到一般的业务项目，不太会更新版本号
所以最好是在构建配置中注入一个构建时间变量，供SDK 获取上报
日志等级 level
在 离线日志 中说过，日志一般分有等级，来区分重要性，是否需要请求上报，存到本地作为离线日志
const LOG_LEVEL = {
trace: 10,
debug: 20,
info: 30,
warn: 40,
error: 50,
fatal: 60,
};日志类型 log_type
上报的日志有很多类型，就像我们之前说的各种监控点一样
1、离线日志
2、页面错误（细分很多种）
3、接口信息
4、静态资源（细分很多种）
5、首屏时间
等等
const LOG_TYPE = {
pv: 'pv',
promise_error: 'promise_error',
offline: 'offline',
cgi_speed: 'cgi_speed',
resource_speed: 'resource_speed',
....
}日志时间 log_time
日志发生的时间，一般是时间戳 Date.now()
日志信息 message
一般用于项目内自定义上报存放文字信息的，便于查找对应日志
比如上报 message="报名按钮点击"，你就会搜索这个条件，看活动上线一共有多少人报名点击
日志数据 addition
一般用于项目内自定义上报存放 调试数据，便于排查哪个环节出了问题，类似于debug一样，是否在处理数据过程中出现了问题
比如说项目中 catch 拿到的error，或者 表单提交时的数据。
你可能会说，提交的数据，我直接看接口请求的body 不就好了吗，但是其实有时你的函数处理出问题，甚至都没走到请求的这一步。
数据出问题的概率是很大的，不是像你本地开发调试一样规规矩矩的数据，每一步的数据处理都要记录下来，特别是那种format 的处理函数，入口和出口的数据都必须要记录上报
看完上面这些字段，可以基本清楚，字段的设置无非是为了方便你筛选合适日志帮助排查，尽可能帮助还原问题场景，实打实从数据定位问题，不要靠猜想，靠自己偶然复现
鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵， 如果有任何描述不当的地方，欢迎后台联系本人，领取红包
本文分享自微信公众号 - 神仙朱（skying-zhu）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。