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