iframe如何发送请求_如何优雅地处理前端异常？

前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。

一、为什么要处理异常？

异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。

• 增强用户体验；

• 远程定位问题；

• 未雨绸缪，及早发现问题；

• 无法复线问题，尤其是移动端，机型，系统都是问题；

• 完善的前端方案，前端监控系统；

对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

二、需要处理哪些异常？

对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：

• JS 语法错误、代码异常

• AJAX 请求异常

• 静态资源加载异常

• Promise 异常

• Iframe 异常

• 跨域 Script error

• 崩溃和卡顿

下面我会针对每种具体情况来说明如何处理这些异常。

三、Try-Catch 的误区

try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。

1. 同步运行时错误：

try {  let name = 'jartto';  console.log(nam);} catch(e) {  console.log('捕获到异常：',e);}

输出：

捕获到异常：ReferenceError: nam is not defined    at :3:15

2.不能捕获到语法错误，我们修改一下代码，删掉一个单引号：

try {  let name = 'jartto;  console.log(nam);} catch(e) {  console.log('捕获到异常：',e);}

输出：

Uncaught SyntaxError: Invalid or unexpected token

不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。

3.异步错误

try {setTimeout(() => {undefined.map(v => v);}, 1000)} catch(e) {console.log('捕获到异常：',e);}

我们看看日志：

Uncaught TypeError: Cannot read property 'map' of undefinedat setTimeout (:3:11)

并没有捕获到异常，这是需要我们特别注意的地方。

四、window.onerror 不是万能的

当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。

/*** @param {String} message 错误信息* @param {String} source 出错文件* @param {Number} lineno 行号* @param {Number} colno 列号* @param {Object} error Error对象(对象)*/window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});}

1.首先试试同步运行时错误

window.onerror = function(message, source, lineno, colno, error) {// message：错误信息(字符串)。// source：发生错误的脚本URL(字符串)// lineno：发生错误的行号(数字)// colno：发生错误的列号(数字)// error：Error对象(对象)console.log('捕获到异常：',{message, source, lineno, colno, error});}Jartto;

可以看到，我们捕获到了异常：

2.再试试语法错误呢？

window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});}let name = 'Jartto

控制台打印出了这样的异常：

Uncaught SyntaxError: Invalid or unexpected token

什么，竟然没有捕获到语法错误？

3.怀着忐忑的心，我们最后来试试异步运行时错误：

window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});}setTimeout(() => {Jartto;});

控制台输出了：

捕获到异常：{message: "Uncaught ReferenceError: Jartto is not defined", source: "http://127.0.0.1:8001/", lineno: 36, colno: 5, error: ReferenceError: Jartto is not definedat setTimeout (http://127.0.0.1:8001/:36:5)}

4.接着，我们试试网络请求异常的情况：

window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});return true;}

我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。

补充一点：window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx

window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});return true;}setTimeout(() => {Jartto;});

控制台就不会再有这样的错误了：

Uncaught ReferenceError: Jartto is not definedat setTimeout ((index):36)

需要注意：

onerror 最好写在所有 JS 脚本的前面，否则有可能捕获不到错误；

onerror 无法捕获语法错误；

到这里基本就清晰了：在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

问题又来了，捕获不到静态资源加载异常怎么办？

五、iframe 异常

对于 iframe 的异常捕获，我们还得借力 window.onerror：

window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});}

一个简单的例子可能如下：

window.frames[0].onerror = function (message, source, lineno, colno, error) {console.log('捕获到 iframe 异常：',{message, source, lineno, colno, error});return true;};

六、Script error

一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：

跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性。

或者动态去添加 js 脚本：

const script = document.createElement('script');script.crossOrigin = 'anonymous';script.src = url;document.body.appendChild(script);

七、崩溃和卡顿

卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？

崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。

1.利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。

window.addEventListener('load', function () {sessionStorage.setItem('good_exit', 'pending');setInterval(function () {sessionStorage.setItem('time_before_crash', new Date().toString());}, 1000);});window.addEventListener('beforeunload', function () {sessionStorage.setItem('good_exit', 'true');});if(sessionStorage.getItem('good_exit') &&sessionStorage.getItem('good_exit') !== 'true') {/*insert crash logging code here*/alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));}

2.基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：

Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；

Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；

网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。

八、错误上报

1.通过 Ajax 发送数据

因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。

2.动态创建 img 标签的形式

function report(error) {let reportUrl = 'http://jartto.wang/report';new Image().src = `${reportUrl}?logs=${error}`;}

收集异常信息量太多，怎么办？实际中，我们不得不考虑这样一种情况：如果你的网站访问量很大，那么一个必然的错误发送的信息就有很多条，这时候，我们需要设置采集率，从而减缓服务器的压力：

Reporter.send = function(data) {// 只采集 30%if(Math.random() < 0.3) {send(data) // 上报错误信息}}

采集率应该通过实际情况来设定，随机数，或者某些用户特征都是不错的选择。

八、总结

回到我们开头提出的那个问题，如何优雅的处理异常呢？

1.可疑区域增加 Try-Catch

2.全局监控 JS 异常 window.onerror

3.全局监控静态资源异常 window.addEventListener

4.捕获没有 Catch 的 Promise 异常：unhandledrejection

5.VUE errorHandler 和 React componentDidCatch

6.监控网页崩溃：window 对象的 load 和 beforeunload

7.跨域 crossOrigin 解决

其实很简单，正如上文所说：采用组合方案，分类型的去捕获异常，这样基本 80%-90% 的问题都化于无形。

推荐阅读：

通过分析Github众多前端代码库，总结出来的前端代码书写规范

【前端艺术】HTML5 Canvas和jQuery实时动态天气预报

前端设计开发常用命名规则

觉得文章不错，点下在看