前端如何做好错误监控?

一、前端错误的分类

  • (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>

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 1,388评论 0 24
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 2,557评论 1 18
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 610评论 0 1
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 5,440评论 2 19
  • 1.成品镇楼 2.线稿。 3.第一遍上色。 4.继续上色。 5.重点刻画花瓣的纹路。 6.重点刻画叶脉。 7.加深...
    若水无心一阅读 241评论 2 7