有一種八阿哥(Bug)，叫“在我電腦上是好的呀”。
有一種解決方式，叫“你去好好排查一下你自己的代碼”。
有一種控訴，叫“這絕不是后端的問題”。
你能忍嗎？我不能忍，為這事，我可沒少跟同事撕逼，可是有什么用嗎？ 最后我想，這事兒也許不怪別人，怪就怪我無法直接證明這些bug不是我的。今天我們就來說說有哪些難搞的線上問題，該如何去定位，並解決它。
但是，解決線上的問題，不是看你會什么，而是看你有什么？
==========================================
【前端監控系統】 Github地址；只需要簡單幾步，就可以搭建一套屬於自己的前端監控系統。
==========================================
一、白屏 - 前端小伙伴的噩夢
頁面白屏了，這對前端小伙伴來說，是最嚴重的bug了，因為業務因此癱瘓了，哪怕不是你的鍋，你也背定了。於是，你對着一張白屏，心急如焚，卻一臉懵逼，因為你什么有用的信息都沒有，解決起來真的無從着手。那么導致白屏的原因有哪些呢？
-
很遺憾，確實是你的JS報錯了，運行時拋出異常，導致白屏。
-
靜態資源加載失敗，如：js、css文件加載失敗，導致白屏。
以上兩點是導致前端白屏的主要原因，當然你說還有什么機子兼容性不好太卡，網絡異常什么的，那都小概率事件，屬於前端監控的另一個維度，我們在這里就不說了，以后說。
從上邊兩張圖可以看出，如果你知道了用戶在某個時間做了某個動作之后，發生了錯誤，解決起來，也就易如反掌了。
二、接口報錯 - 如何優雅的甩給后端
可能有人會認為接口的報錯應該由后台來關注，統計，並修復。 確實如此，而且后台服務有了很多成熟完善的統計工具，完全能夠應對大部分的異常情況， 那么為什么還需要前端來解決接口問題呢。原因很簡單，因為前端是bug的第一發現位置，他們肯定會先找到你，那么在你幫后台背鍋之前怎么快速優雅的"甩鍋"呢？
我們公司的后台可是有着完善的監控系統，他們都覺得自己的代碼和監控都做得非常完善，但是從我的監控結果來看，事實並非如此。當然，你也許會說這是開發和測試不專業，這么明顯的問題都沒有發現，但是，我只能用一句話來解釋：人非聖賢。與其追究是誰的責任，不如想辦法解決問題。將線上的損失減少到最低。
同樣道理，如果你把下邊這張截圖發給你們的后台小伙伴，你還需要跟他們爭論是誰的鍋嗎？當然，如果是你自己的鍋，你還是趕緊偷偷修改掉吧，別跑去丟人了，哈哈。
三、網絡問題 - 用戶的鍋
網絡是跟用戶體驗密切相關的因素，但卻是開發小伙伴無能為力的因素，因為這取決於用戶當時的網絡環境是否良好。如果我們能夠判斷出用戶當時的網絡情況，對我們排查問題也是很有幫助的。
首先，網絡環境對頁面首次加載影響最明顯。 理論上講，我們是無法，或者說不方便把用戶當時的網絡情況計算出來，但是我們可以側面評估出用戶當時的網絡環境。雖然我們測不出來網速，但是我們可以計算出用戶首次加載頁面的時間，以此來評估用戶的網絡環境。
其次，網絡環境影響接口的效率。你也許會說，如果網絡環境不好，我們只要等待足夠長的時間，接口啥的總是能夠加載出來的，但是線上用戶使用app的時候都會有個極限等待時間。也就是說用戶等待到一定時間，就會變得不耐煩了，就會殺掉你的程序，流失用戶。所以，我們一定要在到達用戶極限等待時間之前，給用戶一個反饋，這就是為什么我們需要給前端接口加一個超時時間。
如果，網絡環境評估良好，而接口請求耗時又很長，這時候你就可以去找后端的小伙伴算賬了。
四、CDN報錯 - 替第三方公司背鍋
好吧，最憋屈的一種線上Bug，就是替第三方公司背鍋啦。如果是第三方的東西出了問題，上頭永遠都只懷疑是你的代碼有bug，如果你沒有有力的證據，即使你已經排查過了，他們也只會說一句“你再去好好排查一下你自己的代碼”，這時候是不是有一鍵盤呼他臉上的沖動。
於是，我一怒之下，在監控系統里加入了對靜態資源的監控功能。前不久，阿里部分區域的出現了5分鍾無法訪問的情況。我們線上群里頓時就炸開了鍋，讓我趕緊排查問題。我打開了錯誤監控，發現只有靜態資源報錯陡然飆升。在群里輕輕的說了一句，是CDN有問題，果然，不一會兒，CDN就發了公告了。我轉頭看向窗外，輕輕地吐了一口氣，天上的雲靜靜的飄着，此時此刻只有我自己知道，我再也不用替你背鍋了。
五、前端代碼錯誤 - 這才是自己的鍋
別人的鍋都甩給他們了，剩下咱來聊聊自己的鍋。正常情況下，線上前端代碼出現錯誤的可能行比較小，因為經過細心的測試，前端代碼錯誤是很容暴露出來的。另外，咱自己的鍋，咱自己清楚，加上我做了一個非常細致的錯誤分析，問題解決起來也是得心應手
總結：造成線上問題的因素有很多，代碼錯誤僅僅是其中一個很小的因素。我們如何在這眾多繁雜的因素之中找到真正原因，就需要有意見趁手的工具。我開發使用前端監控系統到現在，最深的感觸是：“這個監控系統並不是幫我解決了很多問題，而是能夠告訴我那些問題我不能解決”，這就足以讓我從現實的困境中解脫出來。所謂，工欲善其事必先利其器，說得可能就是這個意思吧。
=================================