2024年怎样网页监控？（网页监控的方法分享）

本文是如何监控网页的卡顿？的下篇。今天我们把话题聚焦在如何监控网页的崩溃上。

寸志：如何监控网页的卡顿？

崩溃和卡顿有何差别？

卡顿也就是网页暂时响应比较慢，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’) {

/*

insert 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 就是可以断定上次访问网页崩溃了！

但这个方案有问题：

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

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

基于 Service Worker 的崩溃统计方案

随着 PWA 概念的流行，大家对 Service Worker 也逐渐熟悉起来。基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：

微信扫码上方二维码，可领取2025年最新互联网创业项目！

项目收款截图