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

本文邏輯：

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/