前端監控你須要瞭解的一些問題

原文連接

前言

做爲一個迷茫的小前端，不清楚本身想要什麼，不知道怎麼努力。跟導師溝經過後，導師說，既然這樣，那我每週給你佈置一些做業。我說好啊，因而……

導師提問：js 錯誤監控，基本的實現方式是什麼，要注意什麼？有哪些手段能捕獲到 js 異常？要實現一個可用的監控方案有哪些注意事項？捕獲到的異常的具體內容是什麼？怎麼上報？應該上報哪些信息纔能有助於問題定位？

正文

看到問題，不急着去找答案，先給本身上基礎三問：

• what：監控是什麼及監控什麼？
• why：爲何監控？
• how：怎麼去監控？

1.監控是什麼 及 監控什麼

監控的本質是數據採集。

擴展開來還有後面的數據處理、數據分析展現、提醒和報警。

那麼要監控什麼，就看你關注哪些數據。

對於前端來講，咱們關注的大體有：

• 用戶行爲數據
  • PV/UV
  • 用戶在每個頁面的停留時間
  • 用戶經過什麼入口來訪問該網頁
  • 用戶在相應的頁面中觸發的行爲
• 性能數據
  • 頁面渲染時間
  • 白屏時間
  • 靜態資源 總體加載時間
  • 接口請求 響應時間
  • 頁面交互 動畫完成時間（交互響應速度）
• 異常
  • js 錯誤
  • 網絡異常
  • 業務異常
  • 資源異常 （缺失、被篡改、緩存不一樣步等）

爲何監控

監控是爲了知道哪裏作的很差，哪裏有問題，而後才能解決問題，作的更好。

• 用戶行爲數據其實就是各個頁面、活動、推廣方式、入口的價值體現。
• 性能數據則與用戶體驗息息相關。
• 而全部的異常都是咱們不但願出現的。

怎麼監控

這個問題——前面列了這麼多要監控的東西——感受很差回答。

根據最開始引用部分的問題，先來看看 js 錯誤的監控。

監控 js 錯誤

1. 使用 try catch ，或者 Promise 的catch 來捕獲錯誤
2. window.onerror 以及 window.onunhandledrejection 來捕獲錯誤。

注意事項

1. 使用 window.onerror 這種全局捕獲，最好寫在全部 js 腳本的前面，否則前面的出錯沒法捕獲。
2. onerror 沒法捕獲 promise 拋出的錯誤，此時能夠用 onunhandledrejection
3. 使用 onerror 還要注意 "script error". 即當訪問的 js 腳本跨域時，爲避免信息泄露，語法錯誤的細節將不會報告，而是返回一個簡單的 "script error"。若是想要監控到錯誤詳細內容，須要作：
   • 引用 js 文件時，在 script 標籤上配置 crossorigin 屬性
   • 服務器端響應時配置好響應頭 Access-Control-Allow-Origin:*

捕獲到的異常的具體內容是什麼

這個問題乍一看不知從何提及。但仔細一想就會發現，window.onerror 函數獲取到的參數，就是它捕獲的異常的內容。

• message: 錯誤信息（字符串）。可用於HTML onerror=""處理程序中的event。
• source：發生錯誤的腳本URL（字符串）
• lineno：發生錯誤的行號（數字）
• colno：發生錯誤的列號（數字）
• error：Error對象（對象）

相似的 onunhandledrejection 捕獲到的信息以下：

• promise： reject 的 Promise 對象 （promise）
• reason： 一個值或對象，說明爲何reject，來自 reject 的參數

怎麼上報

錯誤信息頻繁發送上報請求，會對後端服務器形成壓力。 項目中咱們可經過設置採集率，或對規定時間內數據彙總再上報，減小請求數量，從而緩解服務端壓力。

應該上報哪些信息纔能有助於問題定位

錯誤信息、發生錯誤的腳本、行號、列號、堆棧信息。

PS:其中行號和列號可能由於打包的緣由使得錯誤很難追蹤，這時可使用 sourceMap.

擴展閱讀

MDN-onerror

MDN-unhandledrejection

MDN-onunhandledrejection

大前端時代前端監控的最佳實踐

sentry js 錯誤上報

HTML標準

sourceMap