From e3566d9cc5ebeb31a357aad0f6250900bb1e53b1 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 11 Mar 2018 21:06:34 +0800 Subject: [PATCH] =?UTF-8?q?add=20file:=E5=89=8D=E7=AB=AF=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 06-前端基础/15-前端错误监控.md | 181 +++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 06-前端基础/15-前端错误监控.md diff --git a/06-前端基础/15-前端错误监控.md b/06-前端基础/15-前端错误监控.md new file mode 100644 index 0000000..b817794 --- /dev/null +++ b/06-前端基础/15-前端错误监控.md @@ -0,0 +1,181 @@ + + +## 前言 + +错误监控包含的内容是： + +- 前端错误的分类 + +- 每种错误的捕获方式 + +- 上报错误的基本原理 + + +面试时，可能有两种问法： + +- 如何监测 js 错误？（开门见山的方式） + +- 如何保证**产品质量**？（其实问的也是错误监控） + + +## 前端错误的分类 + +包括两种： + +- 即时运行错误（代码错误） + +- 资源加载错误 + + +## 每种错误的捕获方式 + + +### 即时运行错误的捕获方式 + +**方式1**：try ... catch。 + +这种方式要部署在代码中。 + +**方式2：**`window.onerror`函数。这个函数是全局的。 + +``` + window.onerror = function(message, source, lineno, colno, error) { ... } +``` + +参数解释： + +- mesage为异常基本信息 + +- source为发生异常Javascript文件的url + +- lineno为发生错误的行号 + + +方式二中的`window.onerror`是属于DOM0的写法，我们也可以用DOM2的写法：`window.addEventListener("error", fn);`也可以。 + +**问题延伸：** + +`window.onerror`默认无法捕获**跨域**的js运行错误。捕获出来的信息如下：（基本属于无效信息） + + +比如说，我们的代码想引入B网站的`b.js`文件，怎么捕获它的异常呢？ + +**解决办法**：在方法二的基础之上，做如下操作： + + +（1）在静态资源服务器或者CDN的HTTP头中加 如下 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) + +这种方式，不需要借助第三方的库，一行代码即可搞定。 + + + + + + +