項目接入apm後錯誤報警總結

此文已由做者張磊受權網易雲社區發佈。

歡迎訪問網易雲社區，瞭解更多網易技術產品運營經驗。

前言：

後端服務通常都有監控措施，通常能夠及時發現線上錯誤，可是不少項目的前端卻沒有線上報警服務，即便有錯誤，前端根本沒法感知，但實際上用戶使用的系統、瀏覽器等環境十分複雜，仍是有比較高的機率出現 bug 的。這時候線上錯誤的發現，通常有三個方向，要麼依賴於用戶報告，要麼依賴於測試發現，要麼是本身使用中發現問題。依靠用戶報告，這就嚴重影響了體驗，並且不少用戶不會報告或者其餘緣由復現率低，致使沒有報告。因此爲了解決該問題，那前端須要一個服務，遇到錯誤的時候，能主動上報問題，並做提醒，進行排查。同時也能夠在測試環境也部署該服務，有時候測試沒有發現的問題，但這個主動上報就能幫咱們提前發現代碼 bug，再者咱們能夠和用戶同時接收到錯誤信息，那麼咱們就能夠及早修復問題，把問題的影響儘量的縮小，靜默解決。

環境：

項目是 NEJ 和 regular 開發的，以 SPA 頁面爲主。

實施：

這裏是使用 apm 做爲線上報警的基礎服務。同時對線上線下環境分開處理。

階段成果：

上線該服務幾個月，線上線下的報錯發現的有幾十個。最近愈來愈穩定，出錯率愈來愈低了。固然也遇到了一些很難復現的 bug。

錯誤分析：

若是把錯誤僅僅當成錯誤來看，這確定是不對的，應該從錯誤中發現些什麼，之後注意那些坑，畢竟已經有幾十個錯誤做爲參照物了，也能夠拿來分析了。錯誤能夠歸爲幾類：

1. Uncaught TypeError: Cannot read property 'ref0' of null這種通常是在 setTimeout 裏對 this.$refs 進行操做，通常作法是在 setTimeout 裏，進行二次檢測，但更好的作法是 clearTimeout。

2. Uncaught TypeError: Cannot read property '__cache' of undefined這種通常是在 setTimeout 裏對接口請求進行操做，此時路由頁面已經觸發 destory 掉了，致使訪問 this 對象獲取不到對應的方法。通常作法是在 setTimeout 裏，進行二次檢測，但更好的作法是 clearTimeout。

3. 概率出錯線下測試代碼無問題發生，可是線上用戶報錯，這裏通常是沒有寫清楚邊界狀況形成的。解決方案，經過錯誤查找到對應代碼，分析邏輯。

4. Uncaught TypeError: Cannot read property 'indexOf'/'replace' of undefined後端數據返回不規範形成的，可能約定是 string 可是實際中沒有返回值，又或者接口的錯誤處理有問題形成的。實際上二者皆有。

5. 引入公司其餘服務腳本報錯 這些腳本的錯誤，通常是通知相關人員進行 fix。

6. 由於擴展致使的報錯 曾經一個測試裝了一個擴展，只要訪問某些頁面，短期能夠出現 1000+ 的錯誤

7. 第三方瀏覽器，或者手機瀏覽器報錯

   錯誤信息    
   SecurityError (DOM Exception 18): Blocked a frame with origin "https://a.com" from accessing a frame with origin "https://b.com". Protocols, domains, and ports must match.
   堆棧信息    
   qqIframeRef@https://a.com/#/m/a/:54:67qqGetVideos@https://a.com/#/m/a/:68:53initVideoInstance@https://a.com/#/m/a/:115:45hook@https://a.com/#/m/a/:151:42global code@https://a.com/#/m/a/:320:26

   這種通常是第三方加的腳本，忽略便可。

8. Uncaught ReferenceError: t is not defined這個錯誤，一開始以爲和一、2是相似的，邊界未處理，再加上是 lib 庫的代碼。後來實際上研究了邏輯，才發現使用的 lib 部分代碼丟失，在處理 ctrl + up 的時候的回調函數沒了。。。後續解決方案，研究了下邏輯，不影響使用，刪掉該段代碼。

靜態資源和後臺服務不一樣源

後來對靜態資源單獨一個域名，一開始沒有考慮到不一樣源的問題，apm 不報錯，覺得是代碼質量好了不少。後來發現錯誤集中在 firefox、ie 上，錯誤信息都是 script error。想到域名的問題，才發現 apm 至關於中止工做一段時間了。這個問題的解決方案，須要對 nej 打包進行處理，容許 script 標籤添加屬性。同時容許異步加載的 script 添加屬性便可。接着對靜態資源的服務器添加跨域 header 配置。

Access-Control-Allow-Origin: *

參考

1. https://stackoverflow.com/questions/28901166/how-do-i-add-the-crossorigin-tag-to-a-dynamically-loaded-script

2. https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror

3. http://www.alloyteam.com/2017/03/jserror1/

免費體驗雲安全(易盾)內容安全、驗證碼等服務

更多網易技術、產品、運營經驗分享請點擊。

相關文章：
【推薦】 網易嚴選後臺系統前端規範化解決方案