資訊專欄INFORMATION COLUMN
摘要：年快要過去了，回顧這一年來，在業務代碼里，開發新功能占據，修復占了，在解決的這些中，大部分都是代碼級別的錯誤，使用基本都可以解決，但其中有三個比較神奇，算得上是靈異事件了。
2017年快要過去了，回顧這一年來，在業務代碼里，開發新功能占據70%，修復BUG占了30%，在解決的這些BUG中，大部分都是代碼級別的錯誤，使用 Chrome Devtools 基本都可以解決，但其中有三個比較神奇，算得上是靈異事件了。
鬼打墻有一次后端同學重構了一下 DSP 廣告平臺的接口，讓 Java 服務化提供接口， PHP 做 web 控制層掌管路由和透傳接口，于是對之前的接口URL重新規劃統一了一下，內測沒問題后就高高興興上線了，然而沒過多久就有商家上報說頁面報錯沒數據，于是我趕緊復現，但怎么都復現不出來，然后問商家瀏覽器是不是版本太低，網絡是不是不穩定之類的，但商家的瀏覽器和網絡環境都沒問題，這就納悶了，于是果斷找了一臺 Windows 機器（因為我們都是Mac而且沒裝虛擬機），讓商家加 QQ 遠程協助看一下到底報了什么錯，倒騰了半天，連上商家電腦，復現果然報錯了 NetWork Error ，打開 Chrome Devtools 一查， ajax 請求居然沒沒發出去。看了一眼瀏覽器上那一排插件，懷疑是不是插件搞的鬼，發現居然有屏蔽廣告的插件，大哥，你特么自己都在我們平臺上投廣告，你還裝屏蔽廣告插件。果斷讓他關閉這個插件，然后果然沒問題。原來我們的接口URL里有 advertisement 這個單詞，插件直接屏蔽了這個URL。沒過多久，又有一個商家報頁面沒數據，呵呵，我們直接叫他關閉瀏覽器屏蔽廣告插件，結果商家告訴我還是不行。?，還是遠程協助查一下，發現開了隱身窗口，接口還是沒返回數據，看到商家電腦右下角運行的系統殺毒軟件，眉頭一皺，難道是這貨搞的鬼？打開設置一看，赫然有屏蔽廣告這個選項。果然國產軟件都流氓，你這所有的瀏覽記錄都被人家知道了啊。第二天果斷把 advertisement 改成gg（guanggao），整個世界都清凈了。
斷頭鬼過了一段時間，我司搭了一個前端錯誤監控平臺，可以收集客戶端錯誤，上報到這個平臺然后郵件告警開發者。收集的信息包括用戶操作系統、瀏覽器版本、 IP 、操作路徑等，這樣就不需要再用 Windows 遠程了。某一天，告警平臺發郵件報錯，店鋪選擇頁面 js 運行報錯，那還得了，選擇不了店鋪，相當于我們的后臺入口掛了啊。果斷按照報錯的操作路徑操作一次，又沒復現。再一看操作系統與瀏覽器版本，找了一個一模一樣的環境，還是復現不出來。暈了，還是用遠程協助吧。商家那里確實有 js 運行報錯，由于線上 js 也沒有 source map ，壓縮的代碼也看不懂，查半天也沒查出什么東西。回到監控平臺后臺，反復比對各條報錯。結果發現 IP 都是差不多的范圍，一查都是合肥電信的運營商，難道所有合肥電信的用戶加載的這個 js 有問題？然后報給運維同學，他把那個 js 下載下來一看，長度不一樣，和正常的版本比，少了一小段。肯定是 cdn 同步的時候，出了故障，果斷把鍋丟給七牛。
替死鬼前幾天，有一次發布后，一直收到郵件告警某個 base 的 js 運行報錯，涉及的瀏覽器版本都是Chrome 31到37，輕車熟路開虛擬機復現，找半天找了一個Chrome 31，確實報錯了，然而報錯內容看不懂。想著那天發布內容包括升級基礎 react 組件，加了一個 babel runtime ，還有一些其他的改動，難道是這些問題引起的？
然后嘗試想讓虛擬機 Chrome 運行本地代碼，于是在 win 里面裝 node 、 git 、下載倉庫、打包、把線上代碼代理到本地。結果node-modules都裝不上去。然后再試試裝 fiddler 抓包軟件，把打包后的代碼放在 win 里面，抓取那幾個 js ，替換成打包后的本地代碼，然而還是看不懂，只知道是一個基礎函數，可能是 babel polyfill 的問題，于是嘗試把前端倉庫那幾天的改成一一 revert ，看看到底是哪個改動導致的問題。結果回退到發布之前都還是報錯，這就尷尬了，至此我已經花了一天時間去排查這個問題，期間讓幾個同事一起排查也沒發現問題本源。
最后想著把 win 的網絡設置成 Mac 一樣的網絡，把 win 瀏覽器使用 SwitchySharp 設置成 Mac 的代理，這樣就可以在 win 里面使用 Mac 的開發環境，（其實就是在 Mac 起一個 node 服務，監聽一個端口，在這個服務里把所有的線上的前端資源（ js , css ）替換成本地代碼，本地這個服務相當于一個網關服務器，還可以把網址指向不同環境的服務器。）結果驚奇的發現在預發環境是沒有問題的，只有線上環境才有報錯。我的第一反應是難道后端改造了什么數據類型？把線上數據和預發環境數據比對一下，然而一模一樣。這個時候，對比兩個環境只有兩個差異了，一個線上環境多一個統計日志上報的 js ，還有一個就是錯誤收集上報的 js ，問了一下這兩個 js 的維護者，果然統計日志的js，在那次發布的時候改動了，為了使用Object.assign，加了一個 polyfill ，然后和 base js 里面的 polyfill 沖突了，由于統計日志的 js 先加載，所以報錯是在 base js 里面。
這個問題比較難排查的地方是：
復現環境比較苛刻
后端倉庫的改動（統計日志的 js ）和前端倉庫產生了關聯，版本回退難以排查
產生問題的 js 并不是出現報錯的 js
總結出現BUG在所難免，代碼邏輯、瀏覽器兼容性、網絡故障等等都會導致一些意想不到的問題，遇到問題首先不要慌，解決問題要有方法論，先把問題復現出來，然后使用 Chrome Devtools ，設置斷點，觀察數據條件，基本可以找出代碼錯誤，其他問題，可以類似高中生物實驗，結合條件對照，找出差異的條件，定位到問題，這個過程中需要敏銳的觀察力。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92053.html
摘要：讓你收獲滿滿碼個蛋從年月日推送第篇文章一年過去了已累積推文近篇文章，本文為年度精選，共計篇，按照類別整理便于讀者主題閱讀。本篇文章是今年的最后一篇技術文章，為了讓大家在家也能好好學習，特此花了幾個小時整理了這些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 讓你收獲滿滿！ 碼個蛋從2017年02月20...
摘要：摘要今年的先知白帽大會，與會者將能夠親身感受到非常多有趣的技術議題，如在國際賽事中屢奪佳績的團隊，其隊長將親臨現場，分享穿針引線般的漏洞利用藝術。從數據視角探索安全威脅阿里云安全工程師議題解讀本議題討論了數據為安全人員思維方式帶來的變化。 摘要： 今年的先知白帽大會，與會者將能夠親身感受到非常多有趣的技術議題，如HITCON在國際賽事中屢奪佳績的CTF團隊，其隊長Orange將親臨現場...
閱讀 1827·2021-09-22 15:54
閱讀 2938·2021-09-01 10:42
閱讀 3451·2019-08-30 15:56
閱讀 1445·2019-08-29 18:46
閱讀 2476·2019-08-29 10:57
閱讀 2719·2019-08-28 17:57
閱讀 3670·2019-08-23 18:14
閱讀 842·2019-08-23 17:03
