网页监控的方法分享怎样网页监控( 二 )

2022-09-16 云知道

一些简化后的检测代码，给大家作为参考：
// 页面 JavaScript 代码
if (navigator.serviceWorker.controller !== null) {
let HEARTBEAT_INTERVAL = 5 * 1000; // 每五秒发一次心跳
let sessionId = uuid();
let heartbeat = function () {
navigator.serviceWorker.controller.postMessage({
type: ‘heartbeat’,
id: sessionId,
data: {} // 附加信息，如果页面 crash，上报的附加数据
});
}
window.addEventListener(“beforeunload”, function() {
navigator.serviceWorker.controller.postMessage({
type: ‘unload’,
id: sessionId
});
});
setInterval(heartbeat, HEARTBEAT_INTERVAL);
heartbeat();
}

sessionId 本次页面会话的唯一 id；postMessage 附带一些信息，用于上报 crash 需要的数据，比如当前页面的地址等等。

const CHECK_CRASH_INTERVAL = 10 * 1000; // 每 10s 检查一次
const CRASH_THRESHOLD = 15 * 1000; // 15s 超过15s没有心跳则认为已经 crash
const pages = {}
let timer
function checkCrash() {
const now = Date.now()
for (var id in pages) {
let page = pages[id]
if ((now – page.t) > CRASH_THRESHOLD) {
// 上报 crash
ｄｅｌｅｔｅ pages[id]
}
}
if (Object.keys(pages).length == 0) {
clearInterval(timer)
timer = null
}
}
worker.addEventListener(‘message’, (e) => {
const data = https://www.jinnalai.com/fenxiang/e.data;
if (data.type === ‘heartbeat’) {
pages[data.id] = {
t: Date.now()
}
if (!timer) {
timer = setInterval(function () {
checkCrash()
}, CHECK_CRASH_INTERVAL)
}
} else if (data.type === ‘unload’) {
ｄｅｌｅｔｅ pages[data.id]
}
})
都挺简单的代码，不细说了。
方案的可行性
兼容性：
Service Worker 的普及率已经相当高了，鉴于国内各种浏览器都是 Chrome 内核，而且版本已经在 Chrome 45 以上，已经覆盖了相当一部分用户。作为监控，数据覆盖大部分就好。
Service Worker 兼容性
可靠性：
这应该是我目前已知可以相对准确判断出网页崩溃的方式了。不过我们的方案还在测试环境，上线一段时间后再给大家共享数据。
对浏览器厂商的建议
题图的 Crash 列表，可以在 Chrome 中访问 chrome://crashes/ 看到，如果厂商可以提供一个 API，在页面打开时，可以获知用户上一次崩溃的信息就很棒了！
以上就是怎样网页监控（网页监控的方法分享）的相关内容了，更多精彩请关注我们！！

推荐阅读

上一篇：网络营销将有很好的发展前景网络营销的发展如何

下一篇：提高现有人员的工作效率执行力特制定方案什么是优化方案