前端错误监控与上报

栏目: jQuery · 发布时间: 6年前

内容简介:一:二:

前端错误的分类:

一: 及时代码运行错误: 也称为代码错误。这个错误往往是 程序员 在代码书写时造成的,比如语法错误、逻辑错误,这样的错误通常在测试阶段就会被发现,但是也可能存在“漏网之鱼”。

二: 资源加载错误: 这个错误通常是找不到文件(404)或者是文件加载超时造成的。

捕获错误的方法:

及时代码运行错误的捕获方法一般有两种,

try{      // 运行可能出错的代码  }catch{      // 捕获错误  }复制代码

另外一种是 window.onerror

资源加载错误的捕获一般有三种方法,

Object.onerror,

var img =document.getElementById('#img');

     img.onerror = function() {

        // 捕获错误

     }
复制代码

window.performance.getEntries(),

浏览器获取网页时,会对网页中每一个对象(脚本文件、样式表、图片文件等等)发出一个HTTP请求。而通过window.performance.getEntries方法,则可以以数组形式,返回这些请求的时间统计信息,每个数组成员均是一个PerformanceResourceTiming对象!

(function () {
    // 浏览器不支持,就算了!
    if (!window.performance && !window.performance.getEntries) {
        return false;
    }
 
    var result = [];
    // 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析
    window.performance.getEntries().forEach((item) => {
        result.push({
            'url': item.name,
            'entryType': item.entryType,
            'type': item.initiatorType,
            'duration(ms)': item.duration
        });
    });
 
    // 控制台输出统计结果
    console.table(result);
})();
复制代码

前端错误监控与上报

详细资料: developer.mozilla.org/en-US/docs/…

这就是已经加载的资源,然后把整个资源的数量减去已经加载好的资源,剩下的就是没有加载出来的资源的数量。

捕获Error事件

window.addEventListener("error",function(ev){    console.log('捕获',ev)// 捕获错误 },true);复制代码

addEventListener的第三个参数 一定要是true,表示在捕获阶段触发,如果改成false就是冒泡阶段,那是获取不到错误事件的。

<!-- 一个不存在的资源 -->
<script src="//baidu.com/test.js"></script>复制代码

前端错误监控与上报

错误上报的方法:

一:Ajax上传,Ajax上报就是在上文注释错误捕获的地方发起Ajax请求,来向服务器发送错误信息。

二:利用Image对象发送信息

(new Image()).src="http://post.error.com?data=xxx"

跨域js文件错误是否可以捕获:

答案是可以,错误提示是   script error

前端错误监控与上报

解决办法,跨域js文件获取是有限制的,如果想获取其他域下的js错误需要在script标签里添加crossorigin属性,然后服务器端要设置header('Access-Control-Allow-Origin: *'),或者 指定域名。


以上所述就是小编给大家介绍的《前端错误监控与上报》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据之路

大数据之路

阿里巴巴数据技术及产品部 / 电子工业出版社 / 2017-7-1 / CNY 79.00

在阿里巴巴集团内,数据人员面临的现实情况是:集团数据存储已经达到EB级别,部分单张表每天的数据记录数高达几千亿条;在2016年“双11购物狂欢节”的24小时中,支付金额达到了1207亿元人民币,支付峰值高达12万笔/秒,下单峰值达17.5万笔/秒,媒体直播大屏处理的总数据量高达百亿级别且所有数据都需要做到实时、准确地对外披露……巨大的信息量给数据采集、存储和计算都带来了极大的挑战。 《大数据......一起来看看 《大数据之路》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具