网站内容更新监控( 每有一次网页打开，就会有一个crash上报)

　　网站内容更新监控(

每有一次网页打开，就会有一个crash上报)

　　const CHECK_CRASH_INTERVAL = 10*1000; //每10s检查一次

const CRASH_THRESHOLD = 15 * 1000; //超过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

delete pages[id]

}

}

if(Object.keys(pages).length == 0) {

clearInterval(timer)

timer = null

}

}

worker.addEventListener('message', (e)=>{

const data = e.data;

if(data.type === 'heartbeat'){

pages[data.id] = {

t: Data.now()

}

if(!timer){

timer = setInterval(function(){

checkCrash()

},CHECK_CRASH_INTERVAL)

}

}else if(data.type === 'unload'){

delete pages[data.id]

}

})

　　计划的可行性

　　* **1、兼容性** Service Worker 的普及度已经很高了。鉴于国内各种浏览器都是Chrome内核，而且版本在Chrome45以上，已经覆盖了相当多的用户。作为监控，覆盖大部分数据就好了。

　　* 2、可靠性

　　相比使用window对象的load和beforeunload事件监控网页崩溃，使用service worker更可靠。

　　当页面加载（加载事件）时，good_exit 状态在 sessionStorage 中记录为pending。如果用户正常退出（在unload事件之前），good_exit状态变为true。如果页面崩溃，good_exit 状态仍处于挂起状态。访问网页时（第二次加载事件），检查good_exit的状态。如果还处于pending状态，则可以断定上次网页崩溃了。

　　代码：

　　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'){

/*insert crash logging code here*/

alert('Hey,welcome back from your crash, looks like you crashed on: ' +sessionStorage.getItem('time_before_crash'));

}

　　这个解决方案的问题：

　　1、使用 sessionStorage 存储状态，但通常在网页崩溃/卡住后，用户会强行关闭网页或干脆重新打开浏览器，sessionStorage 中存储的状态将不复存在。

　　2、如果存储状态存储在localStorage甚至cookies中，如果用户连续打开多个网页，但没有关闭，good_exit的存储一直处于pending状态，那么每次打开一个网页，会有一份崩溃报告。

　　参考地址：知乎存植