认识达内从这里开始

认真做教育专心促就业

一文教你如何轻松优雅的处理前端异常？（8）

发布：青岛IT培训
来源：青岛IT培训
时间：2019-04-10 15:34

青岛IT培训的小编总结， 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 发送消息。

青岛IT培训

十二、错误上报
1.通过 Ajax 发送数据
因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。
2.动态创建 img 标签的形式
function report（error） {
let reportUrl = '#/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% 的问题都化于无形。
以上就是青岛IT培训给大家做的内容详解，更多关于UI的学习，请继续关注青岛IT培训

< 上一篇：一文教你如何轻松优雅的处理前端异常？（7）

下一篇：究竟什么才是互联网架构“高可用”？（1） >