原文連接javascript
前言
做爲一個迷茫的小前端,不清楚本身想要什麼,不知道怎麼努力。跟導師溝經過後,導師說,既然這樣,那我每週給你佈置一些做業。我說好啊,因而……html
導師提問:js 錯誤監控,基本的實現方式是什麼,要注意什麼?有哪些手段能捕獲到 js 異常?要實現一個可用的監控方案有哪些注意事項?捕獲到的異常的具體內容是什麼?怎麼上報?應該上報哪些信息纔能有助於問題定位?前端
正文
看到問題,不急着去找答案,先給本身上基礎三問:java
- what:監控是什麼及監控什麼?
- why:爲何監控?
- how:怎麼去監控?
1.監控是什麼 及 監控什麼
監控的本質是數據採集。git
擴展開來還有後面的數據處理、數據分析展現、提醒和報警。github
那麼要監控什麼,就看你關注哪些數據。web
對於前端來講,咱們關注的大體有:後端
- 用戶行爲數據
- PV/UV
- 用戶在每個頁面的停留時間
- 用戶經過什麼入口來訪問該網頁
- 用戶在相應的頁面中觸發的行爲
- 性能數據
- 頁面渲染時間
- 白屏時間
- 靜態資源 總體加載時間
- 接口請求 響應時間
- 頁面交互 動畫完成時間(交互響應速度)
- 異常
- js 錯誤
- 網絡異常
- 業務異常
- 資源異常 (缺失、被篡改、緩存不一樣步等)
爲何監控
監控是爲了知道哪裏作的很差,哪裏有問題,而後才能解決問題,作的更好。api
- 用戶行爲數據其實就是各個頁面、活動、推廣方式、入口的價值體現。
- 性能數據則與用戶體驗息息相關。
- 而全部的異常都是咱們不但願出現的。
怎麼監控
這個問題——前面列了這麼多要監控的東西——感受很差回答。跨域
根據最開始引用部分的問題,先來看看 js 錯誤的監控。
監控 js 錯誤
- 使用 try catch ,或者 Promise 的catch 來捕獲錯誤
- window.onerror 以及 window.onunhandledrejection 來捕獲錯誤。
注意事項
- 使用 window.onerror 這種全局捕獲,最好寫在全部 js 腳本的前面,否則前面的出錯沒法捕獲。
- onerror 沒法捕獲 promise 拋出的錯誤,此時能夠用 onunhandledrejection
- 使用 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