我是這樣搞懂一個神奇的BUG

摘要: 經過分析用戶的行爲，纔想獲得爲何會出現這種狀況！

前兩天在BearyChat收到這樣的一個報警消息:

409 ？Conflict ？ 平時不多遇到這樣的錯誤，貌似很嚴重的樣子，嚇得我趕忙查看到底發生了什麼。

仔細查看錯誤詳情發現是由於使用同一個郵箱帳號屢次註冊致使後面的請求數據庫直接報錯。

可是，不該該啊！咱們是事先有作檢查的。若是該郵箱已經被註冊，會提醒而且不讓註冊的。難道對方直接調用API發請求？若是是這樣那就更加危險了，咱們已經被盯上了！

但是這樣作也沒什麼好處啊，而且IP顯示爲國內地址，若是真的好歹用國外的地址吧。想了想，仍是仔細分析到底出了什麼問題吧。

再往下一看，發現本身徹底是多想了，下面的用戶行爲就把他給徹底暴露了！

這些用戶行爲記錄默認按照倒序排列，咱們能夠從下往上一條條看用戶的使用軌跡。經過用戶行爲能夠得知出錯前的整個操做流程：

• 打開咱們網站的首頁
• 點擊「免費試用「進入註冊頁面
• 輸入郵箱
• 輸入密碼
• 再次出入密碼
• 點擊建立團隊
• 點擊建立團隊
• 團隊建立成功
• 報錯

那麼問題來了：有沒有什麼異常的行爲？ 答：有！他點擊了建立團隊兩次。

憑着我敏銳的嗅覺意識到多是因爲用戶快速點擊"建立團隊"按鈕兩次致使。經過時間記錄發現第一次點擊是在1.86m，第二次在1.87m。也就是說：用戶在很短的時間內快速點擊了兩次。

剛剛的用戶行爲記錄過濾了網絡請求，接下里咱們結合網絡請求一塊兒分析：

能夠發現有兩個/members/email的GET請求，而且都成功返回404，這裏代碼的意思是指該郵箱還沒有被註冊，能夠被使用。一個/members/create請求成功返回200，表示帳戶建立成功。最後報錯的/members/create請求失敗返回409。

到這裏基本肯定出錯緣由就是因爲用戶快速點擊建立團隊致使。

有沒有這種可能呢，嘗試復現一下看看唄！因而，我打開了註冊頁面，輸入郵箱和密碼，而後以超快的手速點擊建立團隊N次。哈哈哈哈，不出所料，被我成功復現了！

只要可以成功復現，這個BUG基本上就算被解決了，接下來就是去分析如何優化代碼防止出現這種狀況了。有兩個思路：1. 用戶點擊以後，設置被點擊的按鈕無效直到點擊請求徹底被處理；2. 將驗證郵箱是否存在的和建立團隊兩個異步事件想辦法合併爲一個原子操做。綜合考慮，決定使用第一種方案。由於實現簡單，對現有代碼改動不大。

總的來講：當在沒有堆棧信息或者報錯信息難以理解的時候，Fundebug記錄的用戶行爲真的頗有用。五星推薦前端開發接入到項目中！

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對一、微脈、青團社等衆多知名企業。歡迎你們免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：

blog.fundebug.com/2017/09/06/…