前端如何做好错误监控？

一、前端错误的分类

• (1) 即时运行错误：代码错误
• (2) 资源加载错误，如js、css加载失败等

二、错误的捕获方式

1、即时运行错误的捕获

• (1) try...catch

var a = "[1,2]";
var b = JSON.parse(a);
console.log(b);  // [1,2]

如下JSON.parse一个非字符串时：

var a = [1,2];
var b = JSON.parse(a);

会报错：

ERROR

需要加入try...catch：

var b;
try {
    var a = [1,2];
    b = JSON.parse(a);
} catch(err) {
    console.log(err);
    b = [];
}

console.log(b);  // []

这个在我们项目时很常见，从后端拿数据时，需要我们JSON.parse格式化，但如果后端出现异常给一个null或者其他格式的数据，就容易导致页面崩溃，此时就要容错机制try...catch来处理。

• (2) window.onerror

2、资源加载错误的捕获

• (1) object.onerror
• (2) performance.getEntries()
• (3) Error 事件捕获

3、跨域的JavaScript运行错误可以捕获吗？应该怎么处理？

可以捕获，需要作2方面处理：

• (1) 在客户端script标签增加 crossorigin属性
• (2) 在服务端JavaScript资源响应头中设置Access-Control-Allow-Origin: *

三、上报错误的基本原理

1、采用Ajax通信的方式上报(不常用)

2、利用Image对象上报(常用)

如下例子：