一、前端错误的分类
- (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对象上报(常用)
如下例子：
<script type="text/javascript">
(new Image()).src = 'http://baidu.com/abc?r=abc';
</script>
