|
副问题[/!--empirenews.page--]
跟着前端页面承载成果越来越多，用户当地赏识器情形也错综伟大，因此纵然有完美的测试，我们也无法担保上线的代码不会堕落。在这种场景下，前端页面的监控就成了各个web项目必备的器材。
一样平常对页面的监控包括页面机能、页面错误以及用户举动路径获取上报等。
而本文将重点存眷个中的错误部门，首要先容一下常见的错误范例以及怎样对它们举办捕捉并上报。
常见错误的分类
对付用户在会见页面时产生的错误，首要包罗以下几个范例：
1、js运行时错误
JavaScript代码在用户赏识器中执行时，因为一些界线环境、当地情形的不行控等身分，也许会存在js运行时错误。
而依靠客户端的某些要领，因为兼容性可能收集等题目，也有概率会呈现运行时错误。
e.g: 下图是当行使了未界说的变量"foo"，导致发生js运行时错误时的上报数据：
2、资源加载错误
这里的静态资源包罗js、css以及image等。此刻的web项目，每每依靠了大量的静态资源，并且一样平常也会有cdn存在。
假如某个节点呈现题目导致某个静态资源无法会见，就必要可以或许捕捉这种非常并举办上报，利便第一时刻办理题目。
e.g: 下图是图片资源不存在时的上报数据：
3、未处理赏罚的promise错误
未行使catch捕捉的promise错误，每每城市存在较量大的风险。而编码时有也许包围的不足全面，因此有须要监控未处理赏罚的promise错误并举办上报。
e.g: 下图是promise哀求接口产生错误后，未举办catch时的上报数据：
4、异步哀求错误（fetch与xhr）
异步错误的捕捉分为两个部门：一个是传统的XMLHttpRequest，另一个是行使fetch api。
像axios和jQuery等库就是在xhr上的封装，而有些环境也也许会行使原生的fetch，因此对这两种环境都要举办捕捉。
e.g: 下图是xhr哀求接口返回400时捕捉后的上报数据：
各个范例错误的捕捉方法
1、window.onerror与window.addEventListener('error')捕捉js运行时错误
行使window.onerror和window.addEventListener('error')都能捕捉，可是window.onerror含有具体的error仓库信息，存在error.stack中，以是我们选择行使onerror的方法对js运行时错误举办捕捉。
- window.onerror = function (msg, url, lineNo, columnNo, error) {
- // 处理赏罚错误信息
- }
- // demo
- msg: Uncaught TypeError: Uncaught ReferenceError: a is not defined
- error.statck: TypeError: ReferenceError: a is not defined at http://xxxx.js:1:13
- window.addEventListener('error', event => (){
- // 处理赏罚错误信息
- }, false);
- // true代表在捕捉阶段挪用，false代表在冒泡阶段捕捉。行使true或false都可以，默以为false
2、资源加载错误行使addEventListener去监听error变乱捕捉
实现道理：当一项资源（如<img>或<script>）加载失败，加载资源的元素会触发一个Event接口的error变乱，并执行该元素上的onerror()处理赏罚函数。
这些error变乱不会向上冒泡到window，不外能被window.addEventListener在捕捉阶段捕捉。
但这里必要留意，因为上面提到了addEventListener也可以或许捕捉js错误，因此必要过滤停止一再上报，判定为资源错误的时辰才举办上报。
- window.addEventListener('error', event => (){
- // 过滤js error
- let target = event.target || event.srcElement;
- let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
- if (!isElementTarget) return false;
- // 上报资源地点
- let url = target.src || target.href;
- console.log(url);
- }, true);
3、未处理赏罚的promise错误处理赏罚方法
实现道理：当promise被reject而且错误信息没有被处理赏罚的时辰，会抛出一个unhandledrejection。
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
