国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ZoomQuiet / 1379人閱讀

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

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

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

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

收集哪些錯(cuò)誤信息

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


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

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

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

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

DNS域名劫持

http劫持

cdn或是其他資源文件訪問出錯(cuò)

服務(wù)器錯(cuò)誤

前端代碼錯(cuò)誤

前端兼容性問題

用戶操作出錯(cuò)

收集哪些信息

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

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

運(yùn)營(yíng)商

地理位置

訪問時(shí)間

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

系統(tǒng)版本

瀏覽器信息

設(shè)備分辨率

頁(yè)面的來(lái)源

用戶的賬號(hào)信息

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

收集用戶js代碼報(bào)錯(cuò)的信息

如何收集錯(cuò)誤的信息

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

前端錯(cuò)誤收集有兩大流派：

一個(gè)是虛擬機(jī)監(jiān)控，優(yōu)點(diǎn)是指標(biāo)齊全，并且可以進(jìn)行競(jìng)品監(jiān)控，缺點(diǎn)是反映不全，容易失真

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

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

訪問時(shí)間記錄 performance API

在chrome瀏覽器控制臺(tái)輸入Performance.timing，會(huì)得到記錄了一個(gè)瀏覽器訪問各階段的時(shí)間的對(duì)象。

進(jìn)行錯(cuò)誤收集的時(shí)候，可以對(duì)比這些時(shí)間，看錯(cuò)誤發(fā)生在什么階段

DNS 查詢耗時(shí) ：domainLookupEnd - domainLookupStart

TCP 鏈接耗時(shí) ：connectEnd - connectStart

request 請(qǐng)求耗時(shí) ：responseEnd - responseStart

解析 dom 樹耗時(shí) ： domComplete - domInteractive

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

domready 時(shí)間 ：domContentLoadedEventEnd - navigationStart

onload 時(shí)間 ：loadEventEnd – navigationStart

其他方法

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

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

SPA的話，記錄前一個(gè)頁(yè)面卸載的時(shí)間

記錄訪問過程的時(shí)間

在head標(biāo)簽解析后，渲染body標(biāo)簽前加入script標(biāo)簽進(jìn)行打點(diǎn)，一般將這個(gè)時(shí)間視為白屏?xí)r間

捕獲DOMContentLoaded事件來(lái)記錄dom元素加載完畢的時(shí)間

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

捕獲load事件記錄頁(yè)面加載完成的時(shí)間

腳本錯(cuò)誤收集 window.onerror

window.onerror可以捕捉運(yùn)行時(shí)錯(cuò)誤，可以拿到出錯(cuò)的信息，堆棧，出錯(cuò)的文件、行號(hào)、列號(hào)

要注意以下幾點(diǎn)：

要把window.onerror這個(gè)代碼塊分離出去，并且比其他腳本先執(zhí)行（注意這個(gè)前提！）即可捕捉到語(yǔ)法錯(cuò)誤。

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

不能捕獲promise的錯(cuò)誤信息

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

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

promise的錯(cuò)誤處理

promise除了使用catch方法來(lái)捕獲錯(cuò)誤，還可以使用window的unhandledrejection事件捕獲異常的

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

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

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

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

上報(bào)錯(cuò)誤的方式

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

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

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

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

參考

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93994.html

相關(guān)文章

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

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

    acrazing 評(píng)論0 收藏0

  • 前端埋點(diǎn) - 報(bào)錯(cuò)監(jiān)控

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

    stackfing 評(píng)論0 收藏0

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

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

    wangdai 評(píng)論0 收藏0

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

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

    Tecode 評(píng)論0 收藏0

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

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

    jkyin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<