怎么解决前端线上Bug

有一种八阿哥(Bug)，叫“在我电脑上是好的呀”。

有一种解决方式，叫“你去好好排查一下你自己的代码”。

有一种控诉，叫“这绝不是后端的问题”。

你能忍吗？我不能忍，为这事，我可没少跟同事撕逼，可是有什么用吗？最后我想，这事儿也许不怪别人，怪就怪我无法直接证明这些bug不是我的。今天我们就来说说有哪些难搞的线上问题，该如何去定位，并解决它。

但是，解决线上的问题，不是看你会什么，而是看你有什么？

==========================================

【前端监控系统】 Github地址；只需要简单几步，就可以搭建一套属于自己的前端监控系统。

==========================================

一、白屏 - 前端小伙伴的噩梦

页面白屏了，这对前端小伙伴来说，是最严重的bug了，因为业务因此瘫痪了，哪怕不是你的锅，你也背定了。于是，你对着一张白屏，心急如焚，却一脸懵逼，因为你什么有用的信息都没有，解决起来真的无从着手。那么导致白屏的原因有哪些呢？

很遗憾，确实是你的JS报错了，运行时抛出异常，导致白屏。
静态资源加载失败，如：js、css文件加载失败，导致白屏。

以上两点是导致前端白屏的主要原因，当然你说还有什么机子兼容性不好太卡，网络异常什么的，那都小概率事件，属于前端监控的另一个维度，我们在这里就不说了，以后说。

从上边两张图可以看出，如果你知道了用户在某个时间做了某个动作之后，发生了错误，解决起来，也就易如反掌了。

二、接口报错 - 如何优雅的甩给后端

可能有人会认为接口的报错应该由后台来关注，统计，并修复。确实如此，而且后台服务有了很多成熟完善的统计工具，完全能够应对大部分的异常情况，那么为什么还需要前端来解决接口问题呢。原因很简单，因为前端是bug的第一发现位置，他们肯定会先找到你，那么在你帮后台背锅之前怎么快速优雅的"甩锅"呢？

我们公司的后台可是有着完善的监控系统，他们都觉得自己的代码和监控都做得非常完善，但是从我的监控结果来看，事实并非如此。当然，你也许会说这是开发和测试不专业，这么明显的问题都没有发现，但是，我只能用一句话来解释：人非圣贤。与其追究是谁的责任，不如想办法解决问题。将线上的损失减少到最低。

同样道理，如果你把下边这张截图发给你们的后台小伙伴，你还需要跟他们争论是谁的锅吗？当然，如果是你自己的锅，你还是赶紧偷偷修改掉吧，别跑去丢人了，哈哈。

三、网络问题 - 用户的锅

网络是跟用户体验密切相关的因素，但却是开发小伙伴无能为力的因素，因为这取决于用户当时的网络环境是否良好。如果我们能够判断出用户当时的网络情况，对我们排查问题也是很有帮助的。

首先，网络环境对页面首次加载影响最明显。理论上讲，我们是无法，或者说不方便把用户当时的网络情况计算出来，但是我们可以侧面评估出用户当时的网络环境。虽然我们测不出来网速，但是我们可以计算出用户首次加载页面的时间，以此来评估用户的网络环境。

其次，网络环境影响接口的效率。你也许会说，如果网络环境不好，我们只要等待足够长的时间，接口啥的总是能够加载出来的，但是线上用户使用app的时候都会有个极限等待时间。也就是说用户等待到一定时间，就会变得不耐烦了，就会杀掉你的程序，流失用户。所以，我们一定要在到达用户极限等待时间之前，给用户一个反馈，这就是为什么我们需要给前端接口加一个超时时间。

如果，网络环境评估良好，而接口请求耗时又很长，这时候你就可以去找后端的小伙伴算账了。

四、CDN报错 - 替第三方公司背锅

好吧，最憋屈的一种线上Bug，就是替第三方公司背锅啦。如果是第三方的东西出了问题，上头永远都只怀疑是你的代码有bug，如果你没有有力的证据，即使你已经排查过了，他们也只会说一句“你再去好好排查一下你自己的代码”，这时候是不是有一键盘呼他脸上的冲动。

于是，我一怒之下，在监控系统里加入了对静态资源的监控功能。前不久，阿里部分区域的出现了5分钟无法访问的情况。我们线上群里顿时就炸开了锅，让我赶紧排查问题。我打开了错误监控，发现只有静态资源报错陡然飙升。在群里轻轻的说了一句，是CDN有问题，果然，不一会儿，CDN就发了公告了。我转头看向窗外，轻轻地吐了一口气，天上的云静静的飘着，此时此刻只有我自己知道，我再也不用替你背锅了。

五、前端代码错误 - 这才是自己的锅

别人的锅都甩给他们了，剩下咱来聊聊自己的锅。正常情况下，线上前端代码出现错误的可能行比较小，因为经过细心的测试，前端代码错误是很容暴露出来的。另外，咱自己的锅，咱自己清楚，加上我做了一个非常细致的错误分析，问题解决起来也是得心应手

总结：造成线上问题的因素有很多，代码错误仅仅是其中一个很小的因素。我们如何在这众多繁杂的因素之中找到真正原因，就需要有意见趁手的工具。我开发使用前端监控系统到现在，最深的感触是：“这个监控系统并不是帮我解决了很多问题，而是能够告诉我那些问题我不能解决”，这就足以让我从现实的困境中解脱出来。所谓，工欲善其事必先利其器，说得可能就是这个意思吧。

=================================