前端错误异常捕获监控

前端错误的分类：

即时运行错误（代码错误）

资源加载错误

第一种错误一般用：

try...catch实例：

try{

function findError (){

var name = "223"

console.log(Name)

}

}catch(err){

console.log(err)

}

window.onerror实例：

window.onerror = function(msg, url, line, col, error) {

    // 直接将错误打印到控制台

console.log(arguments)

// 方便在未打开控制台的时候，记录错误对象

window.demoError = arguments

}

function findError () {

    var name = "geoff"

var msg = "Hi, " + Name

console.log(msg)

}

findError ()

第二种资源加载错误：

object.onerror实例：

<img src="image.gif" οnerrοr="myFunction()">

function myFunction() {

document.getElementById("demo").innerHTML = "无法加载图片。";

}

或者用事件侦听：

document.getElementById("myImg").addEventListener("error", myFunction);

function myFunction() {

document.getElementById("demo").innerHTML = "无法加载图片。";

}

performance.getEntries方法，它可以获取页面中每个静态资源的请求

(function () {

// 浏览器不支持，就算了！ ie9以上

if (!window.performance && !window.performance.getEntries) {

return false;

}

var result = [];

// 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析

window.performance.getEntries().forEach(function (perf) {

result.push({

     'url': perf.name,

'entryType': perf.entryType,

'type': perf.initiatorType,

'duration(ms)': perf.duration

});

});

// 控制台输出统计结果

console.table(result);})();

跨域的js运行错误可以捕获Script error，需要2个条件

1.相关的js文件上加上 Access-Control-Allow-Origin:* 的response header

2.引用相关的js文件时加上crossorigin属性

上报错误的基本原理

采用Ajax通信方式上报

利用Image对象上报