亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端錯誤監(jiān)控與收集探究

ZoomQuiet / 1444人閱讀

摘要：這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。

編寫代碼只是做好項目的一小部分，寫代碼難免會碰到錯誤。因此，在項目上線后，我們還需要主動對項目的錯誤進行收集，不能等用戶發(fā)現(xiàn)錯誤，再聯(lián)系我們，我們再去處理。這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。

本人并沒有做過相關(guān)的工作，下面的文章只是我在學(xué)習(xí)中的一點思考和總結(jié)，可能有比較多不足和錯誤的地方，希望大家指正和指導(dǎo)。

本文章為前端進階系列的一部分,
歡迎關(guān)注和star本博客或是關(guān)注我的github

收集哪些錯誤信息

先從一個面試題開始吧。騰訊第二輪電話面試的一個題目：如果用戶使用網(wǎng)頁，發(fā)現(xiàn)白屏，現(xiàn)在聯(lián)系上了你們，你們會向他詢問什么信息呢？


一個個去堆答案沒有意思，我們換個思路，先想一下為什么會白屏？

錯誤發(fā)生在什么環(huán)節(jié)

跟我之前的性能優(yōu)化的文章一樣，我們以用戶訪問頁面的過程為順序，大致排查一下

用戶沒打開網(wǎng)絡(luò)

DNS域名劫持

http劫持

cdn或是其他資源文件訪問出錯

服務(wù)器錯誤

前端代碼錯誤

前端兼容性問題

用戶操作出錯

收集哪些信息

通過以上可能發(fā)生錯誤的環(huán)節(jié)，我們需要向用戶手機一下以下的用戶信息

當(dāng)前的網(wǎng)絡(luò)狀態(tài)

運營商

地理位置

訪問時間

客戶端的版本(如果是通過客戶端訪問)

系統(tǒng)版本

瀏覽器信息

設(shè)備分辨率

頁面的來源

用戶的賬號信息

通過performance API收集用戶各個頁面訪問流程所消耗的時間，看錯誤出現(xiàn)在什么環(huán)節(jié)

收集用戶js代碼報錯的信息

如何收集錯誤的信息

現(xiàn)在話題來到了如何收集錯誤信息了。

前端錯誤收集有兩大流派：

一個是虛擬機監(jiān)控，優(yōu)點是指標齊全，并且可以進行競品監(jiān)控，缺點是反映不全，容易失真

另一個是腳本監(jiān)控，優(yōu)點是可以收集海量真實數(shù)據(jù)，缺點是影響性能，采樣少的情況下容易失真。

這里暫時只講腳本監(jiān)控（挖個坑，之后可能填）

訪問時間記錄 performance API

在chrome瀏覽器控制臺輸入Performance.timing，會得到記錄了一個瀏覽器訪問各階段的時間的對象。

進行錯誤收集的時候，可以對比這些時間，看錯誤發(fā)生在什么階段

DNS 查詢耗時 ：domainLookupEnd - domainLookupStart

TCP 鏈接耗時 ：connectEnd - connectStart

request 請求耗時 ：responseEnd - responseStart

解析 dom 樹耗時 ： domComplete - domInteractive

白屏?xí)r間 ：responseStart - navigationStart

domready 時間 ：domContentLoadedEventEnd - navigationStart

onload 時間 ：loadEventEnd – navigationStart

其他方法

記錄訪問開始的時間可有以下的方法：

服務(wù)器將訪問的時間渲染到頁面上

SPA的話，記錄前一個頁面卸載的時間

記錄訪問過程的時間

在head標簽解析后，渲染body標簽前加入script標簽進行打點，一般將這個時間視為白屏?xí)r間

捕獲DOMContentLoaded事件來記錄dom元素加載完畢的時間

在首屏頁面的所有圖片加載完后進行記錄，保存首屏?xí)r間

捕獲load事件記錄頁面加載完成的時間

腳本錯誤收集 window.onerror

window.onerror可以捕捉運行時錯誤，可以拿到出錯的信息，堆棧，出錯的文件、行號、列號

要注意以下幾點：

要把window.onerror這個代碼塊分離出去，并且比其他腳本先執(zhí)行（注意這個前提?。┘纯刹蹲降秸Z法錯誤。

由于網(wǎng)絡(luò)請求異常事件不會冒泡，需要在捕獲階段進行處理

不能捕獲promise的錯誤信息

跨域資源需要專門處理，需要在script標簽加上crossorigin屬性，服務(wù)器設(shè)置Access-Control-Allow-Origin

window.onerror 函數(shù)只有在返回 true 的時候，異常才不會向上拋出，否則即使是知道異常的發(fā)生控制臺還是會顯示 Uncaught Error: xxxxx。

promise的錯誤處理

promise除了使用catch方法來捕獲錯誤，還可以使用window的unhandledrejection事件捕獲異常的

window.addEventListener("unhandledrejection", function(e){
  // Event新增屬性
  // @prop {Promise} promise - 狀態(tài)為rejected的Promise實例
  // @prop {String|Object} reason - 異常信息或rejected的內(nèi)容

  // 會阻止異常繼續(xù)拋出，不讓Uncaught(in promise) Error產(chǎn)生
  e.preventDefault()
})
try catch

無法捕捉到語法錯誤，只能捕捉運行時錯誤；
可以拿到出錯的信息，堆棧，出錯的文件、行號、列號； 需要借助工具把所有的function塊以及文件塊加入try,catch，可以在這個階段打入更多的靜態(tài)信息。

要注意的是try catch只能捕獲同步代碼的異常，對回調(diào)，setTimeout，promise等無能為力

上報錯誤的方式

后端提供接口，前端ajax上傳

創(chuàng)建一個新的圖片，url參數(shù)帶上錯誤信息

function report(error) {
  var reportUrl = "http://xxxx/report";
  new Image().src = reportUrl + "error=" + error;
}
最后

本文章為前端進階系列的一部分,
歡迎關(guān)注和star本博客或是關(guān)注我的github

參考

前端魔法堂——異常不僅僅是try/catch

前端優(yōu)化-如何計算白屏和首屏?xí)r間

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93994.html

相關(guān)文章

  • 平時積累的前端資源，持續(xù)更新中。。。

    本文收集學(xué)習(xí)過程中使用到的資源。 持續(xù)更新中…… 項目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端 微信公眾號 小程序 webpack GraphQL 性能與監(jiān)控 高質(zhì)文章 趨勢 動效 數(shù)據(jù)結(jié)構(gòu)與算法 js core 代碼規(guī)范...

    acrazing 評論0 收藏0

  • 前端埋點 - 報錯監(jiān)控

    摘要：說起埋點又到了談起前端項目中數(shù)據(jù)收集與監(jiān)控，那么今天來簡單的聊下前端報錯監(jiān)控的埋點。錯誤監(jiān)控的錯誤監(jiān)控主要是為了發(fā)現(xiàn)服務(wù)接口返回值的問題。如果為，則偵聽器只在目標或冒泡階段處理事件。 說起埋點又到了談起前端項目中數(shù)據(jù)收集與監(jiān)控，那么今天來簡單的聊下前端報錯監(jiān)控的埋點。 首先先安利下自己做的報錯監(jiān)控的項目 FE-Monitor 歡迎 issue 和 star 。 首先我們可以看下前端做報...

    stackfing 評論0 收藏0

  • [ 好文分享 ] 美團酒店Node全棧開發(fā)實踐

    摘要：我所在的美團酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開發(fā)團隊，這一切使得我們的前后端分離推進的很徹底。日志監(jiān)控平臺日志監(jiān)控平臺是美團內(nèi)部的一個日志收集系統(tǒng)，目前美團統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺也是以格式日志來收集。 轉(zhuǎn)自：美團技術(shù)團隊 作者：美團技術(shù)團隊 分享理由：很好的分享，可見，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...

    wangdai 評論0 收藏0

  • OneAPM 云監(jiān)控部署與試用體驗

    摘要：作為骨灰級粉絲，一直以來對第三方監(jiān)控都是拒絕的。例如白屏?xí)r間首屏?xí)r間腳本錯誤網(wǎng)頁加載就緒時間各種瀏覽器的訪問情況，甚至能了解不同瀏覽器運營商地區(qū)用戶的訪問狀況。腳本錯誤在所難免，錯誤進一步導(dǎo)致網(wǎng)站部分功能無法使用。 作為 Zabbix 骨灰級粉絲，一直以來對第三方監(jiān)控（APM）都是拒絕的。一來覺得收費，二來擔(dān)心數(shù)據(jù)被人所知，三來覺得 Zabbix 牛逼到無可取代。但是，隨著 APM 市...

    Tecode 評論0 收藏0

  • New Relic性能監(jiān)控（一）概覽

    摘要：性能監(jiān)控一概覽瑯琊書生本系列文章基于公司使用的經(jīng)驗，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希望可以給需要的朋友帶來幫助。提供了端到端的監(jiān)控能力，從前端頁面性能，到后臺服務(wù)端的響應(yīng)速度，都有非常詳盡的監(jiān)控數(shù)據(jù)。 New Relic性能監(jiān)控（一）概覽 2018-04-12 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗，鑒于國內(nèi)較少有這方面的文章，因此把...

    jkyin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<