一文告诉你如何优雅处理前端异常？

1.利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。
不错的文章，推荐阅读：Logging Information on Browser Crashes。

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% 的问题都化于无形。

【编辑推荐】

1. 调查发现开发者最讨厌 PHP，最爱 Python
2. 谷歌和OpenAI开发新工具，能更好地研究机器视觉算法
3. 苹果发布iOS 12.2系统第五个开发者测试版
4. 推荐这几款开发流程增强工具让您事半功倍
5. 开发者成立了社区继续维护 Atom IDE

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!