---
title: 11-前端错误监控
publish: true
---
## 前言
错误监控包含的内容是：
- 前端错误的分类
- 每种错误的捕获方式
- 上报错误的基本原理
面试时，可能有两种问法：
- 如何监测 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`时，在`