网页监控的方法分享怎样网页监控 _生活百科

本文是如何监控网页的卡顿？的下篇。今天我们把话题聚焦在如何监控网页的崩溃上。
寸志：如何监控网页的卡顿？
崩溃和卡顿有何差别？
卡顿也就是网页暂时响应比较慢，JS 可能无法及时执行，这也是上篇网页卡顿监控所依赖的技术点。
但崩溃就不一样了，网页都崩溃了，页面看不见了，JS 都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？
但，天无绝人之路，方法总是有的。
load 与 beforeunload 事件
搜遍互联网，几乎找不到方法，最终碰上了这篇文章。本文利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。
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 事件实现崩溃监控
这个方案巧妙的利用了页面崩溃无法触发 beforeunload 事件来实现的。
在页面加载时（load 事件）在 sessionStorage 记录 good_exit 状态为 pending，如果用户正常退出（beforeunload 事件）状态改为 true，如果 crash 了，状态依然为 pending，在用户第2次访问网页的时候（第2个load事件），查看 good_exit 的状态，如果仍然是 pending 就是可以断定上次访问网页崩溃了！
但这个方案有问题：

采用 sessionStorage 存储状态，但通常网页崩溃/卡死后，用户会强制关闭网页或者索性重新打开浏览器，sessionStorage 存储但状态将不复存在；如果将状态存储在 localStorage 甚至 Cookie 中，如果用户先后打开多个网页，但不关闭，good_exit 存储的一直都是 pending，完了，每有一次网页打开，就会有一个 crash 上报。

全民直播一开始采用的就是这个方案，发现就算页面做了优化，crash 不下降，与 PV 保持比例，才意识到这个方案的问题之处。

【网页监控的方法分享怎样网页监控】基于 Service Worker 的崩溃统计方案
随着 PWA 概念的流行，大家对 Service Worker 也逐渐熟悉起来。基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：

Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。

基于以上几点，我们可以实现一种基于心跳检测的监控方案：