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

摘要: 通過分析用戶的行為，才想得到為什么會出現這種情況！

本文邏輯：

1. 發現問題，截圖示意
2. 解決問題的過程記錄
3. 總結用處，并軟推薦一發

前兩天在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累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！

版權聲明

轉載時請注明作者Fundebug以及本文地址：

https://blog.fundebug.com/2017/09/06/fundebug-user-behavior-help-debug/