前端程序員如何明確定位,、排查前端生產(chǎn)問(wèn)題,？二、分析錯(cuò)誤詳情通過(guò)webfunny前端監(jiān)控系統(tǒng),，我們可以把線上的錯(cuò)誤日志統(tǒng)計(jì)出來(lái)了,，那如何解析這些錯(cuò)誤日志呢。比如：解析出用戶(hù)的機(jī)型,，版本,，系統(tǒng)平臺(tái)，影響范圍,，以及具體的錯(cuò)誤位置,，從而提高前端工程師解決問(wèn)題的效率。方法能夠利用的功能都已經(jīng)用的差不多了,，但是它真的可以幫我們定位和解決所有前端線上的問(wèn)題嗎,？線上能夠修復(fù)的問(wèn)題，前端工程師肯定是遇到都在盡量修復(fù),，但是前端線上的問(wèn)題頻發(fā),。當(dāng)客服反饋一個(gè)問(wèn)題，你發(fā)現(xiàn)沒(méi)有測(cè)試機(jī)型,，無(wú)法復(fù)現(xiàn)用戶(hù)錯(cuò)誤的時(shí)候,，讓你來(lái)修復(fù)這個(gè)問(wèn)題，前端只能兩眼一抹黑無(wú)能為力,。所以前端監(jiān)控的建設(shè)很有必要性,。webfunny能夠輕松完成打點(diǎn)業(yè)務(wù)需求。webfunny還對(duì)埋點(diǎn)數(shù)據(jù)進(jìn)行了漏斗分析,，清晰查看兩個(gè)埋點(diǎn)的留存率,。國(guó)內(nèi)好用的前端監(jiān)控和前端行為分析方案

搭建前端監(jiān)控系統(tǒng)（四）接口請(qǐng)求異常監(jiān)控篇如何監(jiān)控前端接口請(qǐng)求報(bào)錯(cuò)？可能有前端程序員會(huì)認(rèn)為接口的報(bào)錯(cuò)應(yīng)該由后臺(tái)來(lái)關(guān)注,，統(tǒng)計(jì),，并修復(fù)。確實(shí)如此,，而且后臺(tái)服務(wù)有了很多成熟完善的統(tǒng)計(jì)工具,，完全能夠應(yīng)對(duì)大部分的異常情況,，那么為什么還需要前端對(duì)接口請(qǐng)求進(jìn)行監(jiān)控呢。原因很簡(jiǎn)單,，因?yàn)榍岸耸莃ug的首要發(fā)現(xiàn)位置,，在前端程序員幫后臺(tái)背鍋之前怎么快速把鍋甩出去呢？這時(shí)候,，劃重點(diǎn)每個(gè)前端程序員都需要有一個(gè)接口的監(jiān)控系統(tǒng),，這樣出現(xiàn)問(wèn)題可以隨時(shí)定位）好用的前端監(jiān)控和js錯(cuò)誤監(jiān)控系統(tǒng)webfunny前端監(jiān)控在錯(cuò)誤分析功能上，可以準(zhǔn)確定位代碼問(wèn)題所在位置,。

前端監(jiān)控目標(biāo)前端監(jiān)控主要包含兩大塊：性能監(jiān)控及異常監(jiān)控保證穩(wěn)定性（異常監(jiān)控）錯(cuò)誤監(jiān)控包括JavaScript代碼錯(cuò)誤,，Promsie錯(cuò)誤，接口（XHR,，fetch）錯(cuò)誤,，資源加載錯(cuò)誤（script，link等）等,，這些錯(cuò)誤大多會(huì)導(dǎo)致頁(yè)面功能異常甚至白屏,。提升用戶(hù)體驗(yàn)（性能監(jiān)控）性能監(jiān)控包括頁(yè)面的加載時(shí)間，接口響應(yīng)時(shí)間等,，側(cè)面反應(yīng)了用戶(hù)體驗(yàn)的好壞,。

3性能監(jiān)控3.1簡(jiǎn)單描述頁(yè)面加載簡(jiǎn)單看一下，從輸入url到頁(yè)面加載完成的過(guò)程如下：首先需要通過(guò)DNS（域名解析系統(tǒng)）將URL解析為對(duì)應(yīng)的IP地址,，然后與這個(gè)IP地址確定的那臺(tái)服務(wù)器建立起TCP網(wǎng)絡(luò)連接,，隨后我們向服務(wù)端拋出HTTP請(qǐng)求，服務(wù)端處理完我們的請(qǐng)求之后,，把目標(biāo)數(shù)據(jù)放在HTTP響應(yīng)里返回給客戶(hù)端,，拿到響應(yīng)數(shù)據(jù)的瀏覽器就可以開(kāi)始走一個(gè)渲染的流程。渲染完畢,，頁(yè)面便呈現(xiàn)給了用戶(hù),。

三、性能指標(biāo)FP(FirstPaint)：繪制時(shí)間,，包括了任何用戶(hù)自定義的背景繪制,，它是首先將像素繪制到屏幕的時(shí)刻。FCP(FirstContentPaint)：內(nèi)容繪制,。瀏覽器將個(gè)DOM渲染到屏幕的時(shí)間,，可能是文本、圖像,、SVG等,。這其實(shí)就是白屏?xí)r間FMP(FirstMeaningfulPaint)：有意義繪制,。頁(yè)面有意義的內(nèi)容渲染的時(shí)間LCP(LargestContentfulPaint),。比較大內(nèi)容渲染,。在viewport中比較大的頁(yè)面元素加載的時(shí)間。DCL(DomContentLoaded)：DOM加載完成,。當(dāng)HTML文檔被完全加載和解析完成之后,，DOMContentLoaded事件被觸發(fā)。無(wú)需等待樣式表,，圖像和子框架的完成加載,。L(onload)：當(dāng)依賴(lài)的資源全部加載完畢之后才會(huì)觸發(fā)。TTI(TimetoInteractive)：可交互時(shí)間,。用于標(biāo)記應(yīng)用已進(jìn)行視覺(jué)渲染并能可靠響應(yīng)用戶(hù)輸入的時(shí)間點(diǎn),。FID(FirstInputDelay)：輸入延遲。用戶(hù)和頁(yè)面交互(單擊鏈接,、點(diǎn)擊按鈕等)到頁(yè)面響應(yīng)交互的時(shí)間,。你是如何搭建 Web 前端性能監(jiān)控系統(tǒng)的？

整體大致可以分四個(gè)階段：信息采集,、存儲(chǔ),、分析、監(jiān)控,。采集階段：收集異常日志,，先在本地做一定的處理，采取一定的方案上報(bào)到服務(wù)器,。存儲(chǔ)階段：后端接收前端上報(bào)的異常日志,，經(jīng)過(guò)一定處理，按照一定的存儲(chǔ)方案存儲(chǔ),。分析階段：分為機(jī)器自動(dòng)分析和人工分析,。機(jī)器自動(dòng)分析，通過(guò)預(yù)設(shè)的條件和算法,，對(duì)存儲(chǔ)的日志信息進(jìn)行統(tǒng)計(jì)和篩選,，發(fā)現(xiàn)問(wèn)題，觸發(fā)報(bào)警,。人工分析,，通過(guò)提供一個(gè)可視化的數(shù)據(jù)面板，讓系統(tǒng)用戶(hù)可以看到具體的日志數(shù)據(jù),，根據(jù)信息,，發(fā)現(xiàn)異常問(wèn)題根源。報(bào)警階段：分為告警和預(yù)警,。告警按照一定的級(jí)別自動(dòng)報(bào)警,，通過(guò)設(shè)定的渠道，按照一定的觸發(fā)規(guī)則進(jìn)行。預(yù)警則在異常發(fā)生前,，提前預(yù)判,，給出警告。性能監(jiān)控：使用ResourceTimingAPI和PerformanceTimingAPI,，可以計(jì)算許多重要的指標(biāo),，比如頁(yè)面性能統(tǒng)計(jì)的起始點(diǎn)時(shí)間、首屏?xí)r間等,。異常監(jiān)控：前端捕獲異常分為全局捕獲和局部捕獲,。局部捕獲作為補(bǔ)充，對(duì)某些特殊情況進(jìn)行捕獲,，但分散,，不利于管理。所以,，我會(huì)選擇全局捕獲的方式,，即通過(guò)全局的接口，將捕獲代碼集中寫(xiě)在一個(gè)地方,。具體在實(shí)現(xiàn)項(xiàng)目中,，我應(yīng)該會(huì)采用badjs-report，它重寫(xiě)了進(jìn)行上報(bào)異常,，無(wú)需編寫(xiě)任何捕獲錯(cuò)誤的代碼,。webfunny埋點(diǎn)系統(tǒng)可快速全鏈路數(shù)據(jù)接入，打破數(shù)據(jù)孤島,，多角度洞察業(yè)務(wù),，實(shí)現(xiàn)數(shù)據(jù)智能決策。國(guó)內(nèi)好用的前端監(jiān)控和前端行為分析方案

webfunny一體化埋點(diǎn)系統(tǒng)：數(shù)據(jù)“采集+管理+分析”智能一體化,，數(shù)據(jù)驅(qū)動(dòng)業(yè)務(wù),，讓埋點(diǎn)不再困難。國(guó)內(nèi)好用的前端監(jiān)控和前端行為分析方案

搭建前端監(jiān)控系統(tǒng)（七）之用戶(hù)細(xì)查篇一,、如何貫穿用戶(hù)的整個(gè)行為鏈路,？這個(gè)很好理解，貫穿用戶(hù)的整個(gè)行為鏈路,，就需要一個(gè)單一的key來(lái)標(biāo)識(shí)這個(gè)用戶(hù),。比較簡(jiǎn)單的就是使用UserId了，在通過(guò)webfunny前端監(jiān)控系統(tǒng)「用戶(hù)細(xì)查」的功能模塊,，每個(gè)用戶(hù)我都給他傳入一個(gè)userId就可以了串聯(lián)起來(lái)了,。但是這種方式有一個(gè)很容易被忽略的弊端：如果這個(gè)項(xiàng)目獲取userId速度比較慢，或者壓根不會(huì)有userId,，那么用戶(hù)的行為記錄是不是會(huì)出現(xiàn)缺失呢,？或者根本就無(wú)法關(guān)聯(lián)呢,？那我們?cè)撊绾我?guī)避這種問(wèn)題呢？webfunny是如何做到的呢,？為了規(guī)避以上提出的幾點(diǎn)問(wèn)題,，webfunny通過(guò)設(shè)置內(nèi)置id，來(lái)對(duì)所有的用戶(hù)進(jìn)行區(qū)分,。然后再通過(guò)userId，將所有的內(nèi)置id關(guān)聯(lián)在一起,，這樣一來(lái),，只要在用戶(hù)的生命周期過(guò)程中，傳入一次userId,，我們就可以關(guān)聯(lián)上用戶(hù)所有的行為記錄了,。內(nèi)置ID生成規(guī)則的代碼，感興趣的前端同學(xué)可以到webfunny官網(wǎng)查看本篇博客原文,。國(guó)內(nèi)好用的前端監(jiān)控和前端行為分析方案

上海觀縱科技有限公司是我國(guó)webfunny前端監(jiān)控,，webfunny前端埋點(diǎn)，全鏈路應(yīng)用性能監(jiān)控,，Argus-IT運(yùn)維監(jiān)控專(zhuān)業(yè)化較早的有限責(zé)任公司之一,，公司始建于2022-11-14，在全國(guó)各個(gè)地區(qū)建立了良好的商貿(mào)渠道和技術(shù)協(xié)作關(guān)系,。觀縱科技致力于構(gòu)建傳媒,、廣電自主創(chuàng)新的競(jìng)爭(zhēng)力，將憑借高精尖的系列產(chǎn)品與解決方案,，加速推進(jìn)全國(guó)傳媒,、廣電產(chǎn)品競(jìng)爭(zhēng)力的發(fā)展。