前端错误的分类:
一:及时代码运行错误:也称为代码错误。这个错误往往是程序员在代码书写时造成的,比如语法错误、逻辑错误,这样的错误通常在测试阶段就会被发现,但是也可能存在“漏网之鱼”。
二:资源加载错误:这个错误通常是找不到文件(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: *'),或者 指定域名。