【前端教程】如何监控网页崩溃？

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

崩溃和卡顿有何差别&＃xff1f;

卡顿也就是网页暂时响应比较慢&＃xff0c;JS 可能无法及时执行&＃xff0c;这也是上篇网页卡顿监控所依赖的技术点。

但崩溃就不一样了&＃xff0c;网页都崩溃了&＃xff0c;页面看不见了&＃xff0c;JS 都不运行了&＃xff0c;还有什么办法可以监控网页的崩溃&＃xff0c;并将网页崩溃上报呢&＃xff1f;

但&＃xff0c;天无绝人之路&＃xff0c;方法总是有的。

load 与 beforeunload 事件

搜遍互联网&＃xff0c;几乎找不到方法&＃xff0c;最终碰上了这篇文章。本文利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。

http://jasonjl.me/blog/2015/06/21/taking-action-on-browser-crashes/​jasonjl.me

window.addEventListener(&＃39;load&＃39;, function () {sessionStorage.setItem(&＃39;good_exit&＃39;, &＃39;pending&＃39;);setInterval(function () {sessionStorage.setItem(&＃39;time_before_crash&＃39;, new Date().toString());}, 1000);});window.addEventListener(&＃39;beforeunload&＃39;, function () {sessionStorage.setItem(&＃39;good_exit&＃39;, &＃39;true&＃39;);});if(sessionStorage.getItem(&＃39;good_exit&＃39;) &&sessionStorage.getItem(&＃39;good_exit&＃39;) !&＃61;&＃61; &＃39;true&＃39;) {/*insert crash logging code here*/alert(&＃39;Hey, welcome back from your crash, looks like you crashed on: &＃39; &＃43; sessionStorage.getItem(&＃39;time_before_crash&＃39;));}

一图胜千言&＃xff1a;

这个方案巧妙的利用了页面崩溃无法触发 beforeunload 事件来实现的。

在页面加载时&＃xff08;load 事件&＃xff09;在 sessionStorage 记录 good_exit 状态为 pending&＃xff0c;如果用户正常退出&＃xff08;beforeunload 事件&＃xff09;状态改为 true&＃xff0c;如果 crash 了&＃xff0c;状态依然为 pending&＃xff0c;在用户第2次访问网页的时候&＃xff08;第2个load事件&＃xff09;&＃xff0c;查看 good_exit 的状态&＃xff0c;如果仍然是 pending 就是可以断定上次访问网页崩溃了&＃xff01;

但这个方案有问题&＃xff1a;

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

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

基于 Service Worker 的崩溃统计方案

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

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

基于以上几点&＃xff0c;我们可以实现一种基于心跳检测的监控方案&＃xff1a;

• p1&＃xff1a;网页加载后&＃xff0c;通过 postMessage API 每 5s 给 sw 发送一个心跳&＃xff0c;表示自己的在线&＃xff0c;sw 将在线的网页登记下来&＃xff0c;更新登记时间&＃xff1b;
• p2&＃xff1a;网页在 beforeunload 时&＃xff0c;通过 postMessage API 告知自己已经正常关闭&＃xff0c;sw 将登记的网页清除&＃xff1b;
• p3&＃xff1a;如果网页在运行的过程中 crash 了&＃xff0c;sw 中的 running 状态将不会被清除&＃xff0c;更新时间停留在奔溃前的最后一次心跳&＃xff1b;
• sw&＃xff1a;Service Worker 每 10s 查看一遍登记中的网页&＃xff0c;发现登记时间已经超出了一定时间&＃xff08;比如 15s&＃xff09;即可判定该网页 crash 了。

一些简化后的检测代码&＃xff0c;给大家作为参考&＃xff1a;

// 页面 Javascript 代码
if (navigator.serviceWorker.controller !&＃61;&＃61; null) {let HEARTBEAT_INTERVAL &＃61; 5 * 1000; // 每五秒发一次心跳let sessionId &＃61; uuid();let heartbeat &＃61; function () {navigator.serviceWorker.controller.postMessage({type: &＃39;heartbeat&＃39;,id: sessionId,data: {} // 附加信息&＃xff0c;如果页面 crash&＃xff0c;上报的附加数据});}window.addEventListener("beforeunload", function() {navigator.serviceWorker.controller.postMessage({type: &＃39;unload&＃39;,id: sessionId});});setInterval(heartbeat, HEARTBEAT_INTERVAL);heartbeat();
}

• **sessionId **本次页面会话的唯一 id&＃xff1b;
• postMessage 附带一些信息&＃xff0c;用于上报 crash 需要的数据&＃xff0c;比如当前页面的地址等等。

const CHECK_CRASH_INTERVAL &＃61; 10 * 1000; // 每 10s 检查一次
const CRASH_THRESHOLD &＃61; 15 * 1000; // 15s 超过15s没有心跳则认为已经 crash
const pages &＃61; {}
let timer
function checkCrash() {const now &＃61; Date.now()for (var id in pages) {let page &＃61; pages[id]if ((now - page.t) > CRASH_THRESHOLD) {// 上报 crashdelete pages[id]}}if (Object.keys(pages).length &＃61;&＃61; 0) {clearInterval(timer)timer &＃61; null}
}worker.addEventListener(&＃39;message&＃39;, (e) &＃61;> {const data &＃61; e.data;if (data.type &＃61;&＃61;&＃61; &＃39;heartbeat&＃39;) {pages[data.id] &＃61; {t: Date.now()}if (!timer) {timer &＃61; setInterval(function () {checkCrash()}, CHECK_CRASH_INTERVAL)}} else if (data.type &＃61;&＃61;&＃61; &＃39;unload&＃39;) {delete pages[data.id]}
})

都挺简单的代码&＃xff0c;不细说了。

方案的可行性

兼容性&＃xff1a;

Service Worker 的普及率已经相当高了&＃xff0c;鉴于国内各种浏览器都是 Chrome 内核&＃xff0c;而且版本已经在 Chrome 45 以上&＃xff0c;已经覆盖了相当一部分用户。作为监控&＃xff0c;数据覆盖大部分就好。

可靠性&＃xff1a;

这应该是我目前已知可以相对准确判断出网页崩溃的方式了。不过我们的方案还在测试环境&＃xff0c;上线一段时间后再给大家共享数据。

对浏览器厂商的建议

题图的 Crash 列表&＃xff0c;可以在 Chrome 中访问 chrome://crashes/ 看到&＃xff0c;如果厂商可以提供一个 API&＃xff0c;在页面打开时&＃xff0c;可以获知用户上一次崩溃的信息就很棒了&＃xff01;

服务推荐

• 蜻蜓代理
• ip代理
• 代理ip
• 微信域名拦截检测
• ip代理服务器
• 国内ip代理
• 代理服务ip
• 最新代理服务器
• 代理ip网
• 中国代理服务器
• 付费代理
• 企业级ip
• 企业级代理ip
• 中国代理ip
• 最新代理ip