日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

網(wǎng)頁監(jiān)控的方法分享 怎樣網(wǎng)頁監(jiān)控( 二 )

云知道

一些簡化后的檢測代碼，給大家作為參考：
// 頁面 JavaScript 代碼
if (navigator.serviceWorker.controller !== null) {
let HEARTBEAT_INTERVAL = 5 * 1000; // 每五秒發(fā)一次心跳
let sessionId = uuid();
let heartbeat = function () {
navigator.serviceWorker.controller.postMessage({
type: ‘heartbeat’,
id: sessionId,
data: {} // 附加信息，如果頁面 crash，上報的附加數(shù)據(jù)
});
}
window.addEventListener(“beforeunload”, function() {
navigator.serviceWorker.controller.postMessage({
type: ‘unload’,
id: sessionId
});
});
setInterval(heartbeat, HEARTBEAT_INTERVAL);
heartbeat();
}

  • sessionId 本次頁面會話的唯一 id；postMessage 附帶一些信息，用于上報 crash 需要的數(shù)據(jù)，比如當(dāng)前頁面的地址等等 。
const CHECK_CRASH_INTERVAL = 10 * 1000; // 每 10s 檢查一次
const CRASH_THRESHOLD = 15 * 1000; // 15s 超過15s沒有心跳則認(rèn)為已經(jīng) 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]
}
})
都挺簡單的代碼，不細(xì)說了 。
方案的可行性
兼容性：
Service Worker 的普及率已經(jīng)相當(dāng)高了，鑒于國內(nèi)各種瀏覽器都是 Chrome 內(nèi)核，而且版本已經(jīng)在 Chrome 45 以上，已經(jīng)覆蓋了相當(dāng)一部分用戶 。作為監(jiān)控，數(shù)據(jù)覆蓋大部分就好 。
Service Worker 兼容性
可靠性：
這應(yīng)該是我目前已知可以相對準(zhǔn)確判斷出網(wǎng)頁崩潰的方式了 。不過我們的方案還在測試環(huán)境，上線一段時間后再給大家共享數(shù)據(jù) 。
對瀏覽器廠商的建議
題圖的 Crash 列表，可以在 Chrome 中訪問 chrome://crashes/ 看到，如果廠商可以提供一個 API，在頁面打開時，可以獲知用戶上一次崩潰的信息就很棒了！
以上就是怎樣網(wǎng)頁監(jiān)控（網(wǎng)頁監(jiān)控的方法分享）的相關(guān)內(nèi)容了，更多精彩請關(guān)注我們??！

推薦閱讀