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