|
副标题[/!--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。
（编辑：91站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
