有哪些讓你目瞪口呆的 Bug ？

時(shí)間：2024-01-07 00:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-07 00:18:01 來源：網(wǎng)站運(yùn)營(yíng)

有哪些讓你目瞪口呆的 Bug ？：前端工程師，17年經(jīng)歷了一些靈異的bug：

鬼打墻

有一次后端同學(xué)重構(gòu)了一下 DSP 廣告平臺(tái)的接口，讓 Java 服務(wù)化提供接口， PHP 做 web 控制層掌管路由和透?jìng)鹘涌?，于是?duì)之前的接口URL重新規(guī)劃統(tǒng)一了一下，內(nèi)測(cè)沒問題后就高高興興上線了，然而沒過多久就有商家上報(bào)說頁(yè)面報(bào)錯(cuò)沒數(shù)據(jù)，于是我趕緊復(fù)現(xiàn)，但怎么都復(fù)現(xiàn)不出來，然后問商家瀏覽器是不是版本太低，網(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ā)出去。看了一眼瀏覽器上那一排插件，懷疑是不是插件搞的鬼，發(fā)現(xiàn)居然有屏蔽廣告的插件，大哥，你特么自己都在我們平臺(tái)上投廣告，你還裝屏蔽廣告插件。果斷讓他關(guān)閉這個(gè)插件，然后果然沒問題。原來我們的接口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)不出來。暈了，還是用遠(yuǎn)程協(xié)助吧。商家那里確實(shí)有 js 運(yùn)行報(bào)錯(cuò)，由于線上 js 也沒有 source map ，壓縮的代碼也看不懂，查半天也沒查出什么東西?；氐奖O(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 下載下來一看，長(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è)問題比較難排查的地方是：

1. 復(fù)現(xiàn)環(huán)境比較苛刻
2. 后端倉(cāng)庫(kù)的改動(dòng)（統(tǒng)計(jì)日志的 js ）和前端倉(cāng)庫(kù)產(chǎn)生了關(guān)聯(lián)，版本回退難以排查
3. 產(chǎn)生問題的 js 并不是出現(xiàn)報(bào)錯(cuò)的 js