绍兴网站建设专业的公司,如何建立网站详细流程,做网站与做软件,怎样下载广安同城app前文对前端监控进行了简单介绍#xff0c;起因是因为当前做的一个需求#xff0c;老板要看当前项目的uv、pv信息。其实这是非常简单的统计。 但在最开始接到这个需求#xff0c;却难倒我了。 现在进行简单的复盘#xff0c;记录一下实现方法。
一、数据记录
用户行为从大…前文对前端监控进行了简单介绍起因是因为当前做的一个需求老板要看当前项目的uv、pv信息。其实这是非常简单的统计。 但在最开始接到这个需求却难倒我了。 现在进行简单的复盘记录一下实现方法。
一、数据记录
用户行为从大类上主要分为两个方面
① 页面浏览行为 ② 操作行为
统一埋点函数
基于此共识首先封装一个统一的埋点函数代码如下
export const captureMessage async (type: browse | action, content: string, title?: string) {// 省略了判断开发环境时在本地打印的代码const data { type, content, title };// 这里调用的是统一封装的请求函数await post(userlog, data, { Content-Type: application/json; charsetutf-8 });
};
然后采用的埋点方式是在上文中提到的前端监控简介_艾米栗写代码的博客-CSDN博客手动埋点。
页面浏览埋点
我们最初的埋点比较简单主要是对 url 的埋点。而在 vue 中url 的跳转主要是通过路由实现的因此只需要在全局检测路由的变化。代码如下 watch(() route.fullPath, () {const title (route.meta?.title ?? ) as stringconst url: string (route as any).fullPath || route.pathcaptureMessage(browse, url, title)})
操作行为埋点
而操作行为的埋点同理只需在需要监控的操作事件响应函数中插入captureMessage 函数即可。
二、打补丁
问题分析
以上是我们最开始的记录方式原则上这样记录是能够满足后续的分析需求的。
注意这也只是理论上可行。 但后续产品提出要分析某个页面下不同子页面的pv、uv 情况。但项目当前的情况是这个页面下的URL极其混乱无法进行统一分析。为了满足分析需要需要对这个页面下的 URL 进行统一化。
具体说来页面的URL 为 /report。
进来之后的初始页面默认为子页面 1这里我们设 子页面1名称为 table1.
在切换报表时其 URL 会响应为子页面名称 即 /report/tableName。
但除此之外该页面下还存在另外三种URL类型。
类型1ID 类的 URL 是报表最开始的迭代方式其ID 为 数字即 /report/numberID
类型2模板类的URL 记录的是某一子页面下的用户选择项。其模板ID通过MD5生成URL 为 /report/templateID。
类型3具体信息类从其他页面跳转到该子页面携带的是具体请求信息。其URL 为
/report?query***(query 为对象进行 encode 编码)
为了满足报表统计的需要需要对不同URL进行统一而统一的方式为在 当前URL 的后面加上 /table/tableName 。
即
/report -- /report/table1
/report/tableName -- /report/tableName (保持不变)
/report/numberID -- /report/numberID/table/tableName
/report/templateID -- /report/templateID/table/tableName
/report?query*** -- /report?query***/table/tableName
numberID和 templateID 对应的tableName在对应的数据库中可以查询到。
描述完了要做的事情上代码咯
问题解决补丁
代码
export const getEventTableUrl async (content:string) {let table const eventUrl content.replace(/report, )// 情况1 content 为 report/table/tableNameif(eventUrl.startsWith(/table)){table }else if(eventUrl ) {// 情况2 content 仅为 /report table DEFAULT_QUERY_TABLE}else if(eventUrl.includes(?)) {// 情况3: content 为/report?query*** 参数中有query解析query 参数获得queryKey// 匹配query参数const matchContent eventUrl.match(/[?]query([^/]*)?/)table getTableFromQuery(matchContent ? matchContent[1] : )}else {// 情况4content为/report/***(id) 从模板id 或 eventid 中获得querykeytable await getTableFromTemplate(eventUrl.split(/)[1])}if(!table) return content;return ${content}/table/${table}
}
统一代码过程中有两个小细节花费了较多时间。
细节1 拿到 URL 中的 query 参数内容
如何拿到get 请求中的参数信息这是一个老生长谈的话题了。解决方法也是多种多样在网上一搜有人暴力破解和匹配的有人调用函数的有人用正则的。
比如 JavaScript 正则表达式获取url后的内容第一个问号后的内容_白菜new的博客-CSDN博客
而我最开始的想法是寻找 node 中是否提供了通用的解决方案。
哎嘿还真的有
MDN官方文档
URL API - Web APIs | MDN
来自鑫旭大佬的详细介绍
JS URL()和URLSearchParams() API接口详细介绍 « 张鑫旭-鑫空间-鑫生活
实例代码如下
//截取问号之后的字符串
const search eventUrl.match(/\?(\S*)/)
// 获取query参数
const queryParam new URLSearchParams(search ? search[0] : ).get(query) 但是我们组长在review 这段代码之后他觉得这样不够简洁应该直接用正则进行匹配。。。
于是迫于”强权“之下代码变成了这样
eventUrl.match(/[?]query([^/]*)?/)
虽然正则看起来很简洁可是大家的正则水平真的能一眼看懂这行代码是在干嘛么
我经验少咱也不知道是不是自己太菜我只能加上注释为后来的人默默助力。。。 但是呢一味抗拒对于自己的成长是不利的在此之下我还是对正则进行了一番研究。
我发现正则可以在 match、replace 等都可以使用。
可参考文章 正则表达式和字符串的方法
细节2 解析 query 参数
在解析上面提到的带有 query 参数的 URL 时发生了两个意外情况。
1、无法解码
前端基础-encodeURIComponent原理 | 华仔的博客
2、无法将string转化为对象
这是因为用户可以对url进行编辑这就有可能导致记录的query 可能信息不全。甚至query中有一些会解析出错的消息比如说有一些无法解码的 号。
因此在解码和转化为对象的时候需要进行错误捕获。
/** 解析string为json */
export const parseString (str:string): Recordstring,any| null {try {return JSON.parse(str)} catch {return null}
}/** 解析 URI */
export const decodeUri (uri: string) {try {return decodeURIComponent(uri)} catch {return }
} 通过以上的方式我们就可以统计到需要进行数据分析的元信息了。
接下来就是进行数据分析了。
三、统计信息
这一部分我将用另外的篇幅去总结。
