基本
本文为原在果肉的实践部分,到面试时的总结。
运行中的脚本错误监控
window.onerror / window.addEvenetListstener("error")
window onerror的捕获信息
message
:错误信息(字符串)。可用于HTMLonerror=""
处理程序中的event
。source
:发生错误的脚本URL(字符串)lineno
:发生错误的行号(数字)colno
:发生错误的列号(数字)error
:Error对象(对象)
均可。
还可以监听
addEventListener("unhandledrejection")
来监听异步函数抛出没有捕获的错误
资源错误
document.addEventListener("error")
用于捕获资源错误
对此还需要兼容 event target的类型
例如 link标签可能是取href HTMLMediaElement 可能是取 currentSrc
Ajax请求中的错误监控
hack XMLHttpRequest请求
重写prototype的send/open方法
数据的采集存放
https://guorou-fe.cn-hangzhou.log.aliyuncs.com/logstores/guorou-fe/track?APIVersion=0.6.0
使用阿里云做日志的采集
用阿里云的日志分析功能做日志分析,包括图表展示等等
错误上报
- 通过 Ajax 发送数据
- 动态创建 img 标签的形式
优化
使用IdleQueue优化上报模式
https://github.com/GoogleChromeLabs/idlize
接入idle优化上报的逻辑,让用户端上报仅仅在idle空闲时候做操作,防止影响用户功能
其他
首屏时间如何统计
根据业务形态不同首屏时间可能也有所不同
崩溃和卡顿
- 利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。
- 基于以下原因,我们可以使用
Service Worker
来实现网页崩溃的监控:Service Worker
有自己独立的工作线程,与网页区分开,网页崩溃了,Service Worker
一般情况下不会崩溃;Service Worker
生命周期一般要比网页还要长,可以用来监控网页的状态;- 网页可以通过
navigator.serviceWorker.controller.postMessage API
向掌管自己的SW
发送消息。
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'));
}
http://jasonjl.me/blog/2015/06/21/taking-action-on-browser-crashes/
https://zhuanlan.zhihu.com/p/40273861
框架侧捕获
VUE errorHandler React componentDIdCatch
NextJS的捕获
- 在server做一个写入日志的logger通用方法,全局global写入logger方法
- 监听server 的onerror方法,收集错误 写入日志。
- 在前端页面渲染的时候用个适配器,将服务端渲染时候的前端logger都打到服务端。
- 在ErrorPage时候也进行生成
前端监控使用GIF进行上报主要是因为:
- 没有跨域问题;
- 不会阻塞页面加载,影响用户体验;
- 在所有图片中体积最小,相较BMP/PNG,可以节约41%/35%的网络资源。
sendBeacon
可用于通过HTTP将少量数据异步传输到Web服务器。
**url**url
参数表明 data
将要被发送到的网络地址。
**data**data
参数是将要发送的 [ArrayBufferView](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
或 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)
, [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString)
或者 [FormData](https://developer.mozilla.org/zh-CN/docs/Web/API/FormData)
类型的数据。
data一般是有size limit 的,大概是64kb左右。
使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单许多!
可以在web worker中使用sendBeacon
函数签名返回值为布尔,标示该请求是否存在发送任务队列中。
... 待补充
Contact Me
encode by base64
Email: a2FuZzk1NjMwQGdtYWlsLmNvbQ==
QQ: OTA3NzQ3ODc0QHFxLmNvbQo=
转载需注明出处与作者
否则将被视为侵权
Reprinting must indicate the source and author
Otherwise it will be regarded as infringement