前端之错误监控 – kangkangblog

基本

本文为原在果肉的实践部分，到面试时的总结。

运行中的脚本错误监控

window.onerror / window.addEvenetListstener("error")

window onerror的捕获信息

message：错误信息（字符串）。可用于HTML onerror=""处理程序中的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

基本