一次現網翻車經歷與總結

0. 前言

仍是和平時同樣，作完需求，測試經過，愉快地上線。運營側在大推，推了好幾天。忽然有一天，都來反饋說頁面本身彈出dialog並且關不掉：

這就奇怪了，都跑了幾天的項目沒問題，怎麼忽然翻車了？

背景：一個專門作活動的git項目，僅在微信和手Q環境運行。用的是preact，項目結構是該有的都有，pages下每個文件夾都是一個頁面，也能支持第2級文件夾一個頁面。每個活動頁面就是一個文件夾，互不影響，mpa。咱們的ci系統很慢，部署大項目須要幾分鐘，而後加上各類環節最快要半小時走完流程，接下來很快將會用另外一個方案替代。我活動已經上線幾天，是一個運營活動，推廣那些學習課程的。同事他們另外一個活動後來上線，是一個年度總結活動。突發現網問題，時間很是很是緊張並且是2018最後一工做日前一天晚上，並且咱們兩個活動必須在元旦前發出去（運營壓時間的活動準時上線的重要性你們應該都懂）

項目文件夾

pages
-- act1文件夾
---- conponents
---- index.jsx
---- index.html
-- act2文件夾
---- act4文件夾（都同上）
---- act5文件夾
-- act3文件夾
複製代碼

最後act1.html，act4.html，act5.html，act3.html都是不一樣頁面

1. 開始第一次排查

都上線幾天，忽然出事，能夠確定的是，不是業務的bug。剩下的緣由：現網資源被更改、npm包被更新。跑了一下主分支master代碼，沒問題。npm run dist模擬生產環境也沒問題。

通過詢問，原來同事剛剛發佈，發完還沒合併主分支。一看他的分支，果真是更新了。查了一下ci系統，也找到了記錄。因而，切換他的分支跑起來項目代碼，而後打斷點，彈出方法的函數根本都沒有進去，並且控制彈框彈出的state都不是true。

這種狀況，首先讓我懷疑人生一陣，代碼明明沒問題並且state也沒有讓他彈出來。因而再對比現網的和我以前發佈的正常版本，來到同一個頁面，發現新代碼的主邏輯js多了10行代碼！！一瞬間我立刻想到的是babel插件的問題。由於我正在用同事寫的一個Babel插件，功能就是在react的jsx中寫相似像vue那種命令。

現網彈框無解彈出關不掉 =》 所對應的state並無爲true =》 代碼多了10行 =》 babel插件有問題

2. 升級基礎庫版本之坑

問了一下，原來他爲了fix那個插件在preact中的一些坑和更新了preact-compact。爲何呢？由於他們的活動須要引入antd否則時間上有風險，引入antd在目前preact的版本並不能跑起來須要升級。升級完成後，antd大部分組件能夠正常使用，但select組件是undefined沒法使用，效果就是一個叫undefined的什麼都沒有的標籤渲染在頁面上，因此他在能跑大部分antd組件的基礎上，再手寫一個很完美的select。

可是，就是由於升級，致使這個插件有bug。時間緊急，也沒有時間去管。定位到問題，立刻叫測試回滾，現網個人活動正常運行。接下來的計劃是，我把全部的用了指令的地方改回常規方法，而後跟着他們一塊兒發出去。對於版本，測試穩定後，把package.json的^號去掉，把版本穩定下來。剛恰好，他們那邊被leader們盯得緊，一些體驗問題也要改，因此我也能夠坐個順風車。我改完了，自測沒問題，先撤了。他們改完了也自測經過，已經是差很少10點，部署上了預發佈。

晚上的時候，看見企業微信上的他們順利上預發佈的消息，我也放心了，內心想着次日過去驗證一波就上線。

必需要用antd =》不能用只能升級基礎庫 =》 致使babel插件問題出現（做者也投入需求沒時間理）=》 個人活動和年度總結活動一塊兒放同一個分支上線

3. 預發佈資源丟失

當我在公司，代理配置上了預發佈，發現資源404和502，一些主js丟失頁面崩潰。並且有的手機有緩存復現不了，連電腦修改ua跑微信環境也發現大部分圖片資源失敗。一開始想到的就是咱們的ci系統有點坑，從新部署一次就能夠。浪費半小時，結果仍是同樣。這時候，去檢查資源，通過老司機們的同心合力，肯定了緣由以及解決方案：

咱們的部署是增量部署，也就是相似於電腦複製粘貼，有衝突的覆蓋無衝突的不變。我前幾天上線，今天也改了新代碼可是一些靜態資源和一些頁面徹底沒有變化，cdn映射也不變，資源名字仍是資源+原哈希。問題的根源：這週週一的時候，機器上的文件被清了一次，如今才知情。因而手動把資源拷貝到服務器上，順利跑起來預發佈環境。此時，炸出了這邊資源匹配規則不合理的問題，應該改進一下。

預發佈資源404和502 =》 機器被清理過 =》 手動補回資源

4. 忽然發現遺漏點

預發佈如期而至跑起來，預發佈驗證流程愉快走起，沒問題後全量發佈現網，發佈留守時，拉了一堆人體驗都沒有問題。突然，一個產品反映，有一個課程不能購買，提示：「請先測試」。測試？什麼鬼？測試的東西跑到現網去了？可是又不是必現的問題，某些課程存在這個問題。因而抓包拿到錯誤碼，後臺說不知道這是什麼緣由，我也忽然很絕望，leader看見我這樣，說：「來，跟我走，咱們一塊兒去找他們，不要在這裏發企業微信，這樣你要搞到何時。」 咱們找到後臺leader，說這個是好久好久以前的邏輯，須要考試才能買這種課（才知道原來課程還有普通的和難的，難的須要考試！這裏的「請先測試」文案太抽象，實在容易讓人疑惑，咱們開發和測試一看上去就以爲是咱們業務流程中的功能測試）。可是，運營說發佈的時候特意驗證過，她能夠買。綜合兩點，只有一個可能，運營好久以前就考過試了。

後來和產品對，最後結論是，產品測試開發都沒有知道這個事情，好久以前的邏輯，並且剛恰好運營本身考過試，一直以來都以爲這一切理所固然。此時，先後端產品測試都在，都帶着各自的leader，反推一系列的問題找出緣由達成一致。方案： 下架尖子課程、修改文案、增長跳轉、強行讓購買，考慮到時間緊急，並且運營側必須推尖子課程，最後採起了修改文案的方法，讓用戶下載app去考試，功能等下期需求完善。不得不佩服老員工解決問題能力和團隊溝通能力，若是我本身估計搞到晚上了。

購買難的那種課程彈出「請先測試」 =》 這種課程須要考試 =》 除了運營你們都不知道這種邏輯並且運營自測沒問題 =》 確認運營曾經考過試，如今能買課 =》 形成一切理所固然的假象 =》 修改文案、下期完善

5. 兼容性

我這邊驗證沒問題，由於以前遭遇過測試低端機比較晚，發佈前很趕並且風險大。剛恰好，他們就遇到了，並且是，部門大老闆用安卓機體驗到一些很差的地方，他們那邊繼續修改。除了一些體驗問題，而後最後定位到一個fastick的庫的問題，是爲了解決點透問題的，只是兼容性上出了一些問題。後來有一個操做，有一個同事發現來到一個頁面的彈框怎麼都關不掉。問題來了，幾個同事跑的是不一樣結果。這很明顯是node_modules的問題，根本上仍是package.json的版本。通過對比，咱們package.json就取掉了^符號而已。

此時，咱們的package.json通過幾個過程：我發佈時是舊的react和preact =》 他們有一個環節須要antd升級了compact並刪除了lock.json =》 個人活動發現babel插件問題，修改代碼自測經過，一個正則把 package.json的全部^ 去掉保證版本穩定 =》 他們幾我的不一樣的node_modules

爲何還有版本坑？因而咱們開始了rm -rf掉node_modules從新安裝，後來你們都是同樣的效果了。在咱們尋找解決方案的時候，忽然纔想到，去掉package.json的全部^ 並不能解決問題，這不能阻止依賴中的依賴的版本，說鎖版本最靠譜的仍是lock.json。又一番修改，肯定最終package-lock.json，終於上線了！

package.json屢次被修改 =》 自測穩定並鎖住最終版本

6. 最後

事情並無結束，有一個同事把工具庫裏面的一個函數名字寫錯，現網再出bug，很快解決。後來工具庫的做者說這個是廢棄的方法，因而又一波討論下次版本怎麼廢棄沒用的函數。

此次事情引發了不少leader重視，你們都反思並總結，針對問題提出解決方案。

• 線上資源和預發佈資源不一致 =》 腳本上的加強（當機器上的文件被清除，本來的增量部署就會有問題）
• 部署環境坑 =》 接下來會用新的構建和ci，git push或者打tag會自動部署
• 版本升級 =》 升級的時候須要全面測試、照顧歷史代碼、知會
• 老邏輯 =》 新需求須要問清楚、主動推動整個流程、特殊照顧新人

爲何用preact？由於小，並且我也喜歡上一些寬鬆語法：style能夠寫字符串、不用在map元素中寫key屬性、無需擔憂對被卸載的組件setstate的坑（另外一篇文章有講到這個問題）。可是用了preact意味着不能用react新特性，反正目前是這樣，之後應該能夠支持。活動頁面性能要求高，並且兼容性要作到極致，但preact在咱們項目暫時跑不了antd。用不用antd不是問題，可是用不了antd就是一個問題，遲早會踩坑的。

對於咱們這個項目，結構就是多頁面，每個頁面獨立。可是每一次發佈也意味着全部的活動頁面也會被從新發一次。若是修改基礎庫，全部的活動都被影響。咱們的方案是：刪掉以前的頁面，發佈的時候利用增量發佈的特性直接發某個需求，可是舊頁面須要找到舊分支才能修改，有點麻煩；或者是穩定版本庫，長期不用動它；或者是先用着，等到要改的時候順便改，舊頁面先在分支中刪掉。路過的大蝦們，對於後續維護上若是有更好的方法能夠提一下。

「我只是想安安靜靜寫代碼」，這是多美好的指望啊，但是事實上並不能，你要照顧整個團隊。你們都是一個team，不管遇到什麼都要一塊兒面對，你們都要聚在一塊兒，誰慢了誰快了都要照顧一下。導師也屢次和我說：永遠別覺得你本身跑起來項目就完事了。此次說背鍋，貌似誰也沒有特別明顯的背鍋嫌疑。說你們都沒錯，也是有道理，誰都是作好了本身本分並且正常上線，面對任何難題都解決。說你們都錯了，也是說得通，你們都是隻看本身的一畝三分地，沒照顧整個團隊，沒照顧整個項目。

最後一個工做日，雖然跌跌撞撞，可是得到了成長，給2018職業生涯畫上句號