少儿编程免费网站,PHP做的网站能容纳多少人,网站前台 后台,wordpress 添加付款现成的SDK
SentryFun Debug
需要监控什么#xff1f; 错误统计 记录我们代码发布到线上各种奇奇怪怪的错误 行为日志埋点 记录用户行为#xff0c;比如#xff1a;分析用户浏览时间比较长的页面有哪些#xff0c;常常点击的有哪些#xff0c;可以做 相应的推荐 PV/UV统…现成的SDK
SentryFun Debug
需要监控什么 错误统计 记录我们代码发布到线上各种奇奇怪怪的错误 行为日志埋点 记录用户行为比如分析用户浏览时间比较长的页面有哪些常常点击的有哪些可以做 相应的推荐 PV/UV统计 记录用户访问页面的次数 PV访问的操作的次数UV访问页面的用户多少
前端监控的主要流程
功能拆分 错误监控
错误监控即当代码发生错误时比如同步错误异步错误promise错误资源加载错误时我们需要捕获到错误然后上报给后端。
上报到后端简单发送请求即可。那如何捕获到错误我们下面进行讨论
错误类型 语法错误 语法错误一般在可发阶段就可以发现比如常见的单词拼写错误中英文符号错误等。注意语法错误是无法被try catch捕获的因为在开发阶段就能发现所以一般不会发布到线上环境。 try {let name heima; // 少一个单引号console.log(name);
} catch (error) {console.log(----捕获到了语法错误-----);
}同步错误 同步错误指的是在js同步执行过程中的错误比如变量未定义是可以被try catch给捕获到的 try {const name heima;console.log(nam);
} catch (error) {console.log(------同步错误-------)
}异步错误 异步错误指的是在setTimeout等函数中发生的错误是无法被try catch捕获到的 try {setTimeout(() {undefined.map();}, 0);
} catch (error) {console.log(-----异步错误-----)
}异步错误的话我们可以用window.onerror来进行处理这个方法比try catch要强大很多 /*** param {String} msg 错误描述* param {String} url 报错文件* param {Number} row 行号* param {Number} col 列号* param {Object} error 错误Error对象*/window.onerror function (msg, url, row, col, error) {console.log(出错了);console.log(msg);console.log(url);console.log(row);console.log(col);console.log(error);
};promise错误 在 promise 中使用 catch 可以捕获到异步的错误但是如果没有写 catch 去捕获错误的话 window.onerror 也捕获不到的所以写 promise 的时候最好要写上 catch 或者可以在全局加上 unhandledrejection 的监听用来监听没有被捕获的promise错误。 window.addEventListener(unhandledrejection, function(error){console.log(捕获到异常, error);
}, true);资源加载错误 资源加载错误指的是比如一些资源文件获取失败可能是服务器挂掉了等原因造成的出现这种情况就比较严重了所以需要能够及时的处理网路错误一般用 window.addEventListener 来捕获。 window.addEventListener(error, (error) {console.log(error);
}, true);用户埋点统计 埋点就是需要记录用户的某些行为比如点击按钮我们需要记录用户点击了哪个按钮然后进行上报。这样做的作用是我们得到的数据可以进行一些分析。PS:淘宝首页分类需要知道哪个分类点击次数最多即哪个分类最火。 手动埋点 手动埋点就是手动的去出发上报函数 // 方式1
buttononClick{() {// 业务代码tracker(click, 用户去支付);// tracker(visit, 访问新页面);// tracker(submit, 提交表单);}}
手动埋点/button// 方式2
button data-target支付按钮onClick{() {// 业务代码}}
手动上报/button优点可控性强可以自定义上报具体的数据。缺点对业务代码侵入性强如果有很多地方需要埋点就得一个一个手动的去添加埋点代码。
无痕埋点 无痕埋点是为了解决手动埋点的缺点实现一种不用侵入业务代码就能在应用中添加埋点监控的埋点方式。 button onClick{() {// 业务代码
}}自动埋点/button// 自动埋点实现
function autoTracker () {// 添加全局click监听document.body.addEventListener(click, function (e) {const clickedDom e.target;// 获取data-target属性值let target clickedDom?.getAttribute(data-target);if (target) {// 如果设置data-target属性就上报对应的值--手动埋点tracker(click, target);} else {// 如果没有设置data-target属性就上报被点击元素的html路径const path getPathTo(clickedDom);tracker(click, path);}}, false);
};优点不用侵入务代码就能实现全局的埋点。缺点只能上报基本的行为交互信息无法上报自定义的数据上报次数多服务器性能压力大。
PV统计
history路由 history路由是由window.histroy api来实现的 - istory.back(); // 返回上一页和浏览器回退功能一样 - history.forward(); // 前进一页和浏览器前进功能一样 - history.go(); // 跳转到历史记录中的某一页, - history.pushState(); // 添加新的历史记录 - history.replaceState(); // 修改当前的记录项
/*** 重写pushState和replaceState方法* param {*} name * returns */
const createHistoryEvent function (name) {// 拿到原来的处理方法const origin window.history[name];return function(event) {if (name replaceState) {const { current } event;const pathName location.pathname;if (current pathName) {let res origin.apply(this, arguments);return res;}}let res origin.apply(this, arguments);let e new Event(name);e.arguments arguments;window.dispatchEvent(e);return res;};
};window.history.pushState createHistoryEvent(pushState);
window.history.replaceState createHistoryEvent(replaceState);function listener() {const stayTime getStayTime(); // 停留时间const currentPage window.location.href; // 页面路径lazyReport(visit, {stayTime,page: beforePage,})beforePage currentPage;
}// history.go()、history.back()、history.forward() 监听
window.addEventListener(popstate, function () {listener()
});// history.pushState
window.addEventListener(pushState, function () {listener()
});// history.replaceState
window.addEventListener(replaceState, function () {listener()
}); history路由无法监听到pushState和replaceState所以我们冲洗了一个方法并用windows.dispatch创建了一个自定义监听事件。
hash路由 url上hash的改变会出发 hashchange 的监听所以我们只需要在全局加上一个监听函数在监听函数中实现采集并上报就可以了。但是在react和vue中对于hash路由的跳转并不是通过 hashchange 的监听实现的而是通过 pushState 实现所以还需要加上对 pushState 的监听才可以。
export function hashPageTrackerReport() {let beforeTime Date.now(); // 进入页面的时间let beforePage ; // 上一个页面// 上报function listener() {const stayTime getStayTime();const currentPage window.location.href;lazyReport(visit, {stayTime,page: beforePage,})beforePage currentPage;}// hash路由监听window.addEventListener(hashchange, function () {listener()});
}UV统计
在SDK初始化的时候上报即可 UV统计的是一天内访问该网站的用户数 /*** 初始化配置* param {*} options */
function init(options) {... // 加载配置report(user, 加载应用); // uv统计
}合并上报
对于无痕埋点来说一次点击就进行一次上报会对服务器造成很大的压力所以我们需要合并一下请求
// cache.js
const cache [];export function getCache() {return cache;
}export function addCache(data) {cache.push(data);
}// lazyReport.js
export function lazyReport(type, params) {// ....const data getCache();if (delay 0) { // delay0相当于不做延迟上报report(data);return;}if (data.length 10) { // 数据达到10条上报report(data);clearTimeout(timer);return;}clearTimeout(timer);timer setTimeout(() { // 合并上报report(data);}, delay);
}
