## 前言 错误监控包含的内容是: - 前端错误的分类 - 每种错误的捕获方式 - 上报错误的基本原理 面试时,可能有两种问法: - 如何监测 js 错误?(开门见山的方式) - 如何保证**产品质量**?(其实问的也是错误监控) ## 前端错误的分类 包括两种: - 即时运行错误(代码错误) - 资源加载错误 ## 每种错误的捕获方式 ### 即时运行错误的捕获方式 **方式1**:try ... catch。 这种方式要部署在代码中。 **方式2:**`window.onerror`函数。这个函数是全局的。 ``` window.onerror = function(msg, url, row, col, error) { ... } ``` 参数解释: - msg为异常基本信息 - source为发生异常Javascript文件的url - row为发生错误的行号 方式二中的`window.onerror`是属于DOM0的写法,我们也可以用DOM2的写法:`window.addEventListener("error", fn);`也可以。 **问题延伸1:** `window.onerror`默认无法捕获**跨域**的js运行错误。捕获出来的信息如下:(基本属于无效信息) 比如说,我们的代码想引入B网站的`b.js`文件,怎么捕获它的异常呢? **解决办法**:在方法二的基础之上,做如下操作: (1)在`b.js`文件里,加入如下 response header,表示允许跨域:(或者世界给静态资源`b.js`加这个 response header) ``` Access-Control-Allow-Origin: * ``` (2)引入第三方的文件`b.js`时,在` ``` 打开浏览器,效果如下: ![](http://img.smyhvae.com/20180311_2055.png) 上图中,红色那一栏表明,我的请求已经发出去了。点进去看看: ![](http://img.smyhvae.com/20180311_2057.png) 这种方式,不需要借助第三方的库,一行代码即可搞定。