「前端 BUG 錄」遇到BUG應該如何排查

linong發表於2023-03-30
前端

我們日常工作中雖然會遇到很多 BUG，我們也熟練掌握使用搜尋引擎解決開發中的問題。

但是當遇到線上 BUG 應該如何排查呢？

我將我過往遇到的一些異常整理了出來，並將我遇到的干擾項以及問題點都做了詳細記錄。

希望對你有所幫助

排查路徑

  1. 確定是否變更導致？

    1. 如果是變更導致需要及時回滾止損。
    2. 非變更導致可以排查一下異常版本，根據當前情況靈活判斷是否恢復成某一個版本。

  2. 確定復現路徑。

    1. 這可以看使用者是否有反饋？
    2. 是否有日誌。fundebug、sentry、埋點等等
    3. 是否有特徵之類的？比如說機型、ip地域、服務主機等等

  3. 分析問題歸屬

    1. 先自查程式碼是否處理異常。比如說邏輯錯誤、相容性錯誤
    2. 然後排查是否資料異常。可以透過 charles 偽造資料，也可以透過 chrome 斷點控制檯修改。

  4. 測試環境驗證問題

    1. 將上述的問題在測試環境復現出來。證明確實是因為這裡有問題後就可以著手修復了。

  5. 修復|移交

    1. 自己的問題自己修。相容性babel、babel-polyfill 之類的。邏輯錯誤改邏輯。
    2. 合作方的問題，就反饋移交。

  6. 測試環境驗收

    1. 修完之後記得先驗證一下，別因為著急修 bug 又出現新的 bug。

  7. 預發&上線

    1. 分級釋出
    2. 做好線上迴歸

實戰案例

  1. 【公司2】FMP 異常

    1. 縮小時間節點

      • 3天前開始劣化

    2. 上線單歷史排查

      • 近期存在多次變更，但無明顯關聯，所以沒有進行回滾。

    3. 日誌查詢、特徵收集

      • 內部有一個自建的前端日誌平臺，收集了所有日誌，前端按需查詢分析

      • 透過（頁面、FMP5s+）查詢日誌，人眼找特徵。（這裡應該有自動啊喂）

        • 時間為非工作時間（有可能是服務不穩定，網路波動）
        • 頁面生存時間長（有可能是後臺，或者下班鎖屏等情況）
        • 聯絡特徵使用者，獲取一手反饋（使用者沒吐槽沒印象）
        • 頁面資源載入不穩定（網路或後臺+1）
        • 【真問題】UA 為 移動端 ios（mac 和 ios 這個關鍵特徵其實被我忽略了。因為我們是內網專案，所以我第一波沒有注意到這個特徵。老闆們用 mac 和 ios 有問題嗎？沒問題啊）
        • 網速不佳、網路不穩定（可不，用手機那網路能穩定到哪裡）

    4. 路徑確認，嘗試復現

      • 用上面找到的特徵，我都嘗試了沒有復現。

    5. 擴大搜尋範圍

      • 聯絡了 UA 對應的客戶端負責人，明確反饋因為客戶端記憶體洩漏，導致 webview 重啟。（這不應該有通報嗎，而且不應該只有我們在排查FMP異常的問題吧。）
    6. 移交、等待修復、總結匯報。
  2. 【公司1】上傳失敗
  3. 【公司3】使用者訪問慢

  4. 【公司2】使用者訪問超長白屏

    1. 針對使用者查詢訪問日誌（使用者名稱、時間）

    2. 特徵收集

      1. 資源載入異常（三方資源）

    3. 嘗試復現

      1. network block 資源。（非強關聯資源，載入不到不會白屏）
      2. charles 阻塞資源。（白屏）

    4. 分析問題制定修復方案

      1. 資源體積不大，但是耗時長，切不穩定。問題責任方在 cdn，偶現資源異常問題，屢教不改。
      2. 非強依賴資源沒有 async defer，導致頁面白屏，影響使用者體驗。
      3. 綜合考慮，defer 一下。
    5. 修復&測試環境驗證（同復現步驟）
    6. 上線

日誌平臺&監控平臺 功能點

  1. 日誌查詢

    1. 支援多條件

      1. 使用者
      2. 頁面
      3. traceid （page、SPA、ajax）具體的命名規則可以自定義。
      4. 上報的資訊，比如說 FMP、erorr、埋點、ajax、操作、還是自定義打點等等
      5. 其他通用資訊，比如說 ip、地域、ua

    2. 自動分析&告警通知

      1. 1 分鐘 10 次 500 觸發告警
      2. 1 分鐘 3 次 erorr data in not defined 觸發告警

    3. 大盤、報表

      1. xxx 介面 fmp90 5s，pv 1w+

本質上來講監控平臺就是把常用的日誌分析替你整合了。

本文參與了SegmentFault 思否面試闖關挑戰賽，歡迎正在閱讀的你也加入。

相關文章