前端之错误监控

基本

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

运行中的脚本错误监控

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

window onerror的捕获信息

  • message:错误信息(字符串)。可用于HTML onerror=""处理程序中的event
  • source:发生错误的脚本URL(字符串)
  • lineno:发生错误的行号(数字)
  • colno:发生错误的列号(数字)
  • errorError对象(对象)

均可。

还可以监听

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

使用阿里云做日志的采集

用阿里云的日志分析功能做日志分析,包括图表展示等等

错误上报

  1. 通过 Ajax 发送数据
  2. 动态创建 img 标签的形式

优化

使用IdleQueue优化上报模式

https://github.com/GoogleChromeLabs/idlize

接入idle优化上报的逻辑,让用户端上报仅仅在idle空闲时候做操作,防止影响用户功能

其他

首屏时间如何统计

根据业务形态不同首屏时间可能也有所不同

崩溃和卡顿

  1. 利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。
  2. 基于以下原因,我们可以使用 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的捕获

  1. 在server做一个写入日志的logger通用方法,全局global写入logger方法
  2. 监听server 的onerror方法,收集错误 写入日志。
  3. 在前端页面渲染的时候用个适配器,将服务端渲染时候的前端logger都打到服务端。
  4. 在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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注