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

  1. 首頁(yè) > 云知道 > >

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

云知道

本文是如何監(jiān)控網(wǎng)頁(yè)的卡頓？的下篇 。今天我們把話題聚焦在如何監(jiān)控網(wǎng)頁(yè)的崩潰上 。
寸志：如何監(jiān)控網(wǎng)頁(yè)的卡頓？
崩潰和卡頓有何差別？
卡頓也就是網(wǎng)頁(yè)暫時(shí)響應(yīng)比較慢，JS 可能無(wú)法及時(shí)執(zhí)行，這也是上篇網(wǎng)頁(yè)卡頓監(jiān)控所依賴的技術(shù)點(diǎn) 。
但崩潰就不一樣了，網(wǎng)頁(yè)都崩潰了，頁(yè)面看不見了，JS 都不運(yùn)行了，還有什么辦法可以監(jiān)控網(wǎng)頁(yè)的崩潰，并將網(wǎng)頁(yè)崩潰上報(bào)呢？
但，天無(wú)絕人之路，方法總是有的 。
load 與 beforeunload 事件
搜遍互聯(lián)網(wǎng)，幾乎找不到方法，最終碰上了這篇文章 。本文利用 window 對(duì)象的 load 和 beforeunload 事件實(shí)現(xiàn)了網(wǎng)頁(yè)崩潰的監(jiān)控 。
jasonjl.me
window.addEventListener(‘load’, function () {
sessionStorage.setItem(‘good_exit’, ‘pending’);
setInterval(function () {
sessionStorage.setItem(‘time_before_crash’, new Date().toString());
}, 1000);
});
window.addEventListener(‘beforeunload’, function () {
sessionStorage.setItem(‘good_exit’, ‘true’);
});
if(sessionStorage.getItem(‘good_exit’) &&
sessionStorage.getItem(‘good_exit’) !== ‘true’) {
/*
ｉｎｓｅｒｔ crash logging code here
*/
alert(‘Hey, welcome back from your crash, looks like you crashed on: ‘ + sessionStorage.getItem(‘time_before_crash’));
}
一圖勝千言：
使用 load 和 beforeunload 事件實(shí)現(xiàn)崩潰監(jiān)控
這個(gè)方案巧妙的利用了頁(yè)面崩潰無(wú)法觸發(fā) beforeunload 事件來(lái)實(shí)現(xiàn)的 。
在頁(yè)面加載時(shí)（load 事件）在 sessionStorage 記錄 good_exit 狀態(tài)為 pending，如果用戶正常退出（beforeunload 事件）狀態(tài)改為 true，如果 crash 了，狀態(tài)依然為 pending，在用戶第2次訪問網(wǎng)頁(yè)的時(shí)候（第2個(gè)load事件），查看 good_exit 的狀態(tài)，如果仍然是 pending 就是可以斷定上次訪問網(wǎng)頁(yè)崩潰了！
但這個(gè)方案有問題：

  1. 采用 sessionStorage 存儲(chǔ)狀態(tài)，但通常網(wǎng)頁(yè)崩潰/卡死后，用戶會(huì)強(qiáng)制關(guān)閉網(wǎng)頁(yè)或者索性重新打開瀏覽器，sessionStorage 存儲(chǔ)但狀態(tài)將不復(fù)存在；如果將狀態(tài)存儲(chǔ)在 localStorage 甚至 Cookie 中，如果用戶先后打開多個(gè)網(wǎng)頁(yè)，但不關(guān)閉，good_exit 存儲(chǔ)的一直都是 pending，完了，每有一次網(wǎng)頁(yè)打開，就會(huì)有一個(gè) crash 上報(bào) 。
全民直播 一開始采用的就是這個(gè)方案，發(fā)現(xiàn)就算頁(yè)面做了優(yōu)化，crash 不下降，與 PV 保持比例，才意識(shí)到這個(gè)方案的問題之處 。
【網(wǎng)頁(yè)監(jiān)控的方法分享 怎樣網(wǎng)頁(yè)監(jiān)控】基于 Service Worker 的崩潰統(tǒng)計(jì)方案
隨著 PWA 概念的流行，大家對(duì) Service Worker 也逐漸熟悉起來(lái) ?；谝韵略?，我們可以使用 Service Worker 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)崩潰的監(jiān)控：
  1. Service Worker 有自己獨(dú)立的工作線程，與網(wǎng)頁(yè)區(qū)分開，網(wǎng)頁(yè)崩潰了，Service Worker 一般情況下不會(huì)崩潰；Service Worker 生命周期一般要比網(wǎng)頁(yè)還要長(zhǎng)，可以用來(lái)監(jiān)控網(wǎng)頁(yè)的狀態(tài)；網(wǎng)頁(yè)可以通過 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 發(fā)送消息 。
基于以上幾點(diǎn)，我們可以實(shí)現(xiàn)一種基于心跳檢測(cè)的監(jiān)控方案：